From a4235bb4bfb67bcb03ef6bb71fd09656e270d2c0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 8 May 2024 22:31:22 +0800
Subject: [PATCH] chore: tweak tags style

---
 .../components/HomeSidebar/TagsSection.tsx    | 26 +++++++------------
 web/src/components/UserStatisticsView.tsx     |  2 +-
 web/src/less/base-dialog.less                 |  2 +-
 web/tailwind.config.js                        |  1 +
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
index a06c9334..28dc4cf9 100644
--- a/web/src/components/HomeSidebar/TagsSection.tsx
+++ b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -11,10 +11,8 @@ import showRenameTagDialog from "../RenameTagDialog";
 
 const TagsSection = () => {
   const t = useTranslate();
-  const filterStore = useFilterStore();
   const tagStore = useTagStore();
   const memoList = useMemoList();
-  const filter = filterStore.state;
   const tagAmounts = Object.entries(tagStore.getState().tagAmounts)
     .sort((a, b) => a[0].localeCompare(b[0]))
     .sort((a, b) => b[1] - a[1]);
@@ -55,9 +53,9 @@ const TagsSection = () => {
         </div>
       </div>
       {tagAmounts.length > 0 ? (
-        <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-1">
+        <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
           {tagAmounts.map(([tag, amount]) => (
-            <TagContainer key={tag} tag={tag} amount={amount} tagQuery={filter.tag} />
+            <TagContainer key={tag} tag={tag} amount={amount} />
           ))}
         </div>
       ) : (
@@ -73,18 +71,16 @@ const TagsSection = () => {
 interface TagContainerProps {
   tag: string;
   amount: number;
-  tagQuery?: string;
 }
 
 const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) => {
   const t = useTranslate();
   const filterStore = useFilterStore();
   const tagStore = useTagStore();
-  const { tag, amount, tagQuery } = props;
-  const isActive = tagQuery === tag;
+  const { tag, amount } = props;
 
   const handleTagClick = () => {
-    if (isActive) {
+    if (filterStore.getState().tag === tag) {
       filterStore.setTagFilter(undefined);
     } else {
       filterStore.setTagFilter(tag);
@@ -106,14 +102,12 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
 
   return (
     <div
-      className={`shrink-0 w-auto max-w-full border text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:shadow-sm dark:hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800 ${
-        isActive && "bg-blue-50 dark:bg-zinc-800"
-      }`}
+      className={`shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800`}
     >
       <Dropdown>
         <MenuButton slots={{ root: "div" }}>
-          <div className="shrink-0 group ml-1">
-            <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-60" />
+          <div className="shrink-0 group">
+            <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
             <Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60" />
           </div>
         </MenuButton>
@@ -128,9 +122,9 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
           </MenuItem>
         </Menu>
       </Dropdown>
-      <div className="inline-flex flex-nowrap pl-0.5 pr-1 gap-1 cursor-pointer max-w-[calc(100%-20px)]" onClick={handleTagClick}>
-        <span className="truncate">{tag}</span>
-        <span className="opacity-60 shrink-0">({amount})</span>
+      <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]" onClick={handleTagClick}>
+        <span className="truncate dark:opacity-80">{tag}</span>
+        {amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
       </div>
     </div>
   );
diff --git a/web/src/components/UserStatisticsView.tsx b/web/src/components/UserStatisticsView.tsx
index 0359e495..3253e978 100644
--- a/web/src/components/UserStatisticsView.tsx
+++ b/web/src/components/UserStatisticsView.tsx
@@ -57,7 +57,7 @@ const UserStatisticsView = (props: Props) => {
       </div>
       <div className="w-full flex justify-between items-center">
         <div className="w-full flex justify-start items-center">
-          <Icon.Hash className="w-4 h-auto mr-1" />
+          <Icon.Tags className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">{t("common.tags")}</span>
         </div>
         <span className="font-mono">{tags}</span>
diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less
index e40e2080..b6777709 100644
--- a/web/src/less/base-dialog.less
+++ b/web/src/less/base-dialog.less
@@ -1,5 +1,5 @@
 .dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60;
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-2000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60;
 
   > .dialog-container {
     @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 4da96a00..7b900481 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
         20: "20",
         100: "100",
         1000: "1000",
+        2000: "2000",
       },
       gridTemplateRows: {
         7: "repeat(7, minmax(0, 1fr))",