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

refactor(css): add new global classes & card border hover styling (#1156)

Browse Source
This commit is contained in:
TheCatLady
2021-03-11 21:25:46 -05:00
committed by GitHub
parent 71773c91c6
commit 1be97fe7fb
31 changed files with 165 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CompanyCard/index.tsx
View File

@@ -13,9 +13,11 @@ const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
return (
<Link href={url}>
<a
className={`relative flex items-center justify-center h-32 w-64 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ${
isHovered ? 'bg-gray-700 scale-105' : 'bg-gray-800 scale-100'
} ring-1 ring-gray-700 rounded-xl`}
className={`relative flex items-center justify-center h-32 w-64 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
isHovered
? 'bg-gray-700 scale-105 ring-gray-500'
: 'bg-gray-800 scale-100 ring-gray-700'
} rounded-xl`}
onMouseEnter={() => {
setHovered(true);
}}

8
src/components/Discover/NetworkSlider/index.tsx
View File

@@ -123,11 +123,9 @@ const NetworkSlider: React.FC = () => {
return (
<>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
<span>{intl.formatMessage(messages.networks)}</span>
</div>
<div className="slider-header">
<div className="slider-title">
<span>{intl.formatMessage(messages.networks)}</span>
</div>
</div>
<Slider

8
src/components/Discover/StudioSlider/index.tsx
View File

@@ -81,11 +81,9 @@ const StudioSlider: React.FC = () => {
return (
<>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
<span>{intl.formatMessage(messages.studios)}</span>
</div>
<div className="slider-header">
<div className="slider-title">
<span>{intl.formatMessage(messages.studios)}</span>
</div>
</div>
<Slider

50
src/components/Discover/index.tsx
View File

@@ -41,11 +41,9 @@ const Discover: React.FC = () => {
return (
<>
<PageTitle title={intl.formatMessage(messages.discover)} />
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<div className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
<span>{intl.formatMessage(messages.recentlyAdded)}</span>
</div>
<div className="slider-header">
<div className="slider-title">
<span>{intl.formatMessage(messages.recentlyAdded)}</span>
</div>
</div>
<Slider
@@ -60,28 +58,26 @@ const Discover: React.FC = () => {
/>
))}
/>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
<Link href="/requests">
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
<span>{intl.formatMessage(messages.recentrequests)}</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</a>
</Link>
</div>
<div className="slider-header">
<Link href="/requests">
<a className="slider-title">
<span>{intl.formatMessage(messages.recentrequests)}</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</a>
</Link>
</div>
<Slider
sliderKey="requests"

2
src/components/Layout/SearchInput/index.tsx
View File

@@ -29,7 +29,7 @@ const SearchInput: React.FC = () => {
<input
id="search_field"
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
placeholder={intl.formatMessage(messages.searchPlaceholder)}
type="search"
value={searchValue}

2
src/components/Layout/UserDropdown/index.tsx
View File

@@ -31,7 +31,7 @@ const UserDropdown: React.FC = () => {
<div className="relative ml-3">
<div>
<button
className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500"
className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500 hover:ring-gray-500"
id="user-menu"
aria-label="User menu"
aria-haspopup="true"

4
src/components/Login/LocalLogin.tsx
View File

@@ -63,7 +63,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
{intl.formatMessage(messages.email)}
</label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="email"
name="email"
@@ -79,7 +79,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
{intl.formatMessage(messages.password)}
</label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="password"
name="password"

2
src/components/MediaSlider/ShowMoreCard/index.tsx
View File

@@ -33,7 +33,7 @@ const ShowMoreCard: React.FC<ShowMoreCardProps> = ({ url, posters }) => {
<div
className={`relative w-36 sm:w-36 md:w-44
rounded-xl text-white shadow-lg overflow-hidden transition ease-in-out duration-150 cursor-pointer transform-gpu ${
isHovered ? 'bg-gray-500 scale-105' : 'bg-gray-600 scale-100'
isHovered ? 'bg-gray-500 scale-105' : 'bg-gray-700 scale-100'
}`}
>
<div style={{ paddingBottom: '150%' }}>

52
src/components/MediaSlider/index.tsx
View File

@@ -135,34 +135,32 @@ const MediaSlider: React.FC<MediaSliderProps> = ({
return (
<>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
<div className="flex-1 min-w-0">
{linkUrl ? (
<Link href={linkUrl}>
<a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
<span>{title}</span>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</a>
</Link>
) : (
<div className="inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate">
<div className="slider-header">
{linkUrl ? (
<Link href={linkUrl}>
<a className="slider-title">
<span>{title}</span>
</div>
)}
</div>
<svg
className="w-6 h-6 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</a>
</Link>
) : (
<div className="slider-title">
<span>{title}</span>
</div>
)}
</div>
<Slider
sliderKey={sliderKey}

6
src/components/PersonCard/index.tsx
View File

@@ -37,8 +37,10 @@ const PersonCard: React.FC<PersonCardProps> = ({
<div
className={`relative ${
canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
} rounded-xl text-white shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ring-gray-700 ${
isHovered ? 'bg-gray-700 scale-105' : 'bg-gray-800 scale-100'
} rounded-xl text-white shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
isHovered
? 'bg-gray-700 scale-105 ring-gray-500'
: 'bg-gray-800 scale-100 ring-gray-700'
}`}
>
<div style={{ paddingBottom: '150%' }}>

2
src/components/ResetPassword/RequestResetLink.tsx
View File

@@ -102,7 +102,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.email)}
</label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="email"
name="email"

4
src/components/ResetPassword/index.tsx
View File

@@ -119,7 +119,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.password)}
</label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="password"
name="password"
@@ -141,7 +141,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.confirmpassword)}
</label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="confirmPassword"
name="confirmPassword"

6
src/components/Settings/Notifications/NotificationsDiscord.tsx
View File

@@ -113,7 +113,7 @@ const NotificationsDiscord: React.FC = () => {
{intl.formatMessage(messages.botUsername)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="botUsername"
name="botUsername"
@@ -131,7 +131,7 @@ const NotificationsDiscord: React.FC = () => {
{intl.formatMessage(messages.botAvatarUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="botAvatarUrl"
name="botAvatarUrl"
@@ -149,7 +149,7 @@ const NotificationsDiscord: React.FC = () => {
{intl.formatMessage(messages.webhookUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="webhookUrl"
name="webhookUrl"

26
src/components/Settings/Notifications/NotificationsEmail.tsx
View File

@@ -152,7 +152,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.emailsender)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="emailFrom"
name="emailFrom"
@@ -170,7 +170,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.senderName)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="senderName"
name="senderName"
@@ -185,7 +185,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.smtpHost)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="smtpHost"
name="smtpHost"
@@ -203,15 +203,13 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.smtpPort)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
<Field
id="smtpPort"
name="smtpPort"
type="text"
placeholder="465"
className="short"
/>
</div>
<Field
id="smtpPort"
name="smtpPort"
type="text"
placeholder="465"
className="short"
/>
{errors.smtpPort && touched.smtpPort && (
<div className="error">{errors.smtpPort}</div>
)}
@@ -245,7 +243,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.authUser)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="authUser" name="authUser" type="text" />
</div>
</div>
@@ -255,7 +253,7 @@ const NotificationsEmail: React.FC = () => {
{intl.formatMessage(messages.authPass)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="authPass"
name="authPass"

2
src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
View File

@@ -126,7 +126,7 @@ const NotificationsPushbullet: React.FC = () => {
{intl.formatMessage(messages.accessToken)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="accessToken"
name="accessToken"

4
src/components/Settings/Notifications/NotificationsPushover/index.tsx
View File

@@ -153,7 +153,7 @@ const NotificationsPushover: React.FC = () => {
{intl.formatMessage(messages.accessToken)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="accessToken"
name="accessToken"
@@ -171,7 +171,7 @@ const NotificationsPushover: React.FC = () => {
{intl.formatMessage(messages.userToken)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="userToken"
name="userToken"

2
src/components/Settings/Notifications/NotificationsSlack/index.tsx
View File

@@ -129,7 +129,7 @@ const NotificationsSlack: React.FC = () => {
{intl.formatMessage(messages.webhookUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="webhookUrl" name="webhookUrl" type="text" />
</div>
{errors.webhookUrl && touched.webhookUrl && (

6
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -159,7 +159,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.botUsername)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="botUsername"
name="botUsername"
@@ -177,7 +177,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.botAPI)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="botAPI"
name="botAPI"
@@ -195,7 +195,7 @@ const NotificationsTelegram: React.FC = () => {
{intl.formatMessage(messages.chatId)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="chatId"
name="chatId"

6
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -175,7 +175,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.webhookUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="webhookUrl" name="webhookUrl" type="text" />
</div>
{errors.webhookUrl && touched.webhookUrl && (
@@ -188,7 +188,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.authheader)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="authHeader" name="authHeader" type="text" />
</div>
</div>
@@ -198,7 +198,7 @@ const NotificationsWebhook: React.FC = () => {
{intl.formatMessage(messages.customJson)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<JSONEditor
name="webhook-json-payload"
onUpdate={(value) => setFieldValue('jsonPayload', value)}

16
src/components/Settings/RadarrModal/index.tsx
View File

@@ -345,7 +345,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="name"
name="name"
@@ -370,7 +370,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<span className="protocol">
{values.ssl ? 'https://' : 'http://'}
</span>
@@ -435,7 +435,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="apiKey"
name="apiKey"
@@ -459,7 +459,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.baseUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="baseUrl"
name="baseUrl"
@@ -484,7 +484,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeProfileId"
@@ -522,7 +522,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="rootFolder"
@@ -558,7 +558,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="minimumAvailability"
@@ -583,7 +583,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{intl.formatMessage(messages.externalUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="externalUrl"
name="externalUrl"

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

@@ -155,7 +155,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.apikey)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<input
type="text"
id="apiKey"
@@ -196,7 +196,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.applicationTitle)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="applicationTitle"
name="applicationTitle"
@@ -214,7 +214,7 @@ const SettingsMain: React.FC = () => {
{intl.formatMessage(messages.applicationurl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="applicationUrl"
name="applicationUrl"
@@ -294,7 +294,7 @@ const SettingsMain: React.FC = () => {
</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="originalLanguage"

22
src/components/Settings/SettingsPlex.tsx
View File

@@ -355,7 +355,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<input
type="text"
id="name"
@@ -374,7 +374,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.serverpreset} />
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm input-group">
<div className="form-input-field input-group">
<select
id="preset"
name="preset"
@@ -458,7 +458,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.hostname} />
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
{values.useSsl ? 'https://' : 'http://'}
</span>
@@ -480,15 +480,13 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.port} />
</label>
<div className="form-input">
<div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
<Field
type="text"
id="port"
name="port"
placeholder="32400"
className="short"
/>
</div>
<Field
type="text"
id="port"
name="port"
placeholder="32400"
className="short"
/>
{errors.port && touched.port && (
<div className="error">{errors.port}</div>
)}

22
src/components/Settings/SonarrModal/index.tsx
View File

@@ -374,7 +374,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="name"
name="name"
@@ -399,7 +399,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<span className="protocol">
{values.ssl ? 'https://' : 'http://'}
</span>
@@ -464,7 +464,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="apiKey"
name="apiKey"
@@ -488,7 +488,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.baseUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="baseUrl"
name="baseUrl"
@@ -513,7 +513,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeProfileId"
@@ -551,7 +551,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="rootFolder"
@@ -590,7 +590,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<span className="label-required">*</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeLanguageProfileId"
@@ -634,7 +634,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.animequalityprofile)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeAnimeProfileId"
@@ -674,7 +674,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.animerootfolder)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeAnimeRootFolder"
@@ -713,7 +713,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.animelanguageprofile)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="activeAnimeLanguageProfileId"
@@ -772,7 +772,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{intl.formatMessage(messages.externalUrl)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="externalUrl"
name="externalUrl"

8
src/components/Slider/index.tsx
View File

@@ -163,7 +163,9 @@ const Slider: React.FC<SliderProps> = ({
<div className="absolute right-0 flex -mt-10 text-gray-400">
<button
className={`${
scrollPos.isStart ? 'cursor-not-allowed text-gray-800' : ''
scrollPos.isStart
? 'cursor-not-allowed text-gray-800'
: 'hover:text-white'
}`}
onClick={() => slide(Direction.LEFT)}
disabled={scrollPos.isStart}
@@ -185,7 +187,9 @@ const Slider: React.FC<SliderProps> = ({
</button>
<button
className={`${
scrollPos.isEnd ? 'cursor-not-allowed text-gray-800' : ''
scrollPos.isEnd
? 'cursor-not-allowed text-gray-800'
: 'hover:text-white'
}`}
onClick={() => slide(Direction.RIGHT)}
disabled={scrollPos.isEnd}

6
src/components/TitleCard/index.tsx
View File

@@ -81,8 +81,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
onCancel={closeModal}
/>
<div
className={`transition duration-300 transform-gpu scale-100 outline-none cursor-default titleCard ring-1 ring-gray-700 rounded-xl ${
showDetail ? 'scale-105 shadow-lg' : 'shadow'
className={`transition duration-300 transform-gpu scale-100 outline-none cursor-default titleCard rounded-xl ring-1 ${
showDetail
? 'scale-105 shadow-lg ring-gray-500'
: 'shadow ring-gray-700'
}`}
style={{
backgroundImage: image

4
src/components/UserList/index.tsx
View File

@@ -326,7 +326,7 @@ const UserList: React.FC = () => {
{intl.formatMessage(messages.email)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="email"
name="email"
@@ -357,7 +357,7 @@ const UserList: React.FC = () => {
{intl.formatMessage(messages.password)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="password"
name="password"

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

@@ -150,7 +150,7 @@ const UserGeneralSettings: React.FC = () => {
{intl.formatMessage(messages.displayName)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="displayName"
name="displayName"
@@ -187,7 +187,7 @@ const UserGeneralSettings: React.FC = () => {
</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
as="select"
id="originalLanguage"

4
src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
View File

@@ -144,7 +144,7 @@ const UserNotificationSettings: React.FC = () => {
</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="discordId" name="discordId" type="text" />
</div>
{errors.discordId && touched.discordId && (
@@ -203,7 +203,7 @@ const UserNotificationSettings: React.FC = () => {
</span>
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="telegramChatId"
name="telegramChatId"

6
src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
View File

@@ -148,7 +148,7 @@ const UserPasswordChange: React.FC = () => {
{intl.formatMessage(messages.currentpassword)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="currentPassword"
name="currentPassword"
@@ -166,7 +166,7 @@ const UserPasswordChange: React.FC = () => {
{intl.formatMessage(messages.newpassword)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field id="newPassword" name="newPassword" type="text" />
</div>
{errors.newPassword && touched.newPassword && (
@@ -179,7 +179,7 @@ const UserPasswordChange: React.FC = () => {
{intl.formatMessage(messages.confirmpassword)}
</label>
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<div className="form-input-field">
<Field
id="confirmPassword"
name="confirmPassword"

16
src/styles/globals.css
View File

@@ -29,6 +29,18 @@ ul.cardList > li {
padding-bottom: 150%;
}
.slider-header {
@apply flex mt-6 mb-4;
}
.slider-title {
@apply inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
}
a.slider-title {
@apply hover:text-white;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
@@ -78,6 +90,10 @@ img.avatar-sm {
@apply text-white sm:col-span-2;
}
.form-input-field {
@apply flex max-w-lg rounded-md shadow-sm;
}
.label-required {
@apply text-red-500;
}

1
tailwind.config.js
View File

@@ -63,6 +63,7 @@ module.exports = {
margin: ['first', 'last', 'responsive'],
boxShadow: ['group-focus'],
opacity: ['disabled', 'hover', 'group-hover'],
ringColor: ['focus', 'focus-within', 'hover', 'active'],
scale: ['hover', 'focus', 'group-hover'],
zIndex: ['hover', 'responsive'],
},