From de51e1a8d347edaeaa8121da3cdd45b152c23257 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 27 Jul 2023 23:42:12 +0800
Subject: [PATCH] chore: update navigator style

---
 web/src/components/Navigator.tsx | 37 +++++++++++++++++---------------
 web/src/css/index.css            | 15 +++++++++++++
 web/src/pages/Home.tsx           |  2 +-
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/web/src/components/Navigator.tsx b/web/src/components/Navigator.tsx
index eb2a54c..c22b100 100644
--- a/web/src/components/Navigator.tsx
+++ b/web/src/components/Navigator.tsx
@@ -1,5 +1,5 @@
+import classNames from "classnames";
 import { uniq } from "lodash-es";
-import { Button } from "@mui/joy";
 import { useAppSelector } from "../stores";
 import useViewStore from "../stores/v1/view";
 import Icon from "./Icon";
@@ -12,36 +12,39 @@ const Navigator = () => {
   const sortedTagMap = sortTags(tags);
 
   return (
-    <div className="w-full flex flex-row justify-start items-center gap-1 flex-wrap mb-4">
-      <Button
-        variant={currentTab === "tab:all" ? "solid" : "plain"}
-        color="neutral"
-        size="sm"
+    <div className="w-full flex flex-row justify-start items-center mb-4 gap-1 sm:flex-wrap overflow-x-auto no-scrollbar">
+      <button
+        className={classNames(
+          "flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
+          currentTab === "tab:all" ? "!bg-gray-600 text-white shadow" : ""
+        )}
         onClick={() => viewStore.setFilter({ tab: "tab:all" })}
       >
         <Icon.CircleSlash className="w-4 h-auto mr-1" />
         <span className="font-normal">All</span>
-      </Button>
-      <Button
-        variant={currentTab === "tab:mine" ? "solid" : "plain"}
-        color="neutral"
-        size="sm"
+      </button>
+      <button
+        className={classNames(
+          "flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
+          currentTab === "tab:mine" ? "!bg-gray-600 text-white shadow" : ""
+        )}
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
       >
         <Icon.User className="w-4 h-auto mr-1" />
         <span className="font-normal">Mine</span>
-      </Button>
+      </button>
       {Array.from(sortedTagMap.keys()).map((tag) => (
-        <Button
+        <button
           key={tag}
-          variant={currentTab === `tag:${tag}` ? "solid" : "plain"}
-          color="neutral"
-          size="sm"
+          className={classNames(
+            "flex flex-row justify-center items-center px-2 leading-7 text-sm rounded-md hover:bg-gray-200",
+            currentTab === `tag:${tag}` ? "!bg-gray-600 text-white shadow" : ""
+          )}
           onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
         >
           <Icon.Hash className="w-4 h-auto mr-1" />
           <span className="max-w-[8rem] truncate font-normal">{tag}</span>
-        </Button>
+        </button>
       ))}
     </div>
   );
diff --git a/web/src/css/index.css b/web/src/css/index.css
index 36f860c..9052e13 100644
--- a/web/src/css/index.css
+++ b/web/src/css/index.css
@@ -10,3 +10,18 @@ html,
     "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
 }
+
+@layer utilities {
+  @variants responsive {
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+    }
+  }
+}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 418e210..5659981 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -43,7 +43,7 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-4xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">