From 83b9ea45b94d1e133244b23c4bb951f08245e652 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 13 May 2024 08:09:32 +0800
Subject: [PATCH] chore: tweak dark mode styles

---
 web/src/components/CreateMemoRelationDialog.tsx    | 2 +-
 web/src/components/ExploreSidebar/UsersSection.tsx | 4 ++--
 web/src/components/HomeSidebar/TagsSection.tsx     | 5 +++--
 web/src/components/MemoEditor/index.tsx            | 2 +-
 web/src/pages/MemoDetail.tsx                       | 6 +++---
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/src/components/CreateMemoRelationDialog.tsx b/web/src/components/CreateMemoRelationDialog.tsx
index 576cf04c..a5e9e266 100644
--- a/web/src/components/CreateMemoRelationDialog.tsx
+++ b/web/src/components/CreateMemoRelationDialog.tsx
@@ -23,7 +23,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
   const [isFetching, setIsFetching] = useState<boolean>(true);
   const [fetchedMemos, setFetchedMemos] = useState<Memo[]>([]);
   const [selectedMemos, setSelectedMemos] = useState<Memo[]>([]);
-  const [embedded, setEmbedded] = useState<boolean>(false);
+  const [embedded, setEmbedded] = useState<boolean>(true);
   const filteredMemos = fetchedMemos.filter((memo) => !selectedMemos.includes(memo));
 
   useDebounce(
diff --git a/web/src/components/ExploreSidebar/UsersSection.tsx b/web/src/components/ExploreSidebar/UsersSection.tsx
index a305aaa3..81e4b4bb 100644
--- a/web/src/components/ExploreSidebar/UsersSection.tsx
+++ b/web/src/components/ExploreSidebar/UsersSection.tsx
@@ -20,7 +20,7 @@ const UsersSection = () => {
 
   return (
     users.length > 0 && (
-      <div className="w-full mt-2 flex flex-col p-2 bg-gray-50 dark:bg-black rounded-lg">
+      <div className="w-full border mt-2 flex flex-col p-2 bg-gray-50 dark:bg-zinc-900 dark:border-zinc-800 rounded-lg">
         <div className="w-full mb-1 flex flex-row justify-between items-center px-1">
           <span className="text-gray-400 font-medium text-sm select-none">Users</span>
           <Icon.RefreshCcw onClick={fetchRecommendUsers} className="text-gray-400 w-4 h-auto cursor-pointer hover:opacity-80" />
@@ -28,7 +28,7 @@ const UsersSection = () => {
         {users.map((user) => (
           <div
             key={user.name}
-            className="w-full flex flex-row justify-start items-center px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-zinc-900 rounded-lg"
+            className="w-full flex flex-row justify-start items-center px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg"
           >
             <Link className="w-full flex flex-row items-center" to={`/u/${encodeURIComponent(user.username)}`} unstable_viewTransition>
               <UserAvatar className="!w-6 !h-6 !rounded-lg mr-2 shrink-0" avatarUrl={user.avatarUrl} />
diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
index 496d3567..67c6d38d 100644
--- a/web/src/components/HomeSidebar/TagsSection.tsx
+++ b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -1,4 +1,5 @@
 import { Dropdown, Menu, MenuButton, MenuItem, Tooltip } from "@mui/joy";
+import clsx from "clsx";
 import toast from "react-hot-toast";
 import useDebounce from "react-use/lib/useDebounce";
 import { memoServiceClient } from "@/grpcweb";
@@ -46,7 +47,7 @@ const TagsSection = () => {
     <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
       <div className="group flex flex-row justify-start items-center w-full gap-1 mb-1">
         <span className="text-sm leading-6 font-mono text-gray-400 select-none">{t("common.tags")}</span>
-        <div className="hidden group-hover:block">
+        <div className={clsx("group-hover:block", tagAmounts.length > 0 ? "hidden" : "")}>
           <Tooltip title={"Rebuild"} placement="top">
             <Icon.RefreshCcw
               className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
@@ -62,7 +63,7 @@ const TagsSection = () => {
           ))}
         </div>
       ) : (
-        <div className="p-2 border border-dashed rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
+        <div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
           <Icon.Tags />
           <p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
         </div>
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 68b4e676..4176399d 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -412,7 +412,7 @@ const MemoEditor = (props: Props) => {
         <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
         <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
         <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
-          <div className="flex flex-row justify-start items-center opacity-80">
+          <div className="flex flex-row justify-start items-center opacity-80 dark:opacity-60">
             <TagSelector editorRef={editorRef} />
             <MarkdownMenu editorRef={editorRef} />
             <UploadResourceButton />
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 7619b5b6..074efb16 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -110,10 +110,10 @@ const MemoDetail = () => {
                   <Button
                     variant="plain"
                     color="neutral"
-                    endDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-400" />}
+                    endDecorator={<Icon.MessageCircle className="w-5 h-auto text-gray-500" />}
                     onClick={handleShowCommentEditor}
                   >
-                    <span className="font-normal">{t("memo.comment.write-a-comment")}</span>
+                    <span className="font-normal text-gray-500">{t("memo.comment.write-a-comment")}</span>
                   </Button>
                 </div>
               )
@@ -126,7 +126,7 @@ const MemoDetail = () => {
                     <span className="text-gray-400 text-sm ml-1">({comments.length})</span>
                   </div>
                   <Button variant="plain" color="neutral" onClick={handleShowCommentEditor}>
-                    <span className="font-normal">{t("memo.comment.write-a-comment")}</span>
+                    <span className="font-normal text-gray-500">{t("memo.comment.write-a-comment")}</span>
                   </Button>
                 </div>
                 {comments.map((comment) => (