open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): clarify which fields are required in radarr/sonarr modals

Browse Source 
closes #575
pull/671/head
sct 4 years ago
parent 51d8fba916
commit 860d71ed69
2 changed files with 71 additions and 58 deletions
Show Stats Download Patch File Download Diff File

61
src/components/Settings/RadarrModal/index.tsx
Unescape View File

@ -286,7 +286,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
type="checkbox" type="checkbox"
id="isDefault" id="isDefault"
name="isDefault" name="isDefault"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out rounded-md" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>
@ -296,9 +296,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="name" id="name"
name="name" name="name"
@ -310,11 +311,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('name', e.target.value); setFieldValue('name', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.name && touched.name && ( {errors.name && touched.name && (
<div className="text-red-500 mt-2">{errors.name}</div> <div className="mt-2 text-red-500">{errors.name}</div>
)} )}
</div> </div>
</div> </div>
@ -324,10 +325,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default"> <span className="inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
{values.ssl ? 'https://' : 'http://'} {values.ssl ? 'https://' : 'http://'}
</span> </span>
<Field <Field
@ -339,11 +341,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('hostname', e.target.value); setFieldValue('hostname', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 form-input rounded-r-md sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.hostname && touched.hostname && ( {errors.hostname && touched.hostname && (
<div className="text-red-500 mt-2">{errors.hostname}</div> <div className="mt-2 text-red-500">{errors.hostname}</div>
)} )}
</div> </div>
</div> </div>
@ -353,6 +355,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<Field <Field
@ -364,10 +367,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('port', e.target.value); setFieldValue('port', e.target.value);
}} }}
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="block w-24 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md shadow-sm form-input sm:text-sm sm:leading-5"
/> />
{errors.port && touched.port && ( {errors.port && touched.port && (
<div className="text-red-500 mt-2">{errors.port}</div> <div className="mt-2 text-red-500">{errors.port}</div>
)} )}
</div> </div>
</div> </div>
@ -387,7 +390,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('ssl', !values.ssl); setFieldValue('ssl', !values.ssl);
}} }}
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>
@ -397,9 +400,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="apiKey" id="apiKey"
name="apiKey" name="apiKey"
@ -411,11 +415,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('apiKey', e.target.value); setFieldValue('apiKey', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.apiKey && touched.apiKey && ( {errors.apiKey && touched.apiKey && (
<div className="text-red-500 mt-2">{errors.apiKey}</div> <div className="mt-2 text-red-500">{errors.apiKey}</div>
)} )}
</div> </div>
</div> </div>
@ -427,7 +431,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="baseUrl" id="baseUrl"
name="baseUrl" name="baseUrl"
@ -439,11 +443,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('baseUrl', e.target.value); setFieldValue('baseUrl', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.baseUrl && touched.baseUrl && ( {errors.baseUrl && touched.baseUrl && (
<div className="text-red-500 mt-2">{errors.baseUrl}</div> <div className="mt-2 text-red-500">{errors.baseUrl}</div>
)} )}
</div> </div>
</div> </div>
@ -453,15 +457,16 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="activeProfileId" id="activeProfileId"
name="activeProfileId" name="activeProfileId"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -484,7 +489,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</Field> </Field>
</div> </div>
{errors.activeProfileId && touched.activeProfileId && ( {errors.activeProfileId && touched.activeProfileId && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.activeProfileId} {errors.activeProfileId}
</div> </div>
)} )}
@ -496,15 +501,16 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="rootFolder" id="rootFolder"
name="rootFolder" name="rootFolder"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -525,7 +531,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</Field> </Field>
</div> </div>
{errors.rootFolder && touched.rootFolder && ( {errors.rootFolder && touched.rootFolder && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.rootFolder} {errors.rootFolder}
</div> </div>
)} )}
@ -537,14 +543,15 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.minimumAvailability)} {intl.formatMessage(messages.minimumAvailability)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="minimumAvailability" id="minimumAvailability"
name="minimumAvailability" name="minimumAvailability"
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
> >
<option value="announced">Announced</option> <option value="announced">Announced</option>
<option value="inCinemas">In Cinemas</option> <option value="inCinemas">In Cinemas</option>
@ -554,7 +561,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
</div> </div>
{errors.minimumAvailability && {errors.minimumAvailability &&
touched.minimumAvailability && ( touched.minimumAvailability && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.minimumAvailability} {errors.minimumAvailability}
</div> </div>
)} )}
@ -572,7 +579,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
type="checkbox" type="checkbox"
id="is4k" id="is4k"
name="is4k" name="is4k"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>

68
src/components/Settings/SonarrModal/index.tsx
Unescape View File

@ -295,7 +295,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox" type="checkbox"
id="isDefault" id="isDefault"
name="isDefault" name="isDefault"
className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>
@ -305,9 +305,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="name" id="name"
name="name" name="name"
@ -319,11 +320,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('name', e.target.value); setFieldValue('name', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.name && touched.name && ( {errors.name && touched.name && (
<div className="text-red-500 mt-2">{errors.name}</div> <div className="mt-2 text-red-500">{errors.name}</div>
)} )}
</div> </div>
</div> </div>
@ -333,10 +334,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default"> <span className="inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
{values.ssl ? 'https://' : 'http://'} {values.ssl ? 'https://' : 'http://'}
</span> </span>
<Field <Field
@ -348,11 +350,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('hostname', e.target.value); setFieldValue('hostname', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 form-input rounded-r-md sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.hostname && touched.hostname && ( {errors.hostname && touched.hostname && (
<div className="text-red-500 mt-2">{errors.hostname}</div> <div className="mt-2 text-red-500">{errors.hostname}</div>
)} )}
</div> </div>
</div> </div>
@ -362,6 +364,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<Field <Field
@ -373,10 +376,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('port', e.target.value); setFieldValue('port', e.target.value);
}} }}
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="block w-24 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md shadow-sm form-input sm:text-sm sm:leading-5"
/> />
{errors.port && touched.port && ( {errors.port && touched.port && (
<div className="text-red-500 mt-2">{errors.port}</div> <div className="mt-2 text-red-500">{errors.port}</div>
)} )}
</div> </div>
</div> </div>
@ -396,7 +399,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('ssl', !values.ssl); setFieldValue('ssl', !values.ssl);
}} }}
className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>
@ -406,9 +409,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="apiKey" id="apiKey"
name="apiKey" name="apiKey"
@ -420,11 +424,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('apiKey', e.target.value); setFieldValue('apiKey', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.apiKey && touched.apiKey && ( {errors.apiKey && touched.apiKey && (
<div className="text-red-500 mt-2">{errors.apiKey}</div> <div className="mt-2 text-red-500">{errors.apiKey}</div>
)} )}
</div> </div>
</div> </div>
@ -436,7 +440,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
id="baseUrl" id="baseUrl"
name="baseUrl" name="baseUrl"
@ -448,11 +452,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false); setIsValidated(false);
setFieldValue('baseUrl', e.target.value); setFieldValue('baseUrl', e.target.value);
}} }}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500" className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/> />
</div> </div>
{errors.baseUrl && touched.baseUrl && ( {errors.baseUrl && touched.baseUrl && (
<div className="text-red-500 mt-2">{errors.baseUrl}</div> <div className="mt-2 text-red-500">{errors.baseUrl}</div>
)} )}
</div> </div>
</div> </div>
@ -462,15 +466,16 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="activeProfileId" id="activeProfileId"
name="activeProfileId" name="activeProfileId"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -493,7 +498,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
</Field> </Field>
</div> </div>
{errors.activeProfileId && touched.activeProfileId && ( {errors.activeProfileId && touched.activeProfileId && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.activeProfileId} {errors.activeProfileId}
</div> </div>
)} )}
@ -505,15 +510,16 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
<span className="text-red-500">*</span>
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="rootFolder" id="rootFolder"
name="rootFolder" name="rootFolder"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -534,7 +540,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
</Field> </Field>
</div> </div>
{errors.rootFolder && touched.rootFolder && ( {errors.rootFolder && touched.rootFolder && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.rootFolder} {errors.rootFolder}
</div> </div>
)} )}
@ -548,13 +554,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.animequalityprofile)} {intl.formatMessage(messages.animequalityprofile)}
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="activeAnimeProfileId" id="activeAnimeProfileId"
name="activeAnimeProfileId" name="activeAnimeProfileId"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -578,7 +584,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
</div> </div>
{errors.activeAnimeProfileId && {errors.activeAnimeProfileId &&
touched.activeAnimeProfileId && ( touched.activeAnimeProfileId && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.activeAnimeProfileId} {errors.activeAnimeProfileId}
</div> </div>
)} )}
@ -592,13 +598,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.animerootfolder)} {intl.formatMessage(messages.animerootfolder)}
</label> </label>
<div className="mt-1 sm:mt-0 sm:col-span-2"> <div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm"> <div className="flex max-w-lg rounded-md shadow-sm">
<Field <Field
as="select" as="select"
id="activeAnimeRootFolder" id="activeAnimeRootFolder"
name="activeAnimeRootFolder" name="activeAnimeRootFolder"
disabled={!isValidated || isTesting} disabled={!isValidated || isTesting}
className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50" className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 bg-gray-700 border-gray-500 rounded-md form-select focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
> >
<option value=""> <option value="">
{isTesting {isTesting
@ -620,7 +626,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
</div> </div>
{errors.activeAnimeRootFolder && {errors.activeAnimeRootFolder &&
touched.activeAnimeRootFolder && ( touched.activeAnimeRootFolder && (
<div className="text-red-500 mt-2"> <div className="mt-2 text-red-500">
{errors.rootFolder} {errors.rootFolder}
</div> </div>
)} )}
@ -638,7 +644,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox" type="checkbox"
id="is4k" id="is4k"
name="is4k" name="is4k"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>
@ -654,7 +660,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox" type="checkbox"
id="enableSeasonFolders" id="enableSeasonFolders"
name="enableSeasonFolders" name="enableSeasonFolders"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out" className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/> />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save