shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): apply rounded-l-only to SensitiveInput textareas and increase visible text input area (#1561)

Browse Source
This commit is contained in:
TheCatLady
2021-05-03 20:37:51 -04:00
committed by GitHub
parent e4d0029f7b
commit 1123fce089
4 changed files with 148 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/RegionSelector/index.tsx
View File

@@ -76,7 +76,6 @@ 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 }) => (
@@ -131,9 +130,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
{({ selected, active }) => ( {({ selected, active }) => (
<div <div
className={`${ className={`${
active active ? 'text-white bg-indigo-600' : 'text-gray-300'
? 'text-white bg-indigo-600'
: 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`} } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
> >
<span className="mr-2 text-base"> <span className="mr-2 text-base">
@@ -200,9 +197,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
{({ selected, active }) => ( {({ selected, active }) => (
<div <div
className={`${ className={`${
active active ? 'text-white bg-indigo-600' : 'text-gray-300'
? 'text-white bg-indigo-600'
: 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`} } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
> >
<span className="mr-2 text-base"> <span className="mr-2 text-base">
@@ -240,7 +235,6 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
)} )}
</Listbox> </Listbox>
</div> </div>
</div>
); );
}; };

2
src/components/Settings/SettingsMain.tsx
View File

@@ -322,6 +322,7 @@ const SettingsMain: React.FC = () => {
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input">
<div className="form-input-field">
<RegionSelector <RegionSelector
value={values.region ?? ''} value={values.region ?? ''}
name="region" name="region"
@@ -329,6 +330,7 @@ const SettingsMain: React.FC = () => {
/> />
</div> </div>
</div> </div>
</div>
<div className="form-row"> <div className="form-row">
<label htmlFor="originalLanguage" className="text-label"> <label htmlFor="originalLanguage" className="text-label">
<span>{intl.formatMessage(messages.originallanguage)}</span> <span>{intl.formatMessage(messages.originallanguage)}</span>

2
src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
View File

@@ -232,6 +232,7 @@ const UserGeneralSettings: React.FC = () => {
</span> </span>
</label> </label>
<div className="form-input"> <div className="form-input">
<div className="form-input-field">
<RegionSelector <RegionSelector
name="region" name="region"
value={values.region ?? ''} value={values.region ?? ''}
@@ -240,6 +241,7 @@ const UserGeneralSettings: React.FC = () => {
/> />
</div> </div>
</div> </div>
</div>
<div className="form-row"> <div className="form-row">
<label htmlFor="originalLanguage" className="text-label"> <label htmlFor="originalLanguage" className="text-label">
<span>{intl.formatMessage(messages.originallanguage)}</span> <span>{intl.formatMessage(messages.originallanguage)}</span>

10
src/styles/globals.css
View File

@@ -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,