refactor(ui): tweak styling of sidebar & user profile quota display (#1823)

* refactor(ui): tweak styling of sidebar & user profile quota display

* refactor(ui): adjust sidebar gradient to match theme color

Co-authored-by: sct <ryan@sct.dev>

src/components/Layout/Sidebar/index.tsx

@@ -139,13 +139,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                               }}
                               role="button"
                               tabIndex={0}
-                              className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150
+                              className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
                                   )
-                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
-                                    : ''
+                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
+                                    : 'hover:bg-gray-700 focus:bg-gray-700'
                                 }
                               `}
                             >
@@ -174,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
         </Transition>
       </div>
 
-      <div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0">
+      <div className="fixed top-0 bottom-0 left-0 z-30 hidden md:flex md:flex-shrink-0">
         <div className="flex flex-col w-64 sidebar">
           <div className="flex flex-col flex-1 h-0">
             <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
@@ -198,13 +198,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       as={sidebarLink.as}
                     >
                       <a
-                        className={`flex group items-center px-2 py-2 text-lg leading-6 rounded-md text-white hover:text-white focus:outline-none transition ease-in-out duration-150
+                        className={`flex group items-center px-2 py-2 text-lg leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
                                   )
-                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
-                                    : ''
+                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
+                                    : 'hover:bg-gray-700 focus:bg-gray-700'
                                 }
                               `}
                       >

src/components/Layout/index.tsx

@@ -46,6 +46,7 @@ const Layout: React.FC = ({ children }) => {
 
   return (
     <div className="flex h-full min-w-0 min-h-full bg-gray-900">
+      <div className="fixed inset-0 z-20 w-full h-1 border-t border-gray-700 pwa-only" />
       <div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
         <div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
       </div>

src/components/UserProfile/index.tsx

@@ -99,7 +99,7 @@ const UserProfile: React.FC = () => {
           <div className="relative z-40">
             <dl className="grid grid-cols-1 gap-5 mt-5 lg:grid-cols-3">
               <div className="px-4 py-5 overflow-hidden bg-gray-800 bg-opacity-50 rounded-lg shadow ring-1 ring-gray-700 sm:p-6">
-                <dt className="text-sm font-medium text-gray-300 truncate">
+                <dt className="text-sm font-bold text-gray-300 truncate">
                   {intl.formatMessage(messages.totalrequests)}
                 </dt>
                 <dd className="mt-1 text-3xl font-semibold text-white">
@@ -115,11 +115,11 @@ const UserProfile: React.FC = () => {
                 } sm:p-6`}
               >
                 <dt
-                  className={`text-sm font-medium truncate ${
+                  className={`text-sm font-bold truncate ${
                     quota.movie.restricted ? 'text-red-500' : 'text-gray-300'
                   }`}
                 >
-                  {quota.tv.limit
+                  {quota.movie.limit
                     ? intl.formatMessage(messages.pastdays, {
                         type: intl.formatMessage(messages.movierequests),
                         days: quota?.movie.days,
@@ -159,7 +159,7 @@ const UserProfile: React.FC = () => {
                       </div>
                     </>
                   ) : (
-                    <span className="text-3xl">
+                    <span className="text-3xl font-semibold">
                       {intl.formatMessage(messages.unlimited)}
                     </span>
                   )}
@@ -174,7 +174,7 @@ const UserProfile: React.FC = () => {
                 } sm:p-6`}
               >
                 <dt
-                  className={`text-sm font-medium truncate ${
+                  className={`text-sm font-bold truncate ${
                     quota.tv.restricted ? 'text-red-500' : 'text-gray-300'
                   }`}
                 >
@@ -218,7 +218,7 @@ const UserProfile: React.FC = () => {
                       </div>
                     </>
                   ) : (
-                    <span className="text-3xl">
+                    <span className="text-3xl font-semibold">
                       {intl.formatMessage(messages.unlimited)}
                     </span>
                   )}

src/styles/globals.css

@@ -22,7 +22,7 @@ body {
   @apply border-r border-gray-700;
   padding-top: env(safe-area-inset-top);
   padding-left: env(safe-area-inset-left);
-  background: linear-gradient(180deg, #232a36 0%, #131928 100%);
+  background: linear-gradient(180deg, rgba(31, 41, 55, 1) 0%, #131928 100%);
 }
 
 .slideover {