chore: update navigator style

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>
   );

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 */
+    }
+  }
+}

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">