From 1be97fe7fb4ef6bf86c9874cb90c5deb94b2509a Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 11 Mar 2021 21:25:46 -0500
Subject: [PATCH] refactor(css): add new global classes & card border hover
 styling (#1156)

---
 src/components/CompanyCard/index.tsx          |  8 +--
 .../Discover/NetworkSlider/index.tsx          |  8 ++-
 .../Discover/StudioSlider/index.tsx           |  8 ++-
 src/components/Discover/index.tsx             | 50 ++++++++----------
 src/components/Layout/SearchInput/index.tsx   |  2 +-
 src/components/Layout/UserDropdown/index.tsx  |  2 +-
 src/components/Login/LocalLogin.tsx           |  4 +-
 .../MediaSlider/ShowMoreCard/index.tsx        |  2 +-
 src/components/MediaSlider/index.tsx          | 52 +++++++++----------
 src/components/PersonCard/index.tsx           |  6 ++-
 .../ResetPassword/RequestResetLink.tsx        |  2 +-
 src/components/ResetPassword/index.tsx        |  4 +-
 .../Notifications/NotificationsDiscord.tsx    |  6 +--
 .../Notifications/NotificationsEmail.tsx      | 26 +++++-----
 .../NotificationsPushbullet/index.tsx         |  2 +-
 .../NotificationsPushover/index.tsx           |  4 +-
 .../NotificationsSlack/index.tsx              |  2 +-
 .../Notifications/NotificationsTelegram.tsx   |  6 +--
 .../NotificationsWebhook/index.tsx            |  6 +--
 src/components/Settings/RadarrModal/index.tsx | 16 +++---
 src/components/Settings/SettingsMain.tsx      |  8 +--
 src/components/Settings/SettingsPlex.tsx      | 22 ++++----
 src/components/Settings/SonarrModal/index.tsx | 22 ++++----
 src/components/Slider/index.tsx               |  8 ++-
 src/components/TitleCard/index.tsx            |  6 ++-
 src/components/UserList/index.tsx             |  4 +-
 .../UserGeneralSettings/index.tsx             |  4 +-
 .../UserNotificationSettings/index.tsx        |  4 +-
 .../UserSettings/UserPasswordChange/index.tsx |  6 +--
 src/styles/globals.css                        | 16 ++++++
 tailwind.config.js                            |  1 +
 31 files changed, 165 insertions(+), 152 deletions(-)

diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx
index dd6af067a..3e4c59387 100644
--- a/src/components/CompanyCard/index.tsx
+++ b/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);
         }}
diff --git a/src/components/Discover/NetworkSlider/index.tsx b/src/components/Discover/NetworkSlider/index.tsx
index 69b2b2bb7..983d0ec07 100644
--- a/src/components/Discover/NetworkSlider/index.tsx
+++ b/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
diff --git a/src/components/Discover/StudioSlider/index.tsx b/src/components/Discover/StudioSlider/index.tsx
index b3ec8fef6..69f7b5d79 100644
--- a/src/components/Discover/StudioSlider/index.tsx
+++ b/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
diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index bea1b414b..f522a2a70 100644
--- a/src/components/Discover/index.tsx
+++ b/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"
diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index 0dc110fa8..9d0aa6348 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/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}
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index 89d0db61a..f1fe07fe1 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/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"
diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx
index c870acbff..365cb334d 100644
--- a/src/components/Login/LocalLogin.tsx
+++ b/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"
diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx
index d61f262ec..9a188fe7f 100644
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/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%' }}>
diff --git a/src/components/MediaSlider/index.tsx b/src/components/MediaSlider/index.tsx
index 14d832ee2..c46e16bcf 100644
--- a/src/components/MediaSlider/index.tsx
+++ b/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}
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index 5e5416f41..c63174f3e 100644
--- a/src/components/PersonCard/index.tsx
+++ b/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%' }}>
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index ecbf10cbd..0b68acc75 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/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"
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 6eaeef43c..8f903d92a 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx
index da80f1c5d..65511896f 100644
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx
index ad9313f17..c01545c9a 100644
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
index 5fbc053e5..329d43615 100644
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
index d264023a5..23c0e8376 100644
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
index 98b66adb5..a5bb0e06d 100644
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/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 && (
diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx
index b5382a5b2..870a36600 100644
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/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"
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
index e1a63fca4..133a10df8 100644
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/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)}
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index 7932447af..ef27a6573 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/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"
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 3143226e4..765877a8f 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/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"
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index fb95aae84..7da8fecac 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/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>
                   )}
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index a41fead9d..6d04b453a 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/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"
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 442ff0952..411cc11f3 100644
--- a/src/components/Slider/index.tsx
+++ b/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}
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 250debdfe..630ac5965 100644
--- a/src/components/TitleCard/index.tsx
+++ b/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
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index e9be2cdf9..a57a90562 100644
--- a/src/components/UserList/index.tsx
+++ b/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"
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 3551aff36..5e0d90475 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/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"
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
index 372130163..e1d4784d0 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/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"
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index 02e40ee3e..860d1ca13 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/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"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 007ab3e29..a5a88dcb6 100644
--- a/src/styles/globals.css
+++ b/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;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 39c11938b..66bad173f 100644
--- a/tailwind.config.js
+++ b/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'],
   },