mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-02 04:39:14 -05:00
refactor(css): add new global classes & card border hover styling (#1156)
This commit is contained in:
TheCatLady
@@ -113,7 +113,7 @@ const NotificationsDiscord: React.FC = () => {
|
||||
{intl.formatMessage(messages.botUsername)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="botUsername"
|
||||
name="botUsername"
|
||||
@@ -131,7 +131,7 @@ const NotificationsDiscord: React.FC = () => {
|
||||
{intl.formatMessage(messages.botAvatarUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="botAvatarUrl"
|
||||
name="botAvatarUrl"
|
||||
@@ -149,7 +149,7 @@ const NotificationsDiscord: React.FC = () => {
|
||||
{intl.formatMessage(messages.webhookUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="webhookUrl"
|
||||
name="webhookUrl"
|
||||
|
||||
@@ -152,7 +152,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.emailsender)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="emailFrom"
|
||||
name="emailFrom"
|
||||
@@ -170,7 +170,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.senderName)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="senderName"
|
||||
name="senderName"
|
||||
@@ -185,7 +185,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.smtpHost)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="smtpHost"
|
||||
name="smtpHost"
|
||||
@@ -203,15 +203,13 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.smtpPort)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
|
||||
<Field
|
||||
id="smtpPort"
|
||||
name="smtpPort"
|
||||
type="text"
|
||||
placeholder="465"
|
||||
className="short"
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
id="smtpPort"
|
||||
name="smtpPort"
|
||||
type="text"
|
||||
placeholder="465"
|
||||
className="short"
|
||||
/>
|
||||
{errors.smtpPort && touched.smtpPort && (
|
||||
<div className="error">{errors.smtpPort}</div>
|
||||
)}
|
||||
@@ -245,7 +243,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.authUser)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field id="authUser" name="authUser" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,7 +253,7 @@ const NotificationsEmail: React.FC = () => {
|
||||
{intl.formatMessage(messages.authPass)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="authPass"
|
||||
name="authPass"
|
||||
|
||||
@@ -126,7 +126,7 @@ const NotificationsPushbullet: React.FC = () => {
|
||||
{intl.formatMessage(messages.accessToken)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="accessToken"
|
||||
name="accessToken"
|
||||
|
||||
@@ -153,7 +153,7 @@ const NotificationsPushover: React.FC = () => {
|
||||
{intl.formatMessage(messages.accessToken)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="accessToken"
|
||||
name="accessToken"
|
||||
@@ -171,7 +171,7 @@ const NotificationsPushover: React.FC = () => {
|
||||
{intl.formatMessage(messages.userToken)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="userToken"
|
||||
name="userToken"
|
||||
|
||||
@@ -129,7 +129,7 @@ const NotificationsSlack: React.FC = () => {
|
||||
{intl.formatMessage(messages.webhookUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field id="webhookUrl" name="webhookUrl" type="text" />
|
||||
</div>
|
||||
{errors.webhookUrl && touched.webhookUrl && (
|
||||
|
||||
@@ -159,7 +159,7 @@ const NotificationsTelegram: React.FC = () => {
|
||||
{intl.formatMessage(messages.botUsername)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="botUsername"
|
||||
name="botUsername"
|
||||
@@ -177,7 +177,7 @@ const NotificationsTelegram: React.FC = () => {
|
||||
{intl.formatMessage(messages.botAPI)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="botAPI"
|
||||
name="botAPI"
|
||||
@@ -195,7 +195,7 @@ const NotificationsTelegram: React.FC = () => {
|
||||
{intl.formatMessage(messages.chatId)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="chatId"
|
||||
name="chatId"
|
||||
|
||||
@@ -175,7 +175,7 @@ const NotificationsWebhook: React.FC = () => {
|
||||
{intl.formatMessage(messages.webhookUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field id="webhookUrl" name="webhookUrl" type="text" />
|
||||
</div>
|
||||
{errors.webhookUrl && touched.webhookUrl && (
|
||||
@@ -188,7 +188,7 @@ const NotificationsWebhook: React.FC = () => {
|
||||
{intl.formatMessage(messages.authheader)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field id="authHeader" name="authHeader" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -198,7 +198,7 @@ const NotificationsWebhook: React.FC = () => {
|
||||
{intl.formatMessage(messages.customJson)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<JSONEditor
|
||||
name="webhook-json-payload"
|
||||
onUpdate={(value) => setFieldValue('jsonPayload', value)}
|
||||
|
||||
@@ -345,7 +345,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
@@ -370,7 +370,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<span className="protocol">
|
||||
{values.ssl ? 'https://' : 'http://'}
|
||||
</span>
|
||||
@@ -435,7 +435,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="apiKey"
|
||||
name="apiKey"
|
||||
@@ -459,7 +459,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
{intl.formatMessage(messages.baseUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="baseUrl"
|
||||
name="baseUrl"
|
||||
@@ -484,7 +484,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeProfileId"
|
||||
@@ -522,7 +522,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="rootFolder"
|
||||
@@ -558,7 +558,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="minimumAvailability"
|
||||
@@ -583,7 +583,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
|
||||
{intl.formatMessage(messages.externalUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="externalUrl"
|
||||
name="externalUrl"
|
||||
|
||||
@@ -155,7 +155,7 @@ const SettingsMain: React.FC = () => {
|
||||
{intl.formatMessage(messages.apikey)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<input
|
||||
type="text"
|
||||
id="apiKey"
|
||||
@@ -196,7 +196,7 @@ const SettingsMain: React.FC = () => {
|
||||
{intl.formatMessage(messages.applicationTitle)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="applicationTitle"
|
||||
name="applicationTitle"
|
||||
@@ -214,7 +214,7 @@ const SettingsMain: React.FC = () => {
|
||||
{intl.formatMessage(messages.applicationurl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="applicationUrl"
|
||||
name="applicationUrl"
|
||||
@@ -294,7 +294,7 @@ const SettingsMain: React.FC = () => {
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="originalLanguage"
|
||||
|
||||
@@ -355,7 +355,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
</div>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
@@ -374,7 +374,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
<FormattedMessage {...messages.serverpreset} />
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm input-group">
|
||||
<div className="form-input-field input-group">
|
||||
<select
|
||||
id="preset"
|
||||
name="preset"
|
||||
@@ -458,7 +458,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
<FormattedMessage {...messages.hostname} />
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
|
||||
{values.useSsl ? 'https://' : 'http://'}
|
||||
</span>
|
||||
@@ -480,15 +480,13 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
<FormattedMessage {...messages.port} />
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
|
||||
<Field
|
||||
type="text"
|
||||
id="port"
|
||||
name="port"
|
||||
placeholder="32400"
|
||||
className="short"
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
type="text"
|
||||
id="port"
|
||||
name="port"
|
||||
placeholder="32400"
|
||||
className="short"
|
||||
/>
|
||||
{errors.port && touched.port && (
|
||||
<div className="error">{errors.port}</div>
|
||||
)}
|
||||
|
||||
@@ -374,7 +374,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
@@ -399,7 +399,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<span className="protocol">
|
||||
{values.ssl ? 'https://' : 'http://'}
|
||||
</span>
|
||||
@@ -464,7 +464,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="apiKey"
|
||||
name="apiKey"
|
||||
@@ -488,7 +488,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
{intl.formatMessage(messages.baseUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="baseUrl"
|
||||
name="baseUrl"
|
||||
@@ -513,7 +513,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeProfileId"
|
||||
@@ -551,7 +551,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="rootFolder"
|
||||
@@ -590,7 +590,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
<span className="label-required">*</span>
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeLanguageProfileId"
|
||||
@@ -634,7 +634,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
{intl.formatMessage(messages.animequalityprofile)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeAnimeProfileId"
|
||||
@@ -674,7 +674,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
{intl.formatMessage(messages.animerootfolder)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeAnimeRootFolder"
|
||||
@@ -713,7 +713,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
{intl.formatMessage(messages.animelanguageprofile)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
as="select"
|
||||
id="activeAnimeLanguageProfileId"
|
||||
@@ -772,7 +772,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
{intl.formatMessage(messages.externalUrl)}
|
||||
</label>
|
||||
<div className="form-input">
|
||||
<div className="flex max-w-lg rounded-md shadow-sm">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="externalUrl"
|
||||
name="externalUrl"
|
||||
|
||||
Reference in New Issue
Block a user