refactor(ui): css refinements for a more unified look (#1816)

src/components/Common/Alert/index.tsx

@@ -13,7 +13,7 @@ interface AlertProps {
 const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
   let design = {
     bgColor: 'bg-yellow-600',
-    titleColor: 'text-yellow-200',
+    titleColor: 'text-yellow-100',
     textColor: 'text-yellow-300',
     svg: <ExclamationIcon className="w-5 h-5" />,
   };
@@ -22,7 +22,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
     case 'info':
       design = {
         bgColor: 'bg-indigo-600',
-        titleColor: 'text-indigo-200',
+        titleColor: 'text-indigo-100',
         textColor: 'text-indigo-300',
         svg: <InformationCircleIcon className="w-5 h-5" />,
       };
@@ -30,7 +30,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
     case 'error':
       design = {
         bgColor: 'bg-red-600',
-        titleColor: 'text-red-200',
+        titleColor: 'text-red-100',
         textColor: 'text-red-300',
         svg: <XCircleIcon className="w-5 h-5" />,
       };

src/components/Common/List/index.tsx

@@ -10,7 +10,7 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
   return (
     <div>
       <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
-        <dt className="block text-sm font-medium text-gray-400">{title}</dt>
+        <dt className="block text-sm font-bold text-gray-400">{title}</dt>
         <dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
           <span className={`flex-grow ${className}`}>{children}</span>
         </dd>

src/components/Common/Modal/index.tsx

@@ -137,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
             >
               {title && (
                 <span
-                  className="text-lg font-medium leading-6 text-white"
+                  className="text-lg font-bold leading-6 text-white"
                   id="modal-headline"
                 >
                   {title}

src/components/Common/SlideOver/index.tsx

@@ -73,7 +73,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
                 <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
                   <header className="px-4 space-y-1 bg-indigo-600 slideover">
                     <div className="flex items-center justify-between space-x-3">
-                      <h2 className="text-lg font-medium leading-7 text-white">
+                      <h2 className="text-lg font-bold leading-7 text-white">
                         {title}
                       </h2>
                       <div className="flex items-center h-7">

src/components/Layout/LanguagePicker/index.tsx

@@ -10,7 +10,7 @@ import useLocale from '../../../hooks/useLocale';
 import Transition from '../../Transition';
 
 const messages = defineMessages({
-  changelanguage: 'Change Language',
+  displaylanguage: 'Display Language',
 });
 
 const LanguagePicker: React.FC = () => {
@@ -50,9 +50,9 @@ const LanguagePicker: React.FC = () => {
             <div>
               <label
                 htmlFor="language"
-                className="block pb-2 text-sm font-medium leading-5 text-gray-300"
+                className="block pb-2 text-sm font-bold leading-5 text-gray-300"
               >
-                {intl.formatMessage(messages.changelanguage)}
+                {intl.formatMessage(messages.displaylanguage)}
               </label>
               <select
                 id="language"

src/components/Layout/UserDropdown/index.tsx

@@ -67,7 +67,7 @@ const UserDropdown: React.FC = () => {
           >
             <Link href={`/profile`}>
               <a
-                className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
+                className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
                 role="menuitem"
                 tabIndex={0}
                 onKeyDown={(e) => {
@@ -83,7 +83,7 @@ const UserDropdown: React.FC = () => {
             </Link>
             <Link href={`/profile/settings`}>
               <a
-                className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
+                className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
                 role="menuitem"
                 tabIndex={0}
                 onKeyDown={(e) => {
@@ -99,7 +99,7 @@ const UserDropdown: React.FC = () => {
             </Link>
             <a
               href="#"
-              className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
+              className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
               role="menuitem"
               onClick={() => logout()}
             >

src/components/Login/index.tsx

@@ -115,7 +115,7 @@ const Login: React.FC = () => {
               {({ openIndexes, handleClick, AccordionContent }) => (
                 <>
                   <button
-                    className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
+                    className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
                       openIndexes.includes(0) && 'text-indigo-500'
                     } ${
                       settings.currentSettings.localLogin &&
@@ -137,7 +137,7 @@ const Login: React.FC = () => {
                   {settings.currentSettings.localLogin && (
                     <div>
                       <button
-                        className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 hover:bg-gray-700 hover:cursor-pointer ${
+                        className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 hover:bg-gray-700 hover:cursor-pointer ${
                           openIndexes.includes(1)
                             ? 'text-indigo-500'
                             : 'sm:rounded-b-lg'

src/components/MovieDetails/index.tsx

@@ -248,7 +248,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
           (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
           <>
-            <h3 className="mb-2 text-xl">
+            <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.downloadstatus)}
             </h3>
             <div className="mb-6 overflow-hidden bg-gray-600 rounded-md shadow">
@@ -309,7 +309,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 )}
             </div>
           )}
-        <h3 className="mb-2 text-xl">
+        <h3 className="mb-2 text-xl font-bold">
           {intl.formatMessage(messages.manageModalRequests)}
         </h3>
         <div className="overflow-hidden bg-gray-600 rounded-md shadow">
@@ -606,7 +606,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   <Link
                     href={`/discover/movies/language/${data.originalLanguage}`}
                   >
-                    <a className="hover:underline">
+                    <a>
                       {intl.formatDisplayName(data.originalLanguage, {
                         type: 'language',
                         fallback: 'none',
@@ -633,7 +633,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                         href={`/discover/movies/studio/${s.id}`}
                         key={`studio-${s.id}`}
                       >
-                        <a className="block hover:underline">{s.name}</a>
+                        <a className="block">{s.name}</a>
                       </Link>
                     );
                   })}

src/components/NotificationTypeSelector/NotificationType/index.tsx

@@ -46,10 +46,12 @@ const NotificationType: React.FC<NotificationTypeProps> = ({
           />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label htmlFor={option.id} className="block font-medium text-white">
+          <label htmlFor={option.id} className="block">
             <div className="flex flex-col">
-              <span>{option.name}</span>
+              <span className="font-medium text-white">{option.name}</span>
-              <span className="text-gray-500">{option.description}</span>
+              <span className="font-normal text-gray-400">
+                {option.description}
+              </span>
             </div>
           </label>
         </div>

src/components/PermissionOption/index.tsx

@@ -128,10 +128,12 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
           />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label htmlFor={option.id} className="block font-medium text-white">
+          <label htmlFor={option.id} className="block">
             <div className="flex flex-col">
-              <span>{option.name}</span>
+              <span className="font-medium text-white">{option.name}</span>
-              <span className="text-gray-500">{option.description}</span>
+              <span className="font-normal text-gray-400">
+                {option.description}
+              </span>
             </div>
           </label>
         </div>

src/components/PersonCard/index.tsx

@@ -61,7 +61,9 @@ const PersonCard: React.FC<PersonCardProps> = ({
                   <UserCircleIcon className="h-full" />
                 )}
               </div>
-              <div className="w-full text-center truncate">{name}</div>
+              <div className="w-full font-bold text-center truncate">
+                {name}
+              </div>
               {subName && (
                 <div
                   className="overflow-hidden text-sm text-center text-gray-300 whitespace-normal"

src/components/RequestCard/index.tsx

@@ -204,7 +204,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           </div>
         )}
         <div className="relative z-10 flex flex-col flex-1 min-w-0 pr-4">
-          <div className="hidden text-xs text-white sm:flex">
+          <div className="hidden text-xs font-medium text-white sm:flex">
             {(isMovie(title) ? title.releaseDate : title.firstAirDate)?.slice(
               0,
               4
@@ -217,7 +217,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                 : `/tv/${requestData.media.tmdbId}`
             }
           >
-            <a className="overflow-hidden text-base text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
+            <a className="overflow-hidden text-base font-bold text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
               {isMovie(title) ? title.title : title.name}
             </a>
           </Link>
@@ -242,7 +242,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
           )}
           {!isMovie(title) && request.seasons.length > 0 && (
             <div className="items-center my-0.5 sm:my-1 text-sm hidden sm:flex">
-              <span className="mr-2 font-medium">
+              <span className="mr-2 font-bold ">
                 {intl.formatMessage(messages.seasons, {
                   seasonCount:
                     title.seasons.filter((season) => season.seasonNumber !== 0)
@@ -268,7 +268,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             </div>
           )}
           <div className="flex items-center mt-2 text-sm sm:mt-1">
-            <span className="hidden mr-2 font-medium sm:block">
+            <span className="hidden mr-2 font-bold sm:block">
               {intl.formatMessage(globalMessages.status)}
             </span>
             {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===

src/components/RequestList/RequestItem/index.tsx

@@ -221,7 +221,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
               </a>
             </Link>
             <div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
-              <div className="pt-0.5 sm:pt-1 text-xs text-white">
+              <div className="font-medium pt-0.5 sm:pt-1 text-xs text-white">
                 {(isMovie(title)
                   ? title.releaseDate
                   : title.firstAirDate
@@ -234,7 +234,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     : `/tv/${requestData.media.tmdbId}`
                 }
               >
-                <a className="min-w-0 mr-2 text-lg text-white truncate xl:text-xl hover:underline">
+                <a className="min-w-0 mr-2 text-lg font-bold text-white truncate xl:text-xl hover:underline">
                   {isMovie(title) ? title.title : title.name}
                 </a>
               </Link>

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -94,7 +94,7 @@ const Release: React.FC<ReleaseProps> = ({
             numeric="auto"
           />
         </span>
-        <span className="text-lg">{release.name}</span>
+        <span className="text-lg font-bold">{release.name}</span>
         {isLatest && (
           <span className="ml-2 -mt-1">
             <Badge badgeType="primary">

src/components/TitleCard/index.tsx

@@ -129,7 +129,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
               }`}
             >
-              <div className="flex items-center h-4 px-2 py-2 text-xs font-normal tracking-wider text-center text-white uppercase sm:h-5">
+              <div className="flex items-center h-4 px-2 py-2 text-xs font-medium tracking-wider text-center text-white uppercase sm:h-5">
                 {mediaType === 'movie'
                   ? intl.formatMessage(globalMessages.movie)
                   : intl.formatMessage(globalMessages.tvshow)}
@@ -199,10 +199,12 @@ const TitleCard: React.FC<TitleCardProps> = ({
                           : 'pb-11'
                       }`}
                     >
-                      {year && <div className="text-sm">{year}</div>}
+                      {year && (
+                        <div className="text-sm font-medium">{year}</div>
+                      )}
 
                       <h1
-                        className="text-xl leading-tight whitespace-normal"
+                        className="text-xl font-bold leading-tight whitespace-normal"
                         style={{
                           WebkitLineClamp: 3,
                           display: '-webkit-box',

src/components/TvDetails/index.tsx

@@ -280,7 +280,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
           (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
           <>
-            <h3 className="mb-2 text-xl">
+            <h3 className="mb-2 text-xl font-bold">
               {intl.formatMessage(messages.downloadstatus)}
             </h3>
             <div className="mb-6 overflow-hidden bg-gray-600 rounded-md shadow">
@@ -344,7 +344,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
               </div>
             </div>
           )}
-        <h3 className="mb-2 text-xl">
+        <h3 className="mb-2 text-xl font-bold">
           {intl.formatMessage(messages.manageModalRequests)}
         </h3>
         <div className="overflow-hidden bg-gray-600 rounded-md shadow">
@@ -625,7 +625,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 <span>{intl.formatMessage(messages.originallanguage)}</span>
                 <span className="media-fact-value">
                   <Link href={`/discover/tv/language/${data.originalLanguage}`}>
-                    <a className="hover:underline">
+                    <a>
                       {intl.formatDisplayName(data.originalLanguage, {
                         type: 'language',
                         fallback: 'none',
@@ -652,7 +652,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                         href={`/discover/tv/network/${n.id}`}
                         key={`network-${n.id}`}
                       >
-                        <a className="hover:underline">{n.name}</a>
+                        <a>{n.name}</a>
                       </Link>
                     ))
                     .reduce((prev, curr) => (

src/components/UserList/index.tsx

@@ -41,11 +41,11 @@ const messages = defineMessages({
     '{userCount, plural, one {# new user} other {# new users}} imported from Plex successfully!',
   nouserstoimport: 'No new users to import from Plex.',
   user: 'User',
-  totalrequests: 'Total Requests',
+  totalrequests: 'Requests',
-  accounttype: 'Account Type',
+  accounttype: 'Type',
   role: 'Role',
   created: 'Created',
-  lastupdated: 'Last Updated',
+  lastupdated: 'Updated',
   bulkedit: 'Bulk Edit',
   owner: 'Owner',
   admin: 'Admin',
@@ -598,7 +598,7 @@ const UserList: React.FC = () => {
                   </Link>
                   <div className="ml-4">
                     <Link href={`/users/${user.id}`}>
-                      <a className="text-sm font-medium leading-5 transition duration-300 hover:underline">
+                      <a className="text-base font-bold leading-5 transition duration-300 hover:underline">
                         {user.displayName}
                       </a>
                     </Link>

src/i18n/locale/en.json

@@ -34,7 +34,7 @@
   "components.DownloadBlock.estimatedtime": "Estimated {time}",
   "components.LanguageSelector.languageServerDefault": "Default ({language})",
   "components.LanguageSelector.originalLanguageDefault": "All Languages",
-  "components.Layout.LanguagePicker.changelanguage": "Change Language",
+  "components.Layout.LanguagePicker.displaylanguage": "Display Language",
   "components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
   "components.Layout.Sidebar.dashboard": "Discover",
   "components.Layout.Sidebar.requests": "Requests",
@@ -700,7 +700,7 @@
   "components.TvDetails.similar": "Similar Series",
   "components.TvDetails.viewfullcrew": "View Full Crew",
   "components.TvDetails.watchtrailer": "Watch Trailer",
-  "components.UserList.accounttype": "Account Type",
+  "components.UserList.accounttype": "Type",
   "components.UserList.admin": "Admin",
   "components.UserList.autogeneratepassword": "Automatically Generate Password",
   "components.UserList.autogeneratepasswordTip": "Email a server-generated password to the user",
@@ -717,7 +717,7 @@
   "components.UserList.importedfromplex": "{userCount, plural, one {# new user} other {# new users}} imported from Plex successfully!",
   "components.UserList.importfromplex": "Import Users from Plex",
   "components.UserList.importfromplexerror": "Something went wrong while importing users from Plex.",
-  "components.UserList.lastupdated": "Last Updated",
+  "components.UserList.lastupdated": "Updated",
   "components.UserList.localLoginDisabled": "The <strong>Enable Local Sign-In</strong> setting is currently disabled.",
   "components.UserList.localuser": "Local User",
   "components.UserList.nouserstoimport": "No new users to import from Plex.",
@@ -730,7 +730,7 @@
   "components.UserList.sortDisplayName": "Display Name",
   "components.UserList.sortRequests": "Request Count",
   "components.UserList.sortUpdated": "Last Updated",
-  "components.UserList.totalrequests": "Total Requests",
+  "components.UserList.totalrequests": "Requests",
   "components.UserList.user": "User",
   "components.UserList.usercreatedfailed": "Something went wrong while creating the user.",
   "components.UserList.usercreatedfailedexisting": "The provided email address is already in use by another user.",

src/styles/globals.css

@@ -67,11 +67,11 @@ ul.cards-horizontal {
 }
 
 .slider-title {
-  @apply inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
+  @apply inline-flex items-center text-xl font-bold leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
 }
 
 a.slider-title {
-  @apply hover:text-white;
+  @apply transition duration-300 hover:text-white;
 }
 
 a.slider-title svg {
@@ -114,7 +114,11 @@ h1 > .media-year {
 }
 
 .media-attributes {
-  @apply mt-1 text-xs sm:text-sm xl:text-base xl:mt-0;
+  @apply mt-1 text-xs text-gray-300 sm:text-sm xl:text-base xl:mt-0;
+}
+
+.media-attributes a {
+  @apply transition duration-300 hover:text-white hover:underline;
 }
 
 .media-actions {
@@ -138,7 +142,7 @@ h1 > .media-year {
 }
 
 .media-overview h2 {
-  @apply text-xl text-gray-300 sm:text-2xl;
+  @apply text-xl font-bold text-gray-300 sm:text-2xl;
 }
 
 .media-overview p {
@@ -150,10 +154,11 @@ ul.media-crew {
 }
 
 ul.media-crew > li {
-  @apply flex flex-col col-span-1 font-bold;
+  @apply flex flex-col col-span-1 font-bold text-gray-300;
 }
 
-a.crew-name {
+a.crew-name,
+.media-fact-value a {
   @apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100;
 }
 
@@ -162,7 +167,7 @@ a.crew-name {
 }
 
 .media-facts {
-  @apply text-sm bg-gray-900 border border-gray-700 rounded-lg shadow;
+  @apply text-sm font-bold text-gray-300 bg-gray-900 border border-gray-700 rounded-lg shadow;
 }
 
 .media-fact {
@@ -170,7 +175,7 @@ a.crew-name {
 }
 
 .media-fact-value {
-  @apply flex-1 text-sm text-right text-gray-400;
+  @apply flex-1 text-sm font-normal text-right text-gray-400;
 }
 
 .media-ratings {
@@ -186,11 +191,11 @@ a.crew-name {
 }
 
 .heading {
-  @apply text-2xl leading-8 text-gray-100;
+  @apply text-2xl font-bold leading-8 text-gray-100;
 }
 
 .description {
-  @apply max-w-4xl mt-1 text-sm leading-5 text-gray-500;
+  @apply max-w-4xl mt-1 text-sm leading-5 text-gray-400;
 }
 
 img.avatar-sm {
@@ -202,7 +207,7 @@ img.avatar-sm {
 }
 
 .card-field-name {
-  @apply mr-2 font-medium;
+  @apply mr-2 font-bold;
 }
 
 .section {
@@ -227,7 +232,7 @@ img.avatar-sm {
 
 label,
 .group-label {
-  @apply block mb-1 text-sm font-medium leading-5 text-gray-400;
+  @apply block mb-1 text-sm font-bold leading-5 text-gray-400;
 }
 
 label.checkbox-label {
@@ -247,7 +252,7 @@ label a {
 }
 
 .label-tip {
-  @apply block text-gray-500;
+  @apply block font-medium text-gray-500;
 }
 
 button,