From 1792ca1272fd2641e56b2e7f0e7ef4a1d2ffc74b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 29 Jun 2023 21:16:12 +0800
Subject: [PATCH] chore: update shortcut header style

---
 web/src/components/ShortcutView.tsx |  4 +---
 web/src/pages/Home.tsx              | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index b8aa4d7..25a2ad1 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -61,9 +61,7 @@ const ShortcutView = (props: Props) => {
             )}
           </div>
           <button className="items-center cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
-            <span className="text-gray-400">
-              s<span className="font-mono">/</span>
-            </span>
+            <span className="text-gray-400">s/</span>
             {shortcut.name}
           </button>
           <a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index fbe4004..533451c 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { Button, Option, Select } from "@mui/joy";
+import { Button, Tab, TabList, Tabs } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -37,19 +37,23 @@ 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="w-full flex flex-row justify-start items-center mb-4">
+          <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
+        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
-            <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
+            <Tabs defaultValue={"ALL"} size="sm" onChange={(_, value) => setSelectFilter(value as any)}>
+              <TabList>
+                <Tab value={"ALL"}>All</Tab>
+                <Tab value={"PRIVATE"}>Mine</Tab>
+              </TabList>
+            </Tabs>
+          </div>
+          <div>
             <Button variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
               <Icon.Plus className="w-5 h-auto" /> New
             </Button>
           </div>
-          <div>
-            <Select defaultValue={"ALL"} onChange={(_, value) => setSelectFilter(value as any)}>
-              <Option value={"ALL"}>All</Option>
-              <Option value={"PRIVATE"}>Mine</Option>
-            </Select>
-          </div>
         </div>
         {loadingState.isLoading ? (
           <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">