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

pull/2614/head
TheCatLady 2 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)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<Field
as="select"
@ -212,7 +212,7 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
{intl.formatMessage(messages.problemepisode)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<Field
as="select"

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

@ -110,7 +110,7 @@ const ResetPassword: React.FC = () => {
name="email"
type="text"
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>
{errors.email && touched.email && (

@ -126,7 +126,7 @@ const ResetPassword: React.FC = () => {
name="password"
type="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>
{errors.password && touched.password && (
@ -147,7 +147,7 @@ const ResetPassword: React.FC = () => {
name="confirmPassword"
type="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>
{errors.confirmPassword &&

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -430,7 +430,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="preset" className="text-label">
{intl.formatMessage(messages.serverpreset)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<select
id="preset"
@ -504,7 +504,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.hostname)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<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">
{values.useSsl ? 'https://' : 'http://'}
@ -527,7 +527,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.port)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<Field
type="text"
inputMode="numeric"
@ -544,7 +544,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="ssl" className="checkbox-label">
{intl.formatMessage(messages.enablessl)}
</label>
<div className="form-input">
<div className="form-input-area">
<Field
type="checkbox"
id="useSsl"
@ -577,7 +577,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.webAppUrlTip)}
</span>
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<Field
type="text"
@ -790,7 +790,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.hostname)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<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">
{values.tautulliUseSsl ? 'https://' : 'http://'}
@ -813,7 +813,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.port)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<Field
type="text"
inputMode="numeric"
@ -830,7 +830,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliUseSsl" className="checkbox-label">
{intl.formatMessage(messages.enablessl)}
</label>
<div className="form-input">
<div className="form-input-area">
<Field
type="checkbox"
id="tautulliUseSsl"
@ -848,7 +848,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliUrlBase" className="text-label">
{intl.formatMessage(messages.urlBase)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<Field
type="text"
@ -867,7 +867,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{intl.formatMessage(messages.tautulliApiKey)}
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<SensitiveInput
as="field"
@ -885,7 +885,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<label htmlFor="tautulliExternalUrl" className="text-label">
{intl.formatMessage(messages.externalUrl)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<Field
type="text"

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

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

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

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

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

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

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

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

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

@ -166,7 +166,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="currentPassword" className="text-label">
{intl.formatMessage(messages.currentpassword)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<SensitiveInput
as="field"
@ -186,7 +186,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="newPassword" className="text-label">
{intl.formatMessage(messages.newpassword)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<SensitiveInput
as="field"
@ -205,7 +205,7 @@ const UserPasswordChange: React.FC = () => {
<label htmlFor="confirmPassword" className="text-label">
{intl.formatMessage(messages.confirmpassword)}
</label>
<div className="form-input">
<div className="form-input-area">
<div className="form-input-field">
<SensitiveInput
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;
}
.form-input {
.form-input-area {
@apply text-sm text-white sm:col-span-2;
}

Loading…
Cancel
Save