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

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

Browse Source
pull/1154/head
TheCatLady 4 years ago committed by GitHub
parent 71773c91c6
commit 1be97fe7fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 165 additions and 152 deletions
Show Stats Download Patch File Download Diff File

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

@ -13,9 +13,11 @@ const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
return ( return (
<Link href={url}> <Link href={url}>
<a <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 ${ 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' : 'bg-gray-800 scale-100' isHovered
} ring-1 ring-gray-700 rounded-xl`} ? 'bg-gray-700 scale-105 ring-gray-500'
: 'bg-gray-800 scale-100 ring-gray-700'
} rounded-xl`}
onMouseEnter={() => { onMouseEnter={() => {
setHovered(true); setHovered(true);
}} }}

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

@ -123,11 +123,9 @@ const NetworkSlider: React.FC = () => {
return ( return (
<> <>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between"> <div className="slider-header">
<div className="flex-1 min-w-0"> <div className="slider-title">
<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>
<span>{intl.formatMessage(messages.networks)}</span>
</div>
</div> </div>
</div> </div>
<Slider <Slider

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

@ -81,11 +81,9 @@ const StudioSlider: React.FC = () => {
return ( return (
<> <>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between"> <div className="slider-header">
<div className="flex-1 min-w-0"> <div className="slider-title">
<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>
<span>{intl.formatMessage(messages.studios)}</span>
</div>
</div> </div>
</div> </div>
<Slider <Slider

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

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

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

@ -29,7 +29,7 @@ const SearchInput: React.FC = () => {
<input <input
id="search_field" id="search_field"
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }} 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)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
type="search" type="search"
value={searchValue} value={searchValue}

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

@ -31,7 +31,7 @@ const UserDropdown: React.FC = () => {
<div className="relative ml-3"> <div className="relative ml-3">
<div> <div>
<button <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" id="user-menu"
aria-label="User menu" aria-label="User menu"
aria-haspopup="true" aria-haspopup="true"

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

@ -63,7 +63,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</label> </label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2"> <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 <Field
id="email" id="email"
name="email" name="email"
@ -79,7 +79,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
{intl.formatMessage(messages.password)} {intl.formatMessage(messages.password)}
</label> </label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2"> <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 <Field
id="password" id="password"
name="password" name="password"

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

@ -33,7 +33,7 @@ const ShowMoreCard: React.FC<ShowMoreCardProps> = ({ url, posters }) => {
<div <div
className={`relative w-36 sm:w-36 md:w-44 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 ${ 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%' }}> <div style={{ paddingBottom: '150%' }}>

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

@ -135,34 +135,32 @@ const MediaSlider: React.FC<MediaSliderProps> = ({
return ( return (
<> <>
<div className="mt-6 mb-4 md:flex md:items-center md:justify-between"> <div className="slider-header">
<div className="flex-1 min-w-0"> {linkUrl ? (
{linkUrl ? ( <Link href={linkUrl}>
<Link href={linkUrl}> <a className="slider-title">
<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">
<span>{title}</span> <span>{title}</span>
</div> <svg
)} className="w-6 h-6 ml-2"
</div> 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> </div>
<Slider <Slider
sliderKey={sliderKey} sliderKey={sliderKey}

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

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

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

@ -102,7 +102,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.email)} {intl.formatMessage(messages.email)}
</label> </label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2"> <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 <Field
id="email" id="email"
name="email" name="email"

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

@ -119,7 +119,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.password)} {intl.formatMessage(messages.password)}
</label> </label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2"> <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 <Field
id="password" id="password"
name="password" name="password"
@ -141,7 +141,7 @@ const ResetPassword: React.FC = () => {
{intl.formatMessage(messages.confirmpassword)} {intl.formatMessage(messages.confirmpassword)}
</label> </label>
<div className="mt-1 mb-2 sm:mt-0 sm:col-span-2"> <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 <Field
id="confirmPassword" id="confirmPassword"
name="confirmPassword" name="confirmPassword"

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

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

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

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

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

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

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

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

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

@ -129,7 +129,7 @@ const NotificationsSlack: React.FC = () => {
{intl.formatMessage(messages.webhookUrl)} {intl.formatMessage(messages.webhookUrl)}
</label> </label>
<div className="form-input"> <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" /> <Field id="webhookUrl" name="webhookUrl" type="text" />
</div> </div>
{errors.webhookUrl && touched.webhookUrl && ( {errors.webhookUrl && touched.webhookUrl && (

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

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

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

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

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

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

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

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

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

@ -355,7 +355,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div> </div>
</label> </label>
<div className="form-input"> <div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm"> <div className="form-input-field">
<input <input
type="text" type="text"
id="name" id="name"
@ -374,7 +374,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.serverpreset} /> <FormattedMessage {...messages.serverpreset} />
</label> </label>
<div className="form-input"> <div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm input-group"> <div className="form-input-field input-group">
<select <select
id="preset" id="preset"
name="preset" name="preset"
@ -458,7 +458,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.hostname} /> <FormattedMessage {...messages.hostname} />
</label> </label>
<div className="form-input"> <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"> <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://'} {values.useSsl ? 'https://' : 'http://'}
</span> </span>
@ -480,15 +480,13 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<FormattedMessage {...messages.port} /> <FormattedMessage {...messages.port} />
</label> </label>
<div className="form-input"> <div className="form-input">
<div className="max-w-lg rounded-md shadow-sm sm:max-w-xs"> <Field
<Field type="text"
type="text" id="port"
id="port" name="port"
name="port" placeholder="32400"
placeholder="32400" className="short"
className="short" />
/>
</div>
{errors.port && touched.port && ( {errors.port && touched.port && (
<div className="error">{errors.port}</div> <div className="error">{errors.port}</div>
)} )}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16
src/styles/globals.css
Unescape View File

@ -29,6 +29,18 @@ ul.cardList > li {
padding-bottom: 150%; 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 { .hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
@ -78,6 +90,10 @@ img.avatar-sm {
@apply text-white sm:col-span-2; @apply text-white sm:col-span-2;
} }
.form-input-field {
@apply flex max-w-lg rounded-md shadow-sm;
}
.label-required { .label-required {
@apply text-red-500; @apply text-red-500;
} }

1
tailwind.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save