mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
fix(ui): apply rounded-l-only to SensitiveInput textareas and increase visible text input area (#1561)
This commit is contained in:
TheCatLady
@@ -76,112 +76,82 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
|
|||||||
}, [onChange, selectedRegion, name, regions]);
|
}, [onChange, selectedRegion, name, regions]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative z-40 flex max-w-lg">
|
<div className="w-full">
|
||||||
<div className="w-full">
|
<Listbox as="div" value={selectedRegion} onChange={setSelectedRegion}>
|
||||||
<Listbox as="div" value={selectedRegion} onChange={setSelectedRegion}>
|
{({ open }) => (
|
||||||
{({ open }) => (
|
<div className="relative">
|
||||||
<div className="relative">
|
<span className="inline-block w-full rounded-md shadow-sm">
|
||||||
<span className="inline-block w-full rounded-md shadow-sm">
|
<Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||||
<Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
{((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
|
||||||
{((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
|
(isUserSetting &&
|
||||||
(isUserSetting &&
|
!selectedRegion &&
|
||||||
!selectedRegion &&
|
currentSettings.region &&
|
||||||
currentSettings.region &&
|
hasFlag(currentSettings.region))) && (
|
||||||
hasFlag(currentSettings.region))) && (
|
<span className="h-4 mr-2 overflow-hidden text-base leading-4">
|
||||||
<span className="h-4 mr-2 overflow-hidden text-base leading-4">
|
<span
|
||||||
<span
|
className={`flag:${
|
||||||
className={`flag:${
|
selectedRegion
|
||||||
selectedRegion
|
? selectedRegion.iso_3166_1
|
||||||
? selectedRegion.iso_3166_1
|
: currentSettings.region
|
||||||
: currentSettings.region
|
}`}
|
||||||
}`}
|
/>
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="block truncate">
|
|
||||||
{selectedRegion && selectedRegion.iso_3166_1 !== 'all'
|
|
||||||
? regionName(selectedRegion.iso_3166_1)
|
|
||||||
: isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
|
|
||||||
? intl.formatMessage(messages.regionServerDefault, {
|
|
||||||
region: currentSettings.region
|
|
||||||
? regionName(currentSettings.region)
|
|
||||||
: intl.formatMessage(messages.regionDefault),
|
|
||||||
})
|
|
||||||
: intl.formatMessage(messages.regionDefault)}
|
|
||||||
</span>
|
</span>
|
||||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
|
)}
|
||||||
<ChevronDownIcon className="w-5 h-5" />
|
<span className="block truncate">
|
||||||
</span>
|
{selectedRegion && selectedRegion.iso_3166_1 !== 'all'
|
||||||
</Listbox.Button>
|
? regionName(selectedRegion.iso_3166_1)
|
||||||
</span>
|
: isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
|
||||||
|
? intl.formatMessage(messages.regionServerDefault, {
|
||||||
|
region: currentSettings.region
|
||||||
|
? regionName(currentSettings.region)
|
||||||
|
: intl.formatMessage(messages.regionDefault),
|
||||||
|
})
|
||||||
|
: intl.formatMessage(messages.regionDefault)}
|
||||||
|
</span>
|
||||||
|
<span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
|
||||||
|
<ChevronDownIcon className="w-5 h-5" />
|
||||||
|
</span>
|
||||||
|
</Listbox.Button>
|
||||||
|
</span>
|
||||||
|
|
||||||
<Transition
|
<Transition
|
||||||
show={open}
|
show={open}
|
||||||
leave="transition ease-in duration-100"
|
leave="transition ease-in duration-100"
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
className="absolute w-full mt-1 bg-gray-800 rounded-md shadow-lg"
|
className="absolute w-full mt-1 bg-gray-800 rounded-md shadow-lg"
|
||||||
|
>
|
||||||
|
<Listbox.Options
|
||||||
|
static
|
||||||
|
className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
|
||||||
>
|
>
|
||||||
<Listbox.Options
|
{isUserSetting && (
|
||||||
static
|
<Listbox.Option value={null}>
|
||||||
className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
|
|
||||||
>
|
|
||||||
{isUserSetting && (
|
|
||||||
<Listbox.Option value={null}>
|
|
||||||
{({ selected, active }) => (
|
|
||||||
<div
|
|
||||||
className={`${
|
|
||||||
active
|
|
||||||
? 'text-white bg-indigo-600'
|
|
||||||
: 'text-gray-300'
|
|
||||||
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
|
|
||||||
>
|
|
||||||
<span className="mr-2 text-base">
|
|
||||||
<span
|
|
||||||
className={
|
|
||||||
hasFlag(currentSettings.region)
|
|
||||||
? `flag:${currentSettings.region}`
|
|
||||||
: 'pr-6'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
selected ? 'font-semibold' : 'font-normal'
|
|
||||||
} block truncate`}
|
|
||||||
>
|
|
||||||
{intl.formatMessage(messages.regionServerDefault, {
|
|
||||||
region: currentSettings.region
|
|
||||||
? regionName(currentSettings.region)
|
|
||||||
: intl.formatMessage(messages.regionDefault),
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
{selected && (
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
active ? 'text-white' : 'text-indigo-600'
|
|
||||||
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
|
|
||||||
>
|
|
||||||
<CheckIcon className="w-5 h-5" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Listbox.Option>
|
|
||||||
)}
|
|
||||||
<Listbox.Option value={isUserSetting ? allRegion : null}>
|
|
||||||
{({ selected, active }) => (
|
{({ selected, active }) => (
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`${
|
||||||
active ? 'text-white bg-indigo-600' : 'text-gray-300'
|
active ? 'text-white bg-indigo-600' : 'text-gray-300'
|
||||||
} cursor-default select-none relative py-2 pl-8 pr-4`}
|
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
|
||||||
>
|
>
|
||||||
|
<span className="mr-2 text-base">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
hasFlag(currentSettings.region)
|
||||||
|
? `flag:${currentSettings.region}`
|
||||||
|
: 'pr-6'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
<span
|
<span
|
||||||
className={`${
|
className={`${
|
||||||
selected ? 'font-semibold' : 'font-normal'
|
selected ? 'font-semibold' : 'font-normal'
|
||||||
} block truncate pl-8`}
|
} block truncate`}
|
||||||
>
|
>
|
||||||
{intl.formatMessage(messages.regionDefault)}
|
{intl.formatMessage(messages.regionServerDefault, {
|
||||||
|
region: currentSettings.region
|
||||||
|
? regionName(currentSettings.region)
|
||||||
|
: intl.formatMessage(messages.regionDefault),
|
||||||
|
})}
|
||||||
</span>
|
</span>
|
||||||
{selected && (
|
{selected && (
|
||||||
<span
|
<span
|
||||||
@@ -195,51 +165,75 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Listbox.Option>
|
</Listbox.Option>
|
||||||
{sortedRegions?.map((region) => (
|
)}
|
||||||
<Listbox.Option key={region.iso_3166_1} value={region}>
|
<Listbox.Option value={isUserSetting ? allRegion : null}>
|
||||||
{({ selected, active }) => (
|
{({ selected, active }) => (
|
||||||
<div
|
<div
|
||||||
|
className={`${
|
||||||
|
active ? 'text-white bg-indigo-600' : 'text-gray-300'
|
||||||
|
} cursor-default select-none relative py-2 pl-8 pr-4`}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
selected ? 'font-semibold' : 'font-normal'
|
||||||
|
} block truncate pl-8`}
|
||||||
|
>
|
||||||
|
{intl.formatMessage(messages.regionDefault)}
|
||||||
|
</span>
|
||||||
|
{selected && (
|
||||||
|
<span
|
||||||
className={`${
|
className={`${
|
||||||
active
|
active ? 'text-white' : 'text-indigo-600'
|
||||||
? 'text-white bg-indigo-600'
|
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
|
||||||
: 'text-gray-300'
|
|
||||||
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
|
|
||||||
>
|
>
|
||||||
<span className="mr-2 text-base">
|
<CheckIcon className="w-5 h-5" />
|
||||||
<span
|
</span>
|
||||||
className={
|
)}
|
||||||
hasFlag(region.iso_3166_1)
|
</div>
|
||||||
? `flag:${region.iso_3166_1}`
|
)}
|
||||||
: 'pr-6'
|
</Listbox.Option>
|
||||||
}
|
{sortedRegions?.map((region) => (
|
||||||
/>
|
<Listbox.Option key={region.iso_3166_1} value={region}>
|
||||||
</span>
|
{({ selected, active }) => (
|
||||||
|
<div
|
||||||
|
className={`${
|
||||||
|
active ? 'text-white bg-indigo-600' : 'text-gray-300'
|
||||||
|
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
|
||||||
|
>
|
||||||
|
<span className="mr-2 text-base">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
hasFlag(region.iso_3166_1)
|
||||||
|
? `flag:${region.iso_3166_1}`
|
||||||
|
: 'pr-6'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
selected ? 'font-semibold' : 'font-normal'
|
||||||
|
} block truncate`}
|
||||||
|
>
|
||||||
|
{regionName(region.iso_3166_1)}
|
||||||
|
</span>
|
||||||
|
{selected && (
|
||||||
<span
|
<span
|
||||||
className={`${
|
className={`${
|
||||||
selected ? 'font-semibold' : 'font-normal'
|
active ? 'text-white' : 'text-indigo-600'
|
||||||
} block truncate`}
|
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
|
||||||
>
|
>
|
||||||
{regionName(region.iso_3166_1)}
|
<CheckIcon className="w-5 h-5" />
|
||||||
</span>
|
</span>
|
||||||
{selected && (
|
)}
|
||||||
<span
|
</div>
|
||||||
className={`${
|
)}
|
||||||
active ? 'text-white' : 'text-indigo-600'
|
</Listbox.Option>
|
||||||
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
|
))}
|
||||||
>
|
</Listbox.Options>
|
||||||
<CheckIcon className="w-5 h-5" />
|
</Transition>
|
||||||
</span>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Listbox>
|
||||||
)}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Listbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -322,11 +322,13 @@ const SettingsMain: React.FC = () => {
|
|||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div className="form-input">
|
<div className="form-input">
|
||||||
<RegionSelector
|
<div className="form-input-field">
|
||||||
value={values.region ?? ''}
|
<RegionSelector
|
||||||
name="region"
|
value={values.region ?? ''}
|
||||||
onChange={setFieldValue}
|
name="region"
|
||||||
/>
|
onChange={setFieldValue}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-row">
|
<div className="form-row">
|
||||||
|
|||||||
@@ -232,12 +232,14 @@ const UserGeneralSettings: React.FC = () => {
|
|||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div className="form-input">
|
<div className="form-input">
|
||||||
<RegionSelector
|
<div className="form-input-field">
|
||||||
name="region"
|
<RegionSelector
|
||||||
value={values.region ?? ''}
|
name="region"
|
||||||
isUserSetting
|
value={values.region ?? ''}
|
||||||
onChange={setFieldValue}
|
isUserSetting
|
||||||
/>
|
onChange={setFieldValue}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-row">
|
<div className="form-row">
|
||||||
|
|||||||
@@ -218,7 +218,7 @@ img.avatar-sm {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-input-field {
|
.form-input-field {
|
||||||
@apply flex max-w-lg rounded-md shadow-sm;
|
@apply flex max-w-xl rounded-md shadow-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
@@ -268,12 +268,14 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input.rounded-l-only,
|
input.rounded-l-only,
|
||||||
select.rounded-l-only {
|
select.rounded-l-only,
|
||||||
|
textarea.rounded-l-only {
|
||||||
@apply rounded-r-none;
|
@apply rounded-r-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.rounded-r-only,
|
input.rounded-r-only,
|
||||||
select.rounded-r-only {
|
select.rounded-r-only,
|
||||||
|
textarea.rounded-r-only {
|
||||||
@apply rounded-l-none;
|
@apply rounded-l-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -286,7 +288,7 @@ select.short {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button.input-action {
|
button.input-action {
|
||||||
@apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
|
@apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-md svg,
|
.button-md svg,
|
||||||
|
|||||||
Reference in New Issue
Block a user