From b71c07391a5caee84fe0211cc79f940eea62ebc2 Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Mon, 21 Jun 2021 01:25:05 +0900
Subject: [PATCH] refactor(ui): new menu design

---
 package.json                                  |  2 +-
 src/components/Layout/SearchInput/index.tsx   |  2 +-
 src/components/Layout/Sidebar/index.tsx       | 54 +++++++++----------
 src/components/Layout/VersionStatus/index.tsx |  2 +-
 src/styles/globals.css                        |  2 +
 yarn.lock                                     |  8 +--
 6 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 01a723ece..933c663ad 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "sqlite3": "^5.0.2",
     "swagger-ui-express": "^4.1.6",
     "swr": "^0.5.6",
-    "typeorm": "0.2.34",
+    "typeorm": "0.2.32",
     "web-push": "^3.4.4",
     "winston": "^3.3.3",
     "winston-daily-rotate-file": "^4.5.5",
diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index 1b0aca2aa..d8857dac8 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -24,7 +24,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 hover: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 bg-opacity-80 focus:bg-opacity-100 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"
             inputMode="search"
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 50e48f539..bc6da8722 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -2,9 +2,9 @@ import {
   ClockIcon,
   CogIcon,
   SparklesIcon,
+  UsersIcon,
   XIcon,
 } from '@heroicons/react/outline';
-import { UsersIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { ReactNode, useRef } from 'react';
@@ -39,34 +39,26 @@ const SidebarLinks: SidebarLinkProps[] = [
   {
     href: '/',
     messagesKey: 'dashboard',
-    svgIcon: (
-      <SparklesIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
-    ),
+    svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
     activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
   },
   {
     href: '/requests',
     messagesKey: 'requests',
-    svgIcon: (
-      <ClockIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
-    ),
+    svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
     activeRegExp: /^\/requests/,
   },
   {
     href: '/users',
     messagesKey: 'users',
-    svgIcon: (
-      <UsersIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
-    ),
+    svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
     activeRegExp: /^\/users/,
     requiredPermission: Permission.MANAGE_USERS,
   },
   {
     href: '/settings',
     messagesKey: 'settings',
-    svgIcon: (
-      <CogIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
-    ),
+    svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
     activeRegExp: /^\/settings/,
     requiredPermission: Permission.MANAGE_SETTINGS,
   },
@@ -93,7 +85,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
               leaveTo="opacity-0"
             >
               <div className="fixed inset-0">
-                <div className="absolute inset-0 bg-gray-600 opacity-75"></div>
+                <div className="absolute inset-0 bg-gray-900 opacity-90"></div>
               </div>
             </Transition>
             <Transition
@@ -117,16 +109,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-col flex-1 h-0 pt-5 pb-8 overflow-y-auto sm:pb-4"
+                    className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
                   >
-                    <div className="flex items-center flex-shrink-0 px-4">
-                      <span className="text-xl text-gray-50">
+                    <div className="flex items-center flex-shrink-0 px-2">
+                      <span className="px-4 text-xl text-gray-50">
                         <a href="/">
                           <img src="/logo_full.svg" alt="Logo" />
                         </a>
                       </span>
                     </div>
-                    <nav className="flex-1 px-2 mt-5 space-y-1">
+                    <nav className="flex-1 px-4 mt-16 space-y-4">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission)
@@ -152,7 +144,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
                                   )
-                                    ? 'bg-gray-900'
+                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
                                     : ''
                                 }
                               `}
@@ -167,7 +159,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       })}
                     </nav>
                     {hasPermission(Permission.ADMIN) && (
-                      <VersionStatus onClick={() => setClosed()} />
+                      <div className="px-2">
+                        <VersionStatus onClick={() => setClosed()} />
+                      </div>
                     )}
                   </div>
                 </div>
@@ -182,16 +176,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
 
       <div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0">
         <div className="flex flex-col w-64 sidebar">
-          <div className="flex flex-col flex-1 h-0 bg-gray-800">
-            <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
-              <div className="flex items-center flex-shrink-0 px-4">
-                <span className="text-2xl text-gray-50">
+          <div className="flex flex-col flex-1 h-0">
+            <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
+              <div className="flex items-center flex-shrink-0">
+                <span className="px-4 text-2xl text-gray-50">
                   <a href="/">
                     <img src="/logo_full.svg" alt="Logo" />
                   </a>
                 </span>
               </div>
-              <nav className="flex-1 px-2 mt-5 space-y-1 bg-gray-800">
+              <nav className="flex-1 px-4 mt-16 space-y-4">
                 {SidebarLinks.filter((link) =>
                   link.requiredPermission
                     ? hasPermission(link.requiredPermission)
@@ -204,12 +198,12 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       as={sidebarLink.as}
                     >
                       <a
-                        className={`flex group items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150
+                        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
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
                                   )
-                                    ? 'bg-gray-900'
+                                    ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
                                     : ''
                                 }
                               `}
@@ -221,7 +215,11 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   );
                 })}
               </nav>
-              {hasPermission(Permission.ADMIN) && <VersionStatus />}
+              {hasPermission(Permission.ADMIN) && (
+                <div className="px-2">
+                  <VersionStatus />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/Layout/VersionStatus/index.tsx b/src/components/Layout/VersionStatus/index.tsx
index 0a2ac43c8..39ca6807f 100644
--- a/src/components/Layout/VersionStatus/index.tsx
+++ b/src/components/Layout/VersionStatus/index.tsx
@@ -53,7 +53,7 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
         className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
           data.updateAvailable
             ? 'bg-yellow-500 text-white hover:bg-yellow-400'
-            : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
         }`}
       >
         {data.commitTag === 'local' ? (
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ceca131d5..0671d385a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -19,8 +19,10 @@ body {
 }
 
 .sidebar {
+  @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%);
 }
 
 .slideover {
diff --git a/yarn.lock b/yarn.lock
index ade5d1f92..6a714b93a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13792,10 +13792,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typeorm@0.2.34:
-  version "0.2.34"
-  resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.34.tgz#637b3cec2de54ee7f423012b813a2022c0aacc8b"
-  integrity sha512-FZAeEGGdSGq7uTH3FWRQq67JjKu0mgANsSZ04j3kvDYNgy9KwBl/6RFgMVgiSgjf7Rqd7NrhC2KxVT7I80qf7w==
+typeorm@0.2.32:
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.32.tgz#544dbfdfe0cd0887548d9bcbd28527ea4f4b3c9b"
+  integrity sha512-LOBZKZ9As3f8KRMPCUT2H0JZbZfWfkcUnO3w/1BFAbL/X9+cADTF6bczDGGaKVENJ3P8SaKheKmBgpt5h1x+EQ==
   dependencies:
     "@sqltools/formatter" "^1.2.2"
     app-root-path "^3.0.0"