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

src/components/CompanyCard/index.tsx

@@ -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);
         }}

src/components/Discover/NetworkSlider/index.tsx

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

src/components/Discover/StudioSlider/index.tsx

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

src/components/Discover/index.tsx

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

src/components/Layout/SearchInput/index.tsx

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

src/components/Layout/UserDropdown/index.tsx

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

src/components/Login/LocalLogin.tsx

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

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -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%' }}>

src/components/MediaSlider/index.tsx

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

src/components/PersonCard/index.tsx

@@ -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%' }}>

src/components/ResetPassword/RequestResetLink.tsx

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

src/components/ResetPassword/index.tsx

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

src/components/Settings/Notifications/NotificationsDiscord.tsx

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

src/components/Settings/Notifications/NotificationsEmail.tsx

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

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

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

src/components/Settings/Notifications/NotificationsPushover/index.tsx

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

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -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 && (

src/components/Settings/Notifications/NotificationsTelegram.tsx

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

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -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)}

src/components/Settings/RadarrModal/index.tsx

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

src/components/Settings/SettingsMain.tsx

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

src/components/Settings/SettingsPlex.tsx

@@ -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>
                   )}

src/components/Settings/SonarrModal/index.tsx

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

src/components/Slider/index.tsx

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

src/components/TitleCard/index.tsx

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

src/components/UserList/index.tsx

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

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

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

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

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

src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx

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

src/styles/globals.css

@@ -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;
 }

tailwind.config.js

@@ -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'],
   },