From 680b8ede6cdd72fa9de60cfb20d66b8282cb76b5 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Sat, 8 Apr 2023 21:50:07 +0800
Subject: [PATCH] chore: adjust header style (#1493)

---
 web/src/components/Header.tsx                 | 36 +++++++++----------
 web/src/components/Memo.tsx                   | 12 +++----
 .../components/Settings/StorageSection.tsx    |  7 ++--
 web/src/pages/DailyReview.tsx                 |  2 +-
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index b3735f80..f4ff0031 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -57,11 +57,11 @@ const Header = () => {
                 className={({ isActive }) =>
                   `${
                     isActive && "bg-white dark:bg-zinc-700 shadow"
-                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
                 }
               >
                 <>
-                  <Icon.Home className="mr-4 w-6 h-auto opacity-80" /> {t("common.home")}
+                  <Icon.Home className="mr-3 w-6 h-auto opacity-70" /> {t("common.home")}
                 </>
               </NavLink>
               <NavLink
@@ -70,11 +70,11 @@ const Header = () => {
                 className={({ isActive }) =>
                   `${
                     isActive && "bg-white dark:bg-zinc-700 shadow"
-                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
                 }
               >
                 <>
-                  <Icon.Calendar className="mr-4 w-6 h-auto opacity-80" /> {t("daily-review.title")}
+                  <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" /> {t("daily-review.title")}
                 </>
               </NavLink>
               <NavLink
@@ -83,11 +83,11 @@ const Header = () => {
                 className={({ isActive }) =>
                   `${
                     isActive && "bg-white dark:bg-zinc-700 shadow"
-                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
                 }
               >
                 <>
-                  <Icon.Paperclip className="mr-4 w-6 h-auto opacity-80" /> {t("common.resources")}
+                  <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" /> {t("common.resources")}
                 </>
               </NavLink>
             </>
@@ -98,35 +98,35 @@ const Header = () => {
             className={({ isActive }) =>
               `${
                 isActive && "bg-white dark:bg-zinc-700 shadow"
-              } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+              } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
             }
           >
             <>
-              <Icon.Hash className="mr-4 w-6 h-auto opacity-80" /> {t("common.explore")}
+              <Icon.Hash className="mr-3 w-6 h-auto opacity-70" /> {t("common.explore")}
             </>
           </NavLink>
           {!isVisitorMode && (
             <>
               <button
                 id="header-ask-ai"
-                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
                 onClick={() => showAskAIDialog()}
               >
-                <Icon.Bot className="mr-4 w-6 h-auto opacity-80" /> {t("ask-ai.title")}
+                <Icon.Bot className="mr-3 w-6 h-auto opacity-70" /> {t("ask-ai.title")}
               </button>
               <button
                 id="header-archived-memo"
-                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
                 onClick={() => showArchivedMemoDialog()}
               >
-                <Icon.Archive className="mr-4 w-6 h-auto opacity-80" /> {t("common.archived")}
+                <Icon.Archive className="mr-3 w-6 h-auto opacity-70" /> {t("common.archived")}
               </button>
               <button
                 id="header-settings"
-                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
                 onClick={() => showSettingDialog()}
               >
-                <Icon.Settings className="mr-4 w-6 h-auto opacity-80" /> {t("common.settings")}
+                <Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
               </button>
             </>
           )}
@@ -138,19 +138,19 @@ const Header = () => {
                 className={({ isActive }) =>
                   `${
                     isActive && "bg-white dark:bg-zinc-700 shadow"
-                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
                 }
               >
                 <>
-                  <Icon.LogIn className="mr-4 w-6 h-auto opacity-80" /> {t("common.sign-in")}
+                  <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" /> {t("common.sign-in")}
                 </>
               </NavLink>
               <button
                 id="header-about"
-                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                className="px-4 pr-5 py-2 rounded-lg flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
                 onClick={() => showAboutSiteDialog()}
               >
-                <Icon.CupSoda className="mr-4 w-6 h-auto opacity-80" /> {t("common.about")}
+                <Icon.CupSoda className="mr-3 w-6 h-auto opacity-70" /> {t("common.about")}
               </button>
             </>
           )}
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 19994c5a..32bd578d 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -201,12 +201,12 @@ const Memo: React.FC<Props> = (props: Props) => {
             </Link>
           )}
           {memo.visibility !== "PRIVATE" && !isVisitorMode && (
-            <span
-              className={`status-text ${memo.visibility.toLocaleLowerCase()}`}
-              onClick={() => handleMemoVisibilityClick(memo.visibility)}
-            >
-              {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
-            </span>
+            <>
+              <span className="text-xs mx-1 font-mono text-gray-200 dark:text-gray-600">/</span>
+              <span className="text-sm text-gray-400 cursor-pointer" onClick={() => handleMemoVisibilityClick(memo.visibility)}>
+                {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
+              </span>
+            </>
           )}
         </div>
         {!isVisitorMode && (
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index 76d31718..1a389f75 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/web/src/components/Settings/StorageSection.tsx
@@ -82,7 +82,7 @@ const StorageSection = () => {
         </button>
       </div>
       <div className="mt-2 w-full flex flex-col">
-        <div className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
+        <div className="py-2 w-full border-t dark:border-zinc-700 flex flex-row items-center justify-between">
           <div className="flex flex-row items-center">
             <p className="ml-2">Local</p>
           </div>
@@ -103,7 +103,10 @@ const StorageSection = () => {
           </div>
         </div>
         {storageList.map((storage) => (
-          <div key={storage.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
+          <div
+            key={storage.id}
+            className="py-2 w-full border-t last:border-b dark:border-zinc-700 flex flex-row items-center justify-between"
+          >
             <div className="flex flex-row items-center">
               <p className="ml-2">{storage.name}</p>
             </div>
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index b5447233..09b42b57 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -109,7 +109,7 @@ const DailyReview = () => {
               className="w-7 h-7 mr-2 flex justify-center items-center rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5 share"
               onClick={handleShareBtnClick}
             >
-              <Icon.Share2 size={16} />
+              <Icon.Share size={20} />
             </button>
           </div>
           <DatePicker