From 73baeaa0adada5f6c169dff6791c71764fe611b3 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 4 Jan 2024 08:32:14 +0800
Subject: [PATCH] chore: tweak dark mode styles

---
 web/src/components/HomeSidebarDrawer.tsx      |  2 +-
 .../components/Inbox/MemoCommentMessage.tsx   |  4 +--
 .../components/Inbox/VersionUpdateMessage.tsx |  4 +--
 web/src/components/MobileHeader.tsx           |  6 ++---
 web/src/components/Navigation.tsx             | 24 ++++++++++-------
 web/src/components/NavigationDrawer.tsx       |  4 +--
 web/src/components/PersonalStatistics.tsx     |  2 +-
 web/src/components/Settings/MemberSection.tsx |  4 +--
 web/src/components/Settings/SSOSection.tsx    | 19 +++++---------
 .../components/Settings/StorageSection.tsx    |  6 ++---
 .../components/Settings/WebhookSection.tsx    |  4 +--
 web/src/components/UserBanner.tsx             | 26 +------------------
 web/src/layouts/Root.tsx                      |  2 +-
 web/src/pages/UserProfile.tsx                 |  7 ++++-
 14 files changed, 47 insertions(+), 67 deletions(-)

diff --git a/web/src/components/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebarDrawer.tsx
index 7a6741257..298bcf58e 100644
--- a/web/src/components/HomeSidebarDrawer.tsx
+++ b/web/src/components/HomeSidebarDrawer.tsx
@@ -23,7 +23,7 @@ const HomeSidebarDrawer = () => {
   return (
     <>
       <IconButton onClick={toggleDrawer(true)}>
-        <Icon.Search className="w-5 h-auto dark:text-gray-200" />
+        <Icon.Search className="w-5 h-auto dark:text-gray-400" />
       </IconButton>
       <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full px-1">
diff --git a/web/src/components/Inbox/MemoCommentMessage.tsx b/web/src/components/Inbox/MemoCommentMessage.tsx
index ce206d9b5..a29c4d6a7 100644
--- a/web/src/components/Inbox/MemoCommentMessage.tsx
+++ b/web/src/components/Inbox/MemoCommentMessage.tsx
@@ -64,7 +64,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
-            : "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
+            : "border-gray-500 text-gray-500 bg-gray-50 dark:bg-zinc-800"
         )}
       >
         <Tooltip title={"Comment"} placement="bottom">
@@ -73,7 +73,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
       </div>
       <div
         className={classNames(
-          "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-800",
+          "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
           inbox.status !== Inbox_Status.UNREAD && "opacity-60"
         )}
       >
diff --git a/web/src/components/Inbox/VersionUpdateMessage.tsx b/web/src/components/Inbox/VersionUpdateMessage.tsx
index a4dae615d..d32ac9e12 100644
--- a/web/src/components/Inbox/VersionUpdateMessage.tsx
+++ b/web/src/components/Inbox/VersionUpdateMessage.tsx
@@ -63,7 +63,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
-            : "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
+            : "border-gray-500 text-gray-500 bg-gray-50 dark:bg-zinc-800"
         )}
       >
         <Tooltip title={"Update"} placement="bottom">
@@ -72,7 +72,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
       </div>
       <div
         className={classNames(
-          "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-800",
+          "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
           inbox.status !== Inbox_Status.UNREAD && "opacity-60"
         )}
       >
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index a4701fa57..754ae8bdd 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -11,7 +11,7 @@ interface Props {
 const MobileHeader = (props: Props) => {
   const { children } = props;
   const { sm } = useResponsiveWidth();
-  const [titleText] = useState("MEMOS");
+  const [titleText] = useState("Memos");
   const { y: offsetTop } = useWindowScroll();
 
   return (
@@ -24,8 +24,8 @@ const MobileHeader = (props: Props) => {
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
         {!sm && <NavigationDrawer />}
         <span
-          className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
-          onClick={() => location.reload()}
+          className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-300"
+          onDoubleClick={() => location.reload()}
         >
           {titleText}
         </span>
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index f330279f7..4cdb83a8e 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -55,6 +55,18 @@ const Navigation = () => {
     title: t("common.resources"),
     icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
   };
+  const exploreNavLink: NavLinkItem = {
+    id: "header-explore",
+    path: "/explore",
+    title: t("common.explore"),
+    icon: <Icon.Globe2 className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const profileNavLink: NavLinkItem = {
+    id: "header-profile",
+    path: user ? `/u/${encodeURIComponent(user.username)}` : "",
+    title: t("common.profile"),
+    icon: <Icon.User2 className="mr-3 w-6 h-auto opacity-70" />,
+  };
   const inboxNavLink: NavLinkItem = {
     id: "header-inbox",
     path: "/inbox",
@@ -68,12 +80,6 @@ const Navigation = () => {
       </>
     ),
   };
-  const exploreNavLink: NavLinkItem = {
-    id: "header-explore",
-    path: "/explore",
-    title: t("common.explore"),
-    icon: <Icon.Globe2 className="mr-3 w-6 h-auto opacity-70" />,
-  };
   const archivedNavLink: NavLinkItem = {
     id: "header-archived",
     path: "/archived",
@@ -94,7 +100,7 @@ const Navigation = () => {
   };
 
   const navLinks: NavLinkItem[] = user
-    ? [homeNavLink, timelineNavLink, resourcesNavLink, exploreNavLink, inboxNavLink, archivedNavLink, settingNavLink]
+    ? [homeNavLink, timelineNavLink, resourcesNavLink, exploreNavLink, profileNavLink, inboxNavLink, archivedNavLink, settingNavLink]
     : [exploreNavLink, signInNavLink];
 
   return (
@@ -105,8 +111,8 @@ const Navigation = () => {
           <NavLink
             className={({ isActive }) =>
               classNames(
-                "w-full px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                isActive ? "bg-white drop-shadow-sm dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
+                "w-full px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
+                isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent"
               )
             }
             key={navLink.id}
diff --git a/web/src/components/NavigationDrawer.tsx b/web/src/components/NavigationDrawer.tsx
index e59cbbadb..d0a11c29b 100644
--- a/web/src/components/NavigationDrawer.tsx
+++ b/web/src/components/NavigationDrawer.tsx
@@ -23,10 +23,10 @@ const NavigationDrawer = () => {
   return (
     <>
       <IconButton onClick={toggleDrawer(true)}>
-        <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
+        <Icon.Menu className="w-5 h-auto dark:text-gray-400" />
       </IconButton>
       <Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
-        <div className="w-full h-full px-4 bg-zinc-100 dark:bg-zinc-800">
+        <div className="w-full h-full px-4">
           <Navigation />
         </div>
       </Drawer>
diff --git a/web/src/components/PersonalStatistics.tsx b/web/src/components/PersonalStatistics.tsx
index 17c2ab553..dbe64c802 100644
--- a/web/src/components/PersonalStatistics.tsx
+++ b/web/src/components/PersonalStatistics.tsx
@@ -46,7 +46,7 @@ const PersonalStatistics = (props: Props) => {
       </div>
       <div className="w-full flex justify-between items-center">
         <div className="w-full flex justify-start items-center">
-          <Icon.PencilLine className="w-4 h-auto mr-1" />
+          <Icon.Library className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Memos</span>
         </div>
         {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 29d29f00a..254da3fe9 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -140,8 +140,8 @@ const MemberSection = () => {
         <div className="title-text">{t("setting.member-list")}</div>
       </div>
       <div className="w-full overflow-x-auto">
-        <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
+        <div className="inline-block min-w-full align-middle border rounded-lg dark:border-gray-500">
+          <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-500">
             <thead>
               <tr className="text-sm font-semibold text-left text-gray-900 dark:text-gray-300">
                 <th scope="col" className="py-2 pl-4 pr-3">
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index d55aa53bb..a42c2e1f0 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -1,4 +1,4 @@
-import { Divider, List, ListItem } from "@mui/joy";
+import { Button, Divider, List, ListItem } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
@@ -58,19 +58,14 @@ const SSOSection = () => {
 
   return (
     <div className="section-container">
-      <div className="mb-2 w-full flex flex-row justify-start items-center gap-1">
-        <span className="font-mono text-sm text-gray-400">{t("setting.sso-section.sso-list")}</span>
-        <LearnMore url="https://usememos.com/docs/advanced-settings/keycloak" />
-        <button
-          className="btn-normal px-2 py-0 ml-1"
-          onClick={() => showCreateIdentityProviderDialog(undefined, fetchIdentityProviderList)}
-        >
-          {t("common.create")}
-        </button>
+      <div className="mb-2 w-full flex flex-row justify-between items-center gap-1">
+        <div className="flex flex-row items-center gap-1">
+          <span className="font-mono text-sm text-gray-400">{t("setting.sso-section.sso-list")}</span>
+          <LearnMore url="https://usememos.com/docs/advanced-settings/keycloak" />
+        </div>
+        <Button onClick={() => showCreateIdentityProviderDialog(undefined, fetchIdentityProviderList)}>{t("common.create")}</Button>
       </div>
-
       <Divider />
-
       {identityProviderList.map((identityProvider) => (
         <div
           key={identityProvider.id}
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index b3f1ed760..363958e78 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/web/src/components/Settings/StorageSection.tsx
@@ -1,4 +1,4 @@
-import { Divider, IconButton, List, ListItem, Radio, RadioGroup } from "@mui/joy";
+import { Button, Divider, IconButton, List, ListItem, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
@@ -88,9 +88,7 @@ const StorageSection = () => {
           <span className="font-mono text-sm text-gray-400">{t("setting.storage-section.storage-services")}</span>
           <LearnMore url="https://usememos.com/docs/advanced-settings/cloudflare-r2" />
         </div>
-        <button className="btn-normal px-2 py-0 ml-1" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
-          {t("common.create")}
-        </button>
+        <Button onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>{t("common.create")}</Button>
       </div>
       <div className="mt-2 w-full flex flex-col">
         {storageList.map((storage) => (
diff --git a/web/src/components/Settings/WebhookSection.tsx b/web/src/components/Settings/WebhookSection.tsx
index e77e1bce1..3e400da5f 100644
--- a/web/src/components/Settings/WebhookSection.tsx
+++ b/web/src/components/Settings/WebhookSection.tsx
@@ -65,8 +65,8 @@ const WebhookSection = () => {
       </div>
       <div className="w-full mt-2 flow-root">
         <div className="overflow-x-auto">
-          <div className="inline-block min-w-full border rounded-lg align-middle">
-            <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
+          <div className="inline-block min-w-full border rounded-lg align-middle dark:border-gray-500">
+            <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-500">
               <thead>
                 <tr>
                   <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index efb06eb6a..066f98e51 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -1,6 +1,5 @@
 import * as api from "@/helpers/api";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import showAboutSiteDialog from "./AboutSiteDialog";
@@ -10,30 +9,24 @@ import Dropdown from "./kit/Dropdown";
 
 const UserBanner = () => {
   const t = useTranslate();
-  const navigateTo = useNavigateTo();
   const globalStore = useGlobalStore();
   const { systemStatus } = globalStore.state;
   const user = useCurrentUser();
   const title = user ? user.nickname || user.username : systemStatus.customizedProfile.name || "memos";
 
-  const handleMyAccountClick = () => {
-    navigateTo(`/u/${encodeURIComponent(user.username)}`);
-  };
-
   const handleAboutBtnClick = () => {
     showAboutSiteDialog();
   };
 
   const handleSignOutBtnClick = async () => {
     await api.signout();
-    localStorage.removeItem("userId");
     window.location.href = "/auth";
   };
 
   return (
     <div className="relative w-full h-auto px-1 shrink-0">
       <Dropdown
-        className="w-auto"
+        className="w-auto inline-flex"
         trigger={
           <div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
             <UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
@@ -44,23 +37,6 @@ const UserBanner = () => {
         positionClassName="top-full mt-2"
         actions={
           <>
-            {user != undefined && (
-              <>
-                <button
-                  className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
-                  onClick={handleMyAccountClick}
-                >
-                  <Icon.User className="w-5 h-auto mr-2 opacity-80" /> {t("common.profile")}
-                </button>
-                <a
-                  className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
-                  href={`/u/${user?.id}/rss.xml`}
-                  target="_blank"
-                >
-                  <Icon.Rss className="w-5 h-auto mr-2 opacity-80" /> RSS
-                </a>
-              </>
-            )}
             <button
               className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
               onClick={handleAboutBtnClick}
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index cebf9fb11..a4fa6079e 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -11,7 +11,7 @@ function Root() {
     <div className="w-full min-h-full">
       <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-60 transition-all hover:shadow-xl z-2">
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
             <Navigation />
           </div>
         )}
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index a40c6c016..d474cdc58 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -93,7 +93,12 @@ const UserProfile = () => {
             <>
               <div className="w-full flex flex-col justify-start items-center py-8">
                 <UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
-                <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
+                <div className="w-full flex flex-row justify-center items-center">
+                  <p className="text-3xl text-black leading-none opacity-80 dark:text-gray-200">{user?.nickname}</p>
+                  <a className="ml-1 cursor-pointer text-gray-500" href={`/u/${user?.id}/rss.xml`} target="_blank">
+                    <Icon.Rss className="w-5 h-auto opacity-60 mt-0.5" />
+                  </a>
+                </div>
               </div>
               {sortedMemos.map((memo) => (
                 <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle showParent />