fix(css): rename form-input to form-input-area (#2613)

pull/2614/head
TheCatLady 3 years ago committed by GitHub
parent 1f964b576a
commit 086f0b6ce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -177,7 +177,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
{intl.formatMessage(messages.problemseason)} {intl.formatMessage(messages.problemseason)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -212,7 +212,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
{intl.formatMessage(messages.problemepisode)} {intl.formatMessage(messages.problemepisode)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"

@ -357,7 +357,7 @@ const NotificationTypeSelector: React.FC<NotificationTypeSelectorProps> = ({
{intl.formatMessage(messages.notificationTypes)} {intl.formatMessage(messages.notificationTypes)}
{!user && <span className="label-required">*</span>} {!user && <span className="label-required">*</span>}
</span> </span>
<div className="form-input"> <div className="form-input-area">
<div className="max-w-lg"> <div className="max-w-lg">
{availableTypes.map((type) => ( {availableTypes.map((type) => (
<NotificationType <NotificationType

@ -110,7 +110,7 @@ const ResetPassword: React.FC = () => {
name="email" name="email"
type="text" type="text"
inputMode="email" inputMode="email"
className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5" className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.email && touched.email && ( {errors.email && touched.email && (

@ -126,7 +126,7 @@ const ResetPassword: React.FC = () => {
name="password" name="password"
type="password" type="password"
autoComplete="new-password" autoComplete="new-password"
className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5" className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.password && touched.password && ( {errors.password && touched.password && (
@ -147,7 +147,7 @@ const ResetPassword: React.FC = () => {
name="confirmPassword" name="confirmPassword"
type="password" type="password"
autoComplete="new-password" autoComplete="new-password"
className="form-input block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5" className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.confirmPassword && {errors.confirmPassword &&

@ -158,7 +158,7 @@ const NotificationsDiscord: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -183,7 +183,7 @@ const NotificationsDiscord: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="webhookUrl" id="webhookUrl"
@ -201,7 +201,7 @@ const NotificationsDiscord: React.FC = () => {
<label htmlFor="botUsername" className="text-label"> <label htmlFor="botUsername" className="text-label">
{intl.formatMessage(messages.botUsername)} {intl.formatMessage(messages.botUsername)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="botUsername" id="botUsername"
@ -219,7 +219,7 @@ const NotificationsDiscord: React.FC = () => {
<label htmlFor="botAvatarUrl" className="text-label"> <label htmlFor="botAvatarUrl" className="text-label">
{intl.formatMessage(messages.botAvatarUrl)} {intl.formatMessage(messages.botAvatarUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="botAvatarUrl" id="botAvatarUrl"
@ -237,7 +237,7 @@ const NotificationsDiscord: React.FC = () => {
<label htmlFor="enableMentions" className="checkbox-label"> <label htmlFor="enableMentions" className="checkbox-label">
{intl.formatMessage(messages.enableMentions)} {intl.formatMessage(messages.enableMentions)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="enableMentions" id="enableMentions"

@ -237,7 +237,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -245,7 +245,7 @@ const NotificationsEmail: React.FC = () => {
<label htmlFor="senderName" className="text-label"> <label htmlFor="senderName" className="text-label">
{intl.formatMessage(messages.senderName)} {intl.formatMessage(messages.senderName)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="senderName" name="senderName" type="text" /> <Field id="senderName" name="senderName" type="text" />
</div> </div>
@ -256,7 +256,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.emailsender)} {intl.formatMessage(messages.emailsender)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="emailFrom" id="emailFrom"
@ -275,7 +275,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.smtpHost)} {intl.formatMessage(messages.smtpHost)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="smtpHost" id="smtpHost"
@ -294,7 +294,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.smtpPort)} {intl.formatMessage(messages.smtpPort)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
id="smtpPort" id="smtpPort"
name="smtpPort" name="smtpPort"
@ -315,7 +315,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.encryptionTip)} {intl.formatMessage(messages.encryptionTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field as="select" id="encryption" name="encryption"> <Field as="select" id="encryption" name="encryption">
<option value="none"> <option value="none">
@ -338,7 +338,7 @@ const NotificationsEmail: React.FC = () => {
<label htmlFor="allowSelfSigned" className="checkbox-label"> <label htmlFor="allowSelfSigned" className="checkbox-label">
{intl.formatMessage(messages.allowselfsigned)} {intl.formatMessage(messages.allowselfsigned)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="allowSelfSigned" id="allowSelfSigned"
@ -350,7 +350,7 @@ const NotificationsEmail: React.FC = () => {
<label htmlFor="authUser" className="text-label"> <label htmlFor="authUser" className="text-label">
{intl.formatMessage(messages.authUser)} {intl.formatMessage(messages.authUser)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="authUser" name="authUser" type="text" /> <Field id="authUser" name="authUser" type="text" />
</div> </div>
@ -360,7 +360,7 @@ const NotificationsEmail: React.FC = () => {
<label htmlFor="authPass" className="text-label"> <label htmlFor="authPass" className="text-label">
{intl.formatMessage(messages.authPass)} {intl.formatMessage(messages.authPass)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -385,7 +385,7 @@ const NotificationsEmail: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -415,7 +415,7 @@ const NotificationsEmail: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"

@ -160,7 +160,7 @@ const NotificationsGotify: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -169,7 +169,7 @@ const NotificationsGotify: React.FC = () => {
{intl.formatMessage(messages.url)} {intl.formatMessage(messages.url)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="url" name="url" type="text" /> <Field id="url" name="url" type="text" />
</div> </div>
@ -183,7 +183,7 @@ const NotificationsGotify: React.FC = () => {
{intl.formatMessage(messages.token)} {intl.formatMessage(messages.token)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="token" name="token" type="text" /> <Field id="token" name="token" type="text" />
</div> </div>

@ -145,7 +145,7 @@ const NotificationsLunaSea: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -170,7 +170,7 @@ const NotificationsLunaSea: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="webhookUrl" id="webhookUrl"
@ -195,7 +195,7 @@ const NotificationsLunaSea: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="profileName" name="profileName" type="text" /> <Field id="profileName" name="profileName" type="text" />
</div> </div>

@ -144,7 +144,7 @@ const NotificationsPushbullet: React.FC = () => {
{intl.formatMessage(messages.agentEnabled)} {intl.formatMessage(messages.agentEnabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -171,7 +171,7 @@ const NotificationsPushbullet: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -189,7 +189,7 @@ const NotificationsPushbullet: React.FC = () => {
<label htmlFor="channelTag" className="text-label"> <label htmlFor="channelTag" className="text-label">
{intl.formatMessage(messages.channelTag)} {intl.formatMessage(messages.channelTag)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="channelTag" name="channelTag" type="text" /> <Field id="channelTag" name="channelTag" type="text" />
</div> </div>

@ -162,7 +162,7 @@ const NotificationsPushover: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -188,7 +188,7 @@ const NotificationsPushover: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="accessToken" name="accessToken" type="text" /> <Field id="accessToken" name="accessToken" type="text" />
</div> </div>
@ -218,7 +218,7 @@ const NotificationsPushover: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="userToken" name="userToken" type="text" /> <Field id="userToken" name="userToken" type="text" />
</div> </div>

@ -140,7 +140,7 @@ const NotificationsSlack: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -165,7 +165,7 @@ const NotificationsSlack: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="webhookUrl" id="webhookUrl"

@ -169,7 +169,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -209,7 +209,7 @@ const NotificationsTelegram: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -230,7 +230,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.botUsernameTip)} {intl.formatMessage(messages.botUsernameTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="botUsername" name="botUsername" type="text" /> <Field id="botUsername" name="botUsername" type="text" />
</div> </div>
@ -262,7 +262,7 @@ const NotificationsTelegram: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="chatId" name="chatId" type="text" /> <Field id="chatId" name="chatId" type="text" />
</div> </div>
@ -278,7 +278,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.sendSilentlyTip)} {intl.formatMessage(messages.sendSilentlyTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="sendSilently" name="sendSilently" /> <Field type="checkbox" id="sendSilently" name="sendSilently" />
</div> </div>
</div> </div>

@ -120,7 +120,7 @@ const NotificationsWebPush: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>

@ -226,7 +226,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="enabled" name="enabled" /> <Field type="checkbox" id="enabled" name="enabled" />
</div> </div>
</div> </div>
@ -235,7 +235,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.webhookUrl)} {intl.formatMessage(messages.webhookUrl)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="webhookUrl" id="webhookUrl"
@ -253,7 +253,7 @@ const NotificationsWebhook: React.FC = () => {
<label htmlFor="authHeader" className="text-label"> <label htmlFor="authHeader" className="text-label">
{intl.formatMessage(messages.authheader)} {intl.formatMessage(messages.authheader)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="authHeader" name="authHeader" type="text" /> <Field id="authHeader" name="authHeader" type="text" />
</div> </div>
@ -264,7 +264,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.customJson)} {intl.formatMessage(messages.customJson)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<JSONEditor <JSONEditor
name="webhook-json-payload" name="webhook-json-payload"

@ -354,7 +354,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
: messages.defaultserver : messages.defaultserver
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="isDefault" name="isDefault" /> <Field type="checkbox" id="isDefault" name="isDefault" />
</div> </div>
</div> </div>
@ -362,7 +362,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="is4k" className="checkbox-label"> <label htmlFor="is4k" className="checkbox-label">
{intl.formatMessage(messages.server4k)} {intl.formatMessage(messages.server4k)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="is4k" name="is4k" /> <Field type="checkbox" id="is4k" name="is4k" />
</div> </div>
</div> </div>
@ -371,7 +371,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="name" id="name"
@ -393,7 +393,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<span className="protocol"> <span className="protocol">
{values.ssl ? 'https://' : 'http://'} {values.ssl ? 'https://' : 'http://'}
@ -420,7 +420,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
id="port" id="port"
name="port" name="port"
@ -441,7 +441,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="ssl" className="checkbox-label"> <label htmlFor="ssl" className="checkbox-label">
{intl.formatMessage(messages.ssl)} {intl.formatMessage(messages.ssl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="ssl" id="ssl"
@ -458,7 +458,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -480,7 +480,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="baseUrl" className="text-label"> <label htmlFor="baseUrl" className="text-label">
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="baseUrl" id="baseUrl"
@ -503,7 +503,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -541,7 +541,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -577,7 +577,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.minimumAvailability)} {intl.formatMessage(messages.minimumAvailability)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -607,7 +607,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="tags" className="text-label"> <label htmlFor="tags" className="text-label">
{intl.formatMessage(messages.tags)} {intl.formatMessage(messages.tags)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Select<OptionType, true> <Select<OptionType, true>
options={ options={
isValidated isValidated
@ -664,7 +664,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="externalUrl" className="text-label"> <label htmlFor="externalUrl" className="text-label">
{intl.formatMessage(messages.externalUrl)} {intl.formatMessage(messages.externalUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="externalUrl" id="externalUrl"
@ -682,7 +682,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="syncEnabled" className="checkbox-label"> <label htmlFor="syncEnabled" className="checkbox-label">
{intl.formatMessage(messages.syncEnabled)} {intl.formatMessage(messages.syncEnabled)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="syncEnabled" id="syncEnabled"
@ -694,7 +694,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<label htmlFor="enableSearch" className="checkbox-label"> <label htmlFor="enableSearch" className="checkbox-label">
{intl.formatMessage(messages.enableSearch)} {intl.formatMessage(messages.enableSearch)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="enableSearch" id="enableSearch"

@ -216,7 +216,7 @@ const SettingsJobs: React.FC = () => {
<label htmlFor="jobSchedule" className="text-label"> <label htmlFor="jobSchedule" className="text-label">
{intl.formatMessage(messages.editJobSchedulePrompt)} {intl.formatMessage(messages.editJobSchedulePrompt)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
{jobEditModal.job?.interval === 'short' ? ( {jobEditModal.job?.interval === 'short' ? (
<select <select
name="jobScheduleMinutes" name="jobScheduleMinutes"

@ -191,7 +191,7 @@ const SettingsMain: React.FC = () => {
<label htmlFor="apiKey" className="text-label"> <label htmlFor="apiKey" className="text-label">
{intl.formatMessage(messages.apikey)} {intl.formatMessage(messages.apikey)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
type="text" type="text"
@ -221,7 +221,7 @@ const SettingsMain: React.FC = () => {
<label htmlFor="applicationTitle" className="text-label"> <label htmlFor="applicationTitle" className="text-label">
{intl.formatMessage(messages.applicationTitle)} {intl.formatMessage(messages.applicationTitle)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="applicationTitle" id="applicationTitle"
@ -238,7 +238,7 @@ const SettingsMain: React.FC = () => {
<label htmlFor="applicationUrl" className="text-label"> <label htmlFor="applicationUrl" className="text-label">
{intl.formatMessage(messages.applicationurl)} {intl.formatMessage(messages.applicationurl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="applicationUrl" id="applicationUrl"
@ -259,7 +259,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.trustProxyTip)} {intl.formatMessage(messages.trustProxyTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="trustProxy" id="trustProxy"
@ -282,7 +282,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.csrfProtectionTip)} {intl.formatMessage(messages.csrfProtectionTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="csrfProtection" id="csrfProtection"
@ -300,7 +300,7 @@ const SettingsMain: React.FC = () => {
<label htmlFor="locale" className="text-label"> <label htmlFor="locale" className="text-label">
{intl.formatMessage(messages.locale)} {intl.formatMessage(messages.locale)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field as="select" id="locale" name="locale"> <Field as="select" id="locale" name="locale">
{( {(
@ -327,7 +327,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.regionTip)} {intl.formatMessage(messages.regionTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<RegionSelector <RegionSelector
value={values.region ?? ''} value={values.region ?? ''}
@ -344,7 +344,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.originallanguageTip)} {intl.formatMessage(messages.originallanguageTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<LanguageSelector <LanguageSelector
setFieldValue={setFieldValue} setFieldValue={setFieldValue}
@ -362,7 +362,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(globalMessages.experimental)} {intl.formatMessage(globalMessages.experimental)}
</Badge> </Badge>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="hideAvailable" id="hideAvailable"
@ -382,7 +382,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.partialRequestsEnabled)} {intl.formatMessage(messages.partialRequestsEnabled)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="partialRequestsEnabled" id="partialRequestsEnabled"

@ -430,7 +430,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="preset" className="text-label"> <label htmlFor="preset" className="text-label">
{intl.formatMessage(messages.serverpreset)} {intl.formatMessage(messages.serverpreset)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<select <select
id="preset" id="preset"
@ -504,7 +504,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm"> <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
{values.useSsl ? 'https://' : 'http://'} {values.useSsl ? 'https://' : 'http://'}
@ -527,7 +527,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="text" type="text"
inputMode="numeric" inputMode="numeric"
@ -544,7 +544,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="ssl" className="checkbox-label"> <label htmlFor="ssl" className="checkbox-label">
{intl.formatMessage(messages.enablessl)} {intl.formatMessage(messages.enablessl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="useSsl" id="useSsl"
@ -577,7 +577,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.webAppUrlTip)} {intl.formatMessage(messages.webAppUrlTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
type="text" type="text"
@ -790,7 +790,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm"> <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
{values.tautulliUseSsl ? 'https://' : 'http://'} {values.tautulliUseSsl ? 'https://' : 'http://'}
@ -813,7 +813,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="text" type="text"
inputMode="numeric" inputMode="numeric"
@ -830,7 +830,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliUseSsl" className="checkbox-label"> <label htmlFor="tautulliUseSsl" className="checkbox-label">
{intl.formatMessage(messages.enablessl)} {intl.formatMessage(messages.enablessl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="tautulliUseSsl" id="tautulliUseSsl"
@ -848,7 +848,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliUrlBase" className="text-label"> <label htmlFor="tautulliUrlBase" className="text-label">
{intl.formatMessage(messages.urlBase)} {intl.formatMessage(messages.urlBase)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
type="text" type="text"
@ -867,7 +867,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.tautulliApiKey)} {intl.formatMessage(messages.tautulliApiKey)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -885,7 +885,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliExternalUrl" className="text-label"> <label htmlFor="tautulliExternalUrl" className="text-label">
{intl.formatMessage(messages.externalUrl)} {intl.formatMessage(messages.externalUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
type="text" type="text"

@ -112,7 +112,7 @@ const SettingsUsers: React.FC = () => {
{intl.formatMessage(messages.localLoginTip)} {intl.formatMessage(messages.localLoginTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="localLogin" id="localLogin"
@ -130,7 +130,7 @@ const SettingsUsers: React.FC = () => {
{intl.formatMessage(messages.newPlexLoginTip)} {intl.formatMessage(messages.newPlexLoginTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="newPlexLogin" id="newPlexLogin"
@ -145,7 +145,7 @@ const SettingsUsers: React.FC = () => {
<label htmlFor="applicationTitle" className="text-label"> <label htmlFor="applicationTitle" className="text-label">
{intl.formatMessage(messages.movieRequestLimitLabel)} {intl.formatMessage(messages.movieRequestLimitLabel)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<QuotaSelector <QuotaSelector
onChange={setFieldValue} onChange={setFieldValue}
dayFieldName="movieQuotaDays" dayFieldName="movieQuotaDays"
@ -160,7 +160,7 @@ const SettingsUsers: React.FC = () => {
<label htmlFor="applicationTitle" className="text-label"> <label htmlFor="applicationTitle" className="text-label">
{intl.formatMessage(messages.tvRequestLimitLabel)} {intl.formatMessage(messages.tvRequestLimitLabel)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<QuotaSelector <QuotaSelector
onChange={setFieldValue} onChange={setFieldValue}
dayFieldName="tvQuotaDays" dayFieldName="tvQuotaDays"
@ -183,7 +183,7 @@ const SettingsUsers: React.FC = () => {
{intl.formatMessage(messages.defaultPermissionsTip)} {intl.formatMessage(messages.defaultPermissionsTip)}
</span> </span>
</span> </span>
<div className="form-input"> <div className="form-input-area">
<div className="max-w-lg"> <div className="max-w-lg">
<PermissionEdit <PermissionEdit
currentPermission={values.defaultPermissions} currentPermission={values.defaultPermissions}

@ -382,7 +382,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
: messages.defaultserver : messages.defaultserver
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="isDefault" name="isDefault" /> <Field type="checkbox" id="isDefault" name="isDefault" />
</div> </div>
</div> </div>
@ -390,7 +390,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="is4k" className="checkbox-label"> <label htmlFor="is4k" className="checkbox-label">
{intl.formatMessage(messages.server4k)} {intl.formatMessage(messages.server4k)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field type="checkbox" id="is4k" name="is4k" /> <Field type="checkbox" id="is4k" name="is4k" />
</div> </div>
</div> </div>
@ -399,7 +399,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="name" id="name"
@ -421,7 +421,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<span className="protocol"> <span className="protocol">
{values.ssl ? 'https://' : 'http://'} {values.ssl ? 'https://' : 'http://'}
@ -448,7 +448,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
id="port" id="port"
name="port" name="port"
@ -469,7 +469,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="ssl" className="checkbox-label"> <label htmlFor="ssl" className="checkbox-label">
{intl.formatMessage(messages.ssl)} {intl.formatMessage(messages.ssl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="ssl" id="ssl"
@ -486,7 +486,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -508,7 +508,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="baseUrl" className="text-label"> <label htmlFor="baseUrl" className="text-label">
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="baseUrl" id="baseUrl"
@ -531,7 +531,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -569,7 +569,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -608,7 +608,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.languageprofile)} {intl.formatMessage(messages.languageprofile)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -652,7 +652,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="tags" className="text-label"> <label htmlFor="tags" className="text-label">
{intl.formatMessage(messages.tags)} {intl.formatMessage(messages.tags)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Select<OptionType, true> <Select<OptionType, true>
options={ options={
isValidated isValidated
@ -712,7 +712,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="activeAnimeProfileId" className="text-label"> <label htmlFor="activeAnimeProfileId" className="text-label">
{intl.formatMessage(messages.animequalityprofile)} {intl.formatMessage(messages.animequalityprofile)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -752,7 +752,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="activeAnimeRootFolder" className="text-label"> <label htmlFor="activeAnimeRootFolder" className="text-label">
{intl.formatMessage(messages.animerootfolder)} {intl.formatMessage(messages.animerootfolder)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -791,7 +791,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
> >
{intl.formatMessage(messages.animelanguageprofile)} {intl.formatMessage(messages.animelanguageprofile)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
as="select" as="select"
@ -835,7 +835,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="tags" className="text-label"> <label htmlFor="tags" className="text-label">
{intl.formatMessage(messages.animeTags)} {intl.formatMessage(messages.animeTags)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Select<OptionType, true> <Select<OptionType, true>
options={ options={
isValidated isValidated
@ -898,7 +898,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
> >
{intl.formatMessage(messages.seasonfolders)} {intl.formatMessage(messages.seasonfolders)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="enableSeasonFolders" id="enableSeasonFolders"
@ -910,7 +910,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="externalUrl" className="text-label"> <label htmlFor="externalUrl" className="text-label">
{intl.formatMessage(messages.externalUrl)} {intl.formatMessage(messages.externalUrl)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="externalUrl" id="externalUrl"
@ -928,7 +928,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="syncEnabled" className="checkbox-label"> <label htmlFor="syncEnabled" className="checkbox-label">
{intl.formatMessage(messages.syncEnabled)} {intl.formatMessage(messages.syncEnabled)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="syncEnabled" id="syncEnabled"
@ -940,7 +940,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<label htmlFor="enableSearch" className="checkbox-label"> <label htmlFor="enableSearch" className="checkbox-label">
{intl.formatMessage(messages.enableSearch)} {intl.formatMessage(messages.enableSearch)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="enableSearch" id="enableSearch"

@ -349,7 +349,7 @@ const UserList: React.FC = () => {
<label htmlFor="displayName" className="text-label"> <label htmlFor="displayName" className="text-label">
{intl.formatMessage(messages.displayName)} {intl.formatMessage(messages.displayName)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="displayName" id="displayName"
@ -364,7 +364,7 @@ const UserList: React.FC = () => {
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
<span className="label-required">*</span> <span className="label-required">*</span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="email" id="email"
@ -389,7 +389,7 @@ const UserList: React.FC = () => {
{intl.formatMessage(messages.autogeneratepasswordTip)} {intl.formatMessage(messages.autogeneratepasswordTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="genpassword" id="genpassword"
@ -410,7 +410,7 @@ const UserList: React.FC = () => {
<span className="label-required">*</span> <span className="label-required">*</span>
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"

@ -212,7 +212,7 @@ const UserGeneralSettings: React.FC = () => {
<label htmlFor="displayName" className="text-label"> <label htmlFor="displayName" className="text-label">
{intl.formatMessage(messages.displayName)} {intl.formatMessage(messages.displayName)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="displayName" id="displayName"
@ -249,7 +249,7 @@ const UserGeneralSettings: React.FC = () => {
</span> </span>
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="discordId" name="discordId" type="text" /> <Field id="discordId" name="discordId" type="text" />
</div> </div>
@ -262,7 +262,7 @@ const UserGeneralSettings: React.FC = () => {
<label htmlFor="locale" className="text-label"> <label htmlFor="locale" className="text-label">
{intl.formatMessage(messages.applanguage)} {intl.formatMessage(messages.applanguage)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field as="select" id="locale" name="locale"> <Field as="select" id="locale" name="locale">
<option value="" lang={locale}> <option value="" lang={locale}>
@ -295,7 +295,7 @@ const UserGeneralSettings: React.FC = () => {
{intl.formatMessage(messages.regionTip)} {intl.formatMessage(messages.regionTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<RegionSelector <RegionSelector
name="region" name="region"
@ -313,7 +313,7 @@ const UserGeneralSettings: React.FC = () => {
{intl.formatMessage(messages.originallanguageTip)} {intl.formatMessage(messages.originallanguageTip)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<LanguageSelector <LanguageSelector
setFieldValue={setFieldValue} setFieldValue={setFieldValue}
@ -333,7 +333,7 @@ const UserGeneralSettings: React.FC = () => {
{intl.formatMessage(messages.movierequestlimit)} {intl.formatMessage(messages.movierequestlimit)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="mb-4 flex items-center"> <div className="mb-4 flex items-center">
<input <input
@ -373,7 +373,7 @@ const UserGeneralSettings: React.FC = () => {
{intl.formatMessage(messages.seriesrequestlimit)} {intl.formatMessage(messages.seriesrequestlimit)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="mb-4 flex items-center"> <div className="mb-4 flex items-center">
<input <input

@ -126,7 +126,7 @@ const UserNotificationsDiscord: React.FC = () => {
</span> </span>
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="discordId" name="discordId" type="text" /> <Field id="discordId" name="discordId" type="text" />
</div> </div>

@ -115,7 +115,7 @@ const UserEmailSettings: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"

@ -123,7 +123,7 @@ const UserPushbulletSettings: React.FC = () => {
</span> </span>
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"

@ -146,7 +146,7 @@ const UserPushoverSettings: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="pushoverApplicationToken" id="pushoverApplicationToken"
@ -182,7 +182,7 @@ const UserPushoverSettings: React.FC = () => {
})} })}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="pushoverUserKey" id="pushoverUserKey"

@ -141,7 +141,7 @@ const UserTelegramSettings: React.FC = () => {
</span> </span>
)} )}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field <Field
id="telegramChatId" id="telegramChatId"
@ -161,7 +161,7 @@ const UserTelegramSettings: React.FC = () => {
{intl.formatMessage(messages.sendSilentlyDescription)} {intl.formatMessage(messages.sendSilentlyDescription)}
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input-area">
<Field <Field
type="checkbox" type="checkbox"
id="telegramSendSilently" id="telegramSendSilently"

@ -166,7 +166,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="currentPassword" className="text-label"> <label htmlFor="currentPassword" className="text-label">
{intl.formatMessage(messages.currentpassword)} {intl.formatMessage(messages.currentpassword)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -186,7 +186,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="newPassword" className="text-label"> <label htmlFor="newPassword" className="text-label">
{intl.formatMessage(messages.newpassword)} {intl.formatMessage(messages.newpassword)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"
@ -205,7 +205,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="confirmPassword" className="text-label"> <label htmlFor="confirmPassword" className="text-label">
{intl.formatMessage(messages.confirmpassword)} {intl.formatMessage(messages.confirmpassword)}
</label> </label>
<div className="form-input"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<SensitiveInput <SensitiveInput
as="field" as="field"

@ -227,7 +227,7 @@
@apply mt-6 max-w-6xl sm:mt-5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4; @apply mt-6 max-w-6xl sm:mt-5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4;
} }
.form-input { .form-input-area {
@apply text-sm text-white sm:col-span-2; @apply text-sm text-white sm:col-span-2;
} }

Loading…
Cancel
Save