chore: tweak detail style

web/src/components/Header.tsx

@@ -40,18 +40,18 @@ const Header: React.FC = () => {
                 <>
                   <Link
                     to="/setting"
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                   >
                     <Icon.Settings className="w-4 h-auto mr-2" /> Setting
                   </Link>
                   <button
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => setShowAboutDialog(true)}
                   >
                     <Icon.Info className="w-4 h-auto mr-2" /> About
                   </button>
                   <button
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     onClick={() => handleSignOutButtonClick()}
                   >
                     <Icon.LogOut className="w-4 h-auto mr-2" /> Sign out

web/src/components/ShortcutView.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@mui/joy";
+import { Divider, Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -115,6 +115,7 @@ const ShortcutView = (props: Props) => {
                     >
                       <Icon.BarChart2 className="w-4 h-auto mr-2" /> Analytics
                     </button>
+                    <Divider className="!my-1" />
                     <button
                       className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       onClick={() => {

web/src/components/ShortcutsContainer.tsx

@@ -27,8 +27,6 @@ const ShortcutsContainer: React.FC<Props> = (props: Props) => {
         })}
       </div>
 
-      <p className="w-full text-center text-gray-400 text-sm mt-2 mb-4 italic">Total {shortcutList.length} data</p>
-
       {editingShortcutId && (
         <CreateShortcutDialog
           shortcutId={editingShortcutId}

web/src/components/ViewSetting.tsx

@@ -18,11 +18,11 @@ const ViewSetting = () => {
   return (
     <Dropdown
       trigger={
-        <button className="p-1">
-          <Icon.ListFilter className="w-5 h-auto text-gray-500" />
+        <button>
+          <Icon.Settings2 className="w-4 h-auto text-gray-500" />
         </button>
       }
-      actionsClassName="right-10 translate-x-full"
+      actionsClassName="top-7 !-right-2"
       actions={
         <div className="w-52 p-2 pt-0 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
           <div className="w-full flex flex-row justify-between items-center mt-1">

web/src/layouts/Root.tsx

@@ -18,7 +18,7 @@ const Root: React.FC = () => {
   return (
     <>
       {currentUser && (
-        <div className="w-full h-full flex flex-col justify-start items-start">
+        <div className="w-full h-auto flex flex-col justify-start items-start">
           <Header />
           <Outlet />
         </div>

web/src/pages/Home.tsx

@@ -47,26 +47,23 @@ const Home: React.FC = () => {
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
-            <Input
-              className="w-32 mr-2"
-              type="text"
-              size="sm"
-              placeholder="Search"
-              startDecorator={<Icon.Search className="w-4 h-auto" />}
-              endDecorator={
-                filter.search && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
-              }
-              value={filter.search}
-              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
-            />
-            <ViewSetting />
-          </div>
-          <div className="flex flex-row justify-end items-center">
             <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
               <Icon.Plus className="w-5 h-auto" />
               <span className="hidden sm:block ml-0.5">Create</span>
             </Button>
           </div>
+          <div className="flex flex-row justify-end items-center">
+            <Input
+              className="w-32 ml-2"
+              type="text"
+              size="sm"
+              placeholder="Search"
+              startDecorator={<Icon.Search className="w-4 h-auto" />}
+              endDecorator={<ViewSetting />}
+              value={filter.search}
+              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
+            />
+          </div>
         </div>
         <FilterView />
         {loadingState.isLoading ? (

web/src/pages/SignIn.tsx

@@ -69,14 +69,14 @@ const SignIn: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
+    <div className="flex flex-row justify-center items-center w-full h-auto mt-12 sm:mt-24 bg-white">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="flex flex-col justify-start items-center w-full gap-y-2 mb-4">
-            <img src="/logo.png" className="w-16 h-auto" alt="logo" />
-            <span className="text-2xl font-medium font-mono opacity-80">Slash</span>
+          <div className="flex flex-row justify-start items-center w-auto mx-auto gap-y-2 mb-4">
+            <img src="/logo.png" className="w-12 h-auto mr-2 -mt-1" alt="logo" />
+            <span className="text-3xl font-medium font-mono opacity-80">Slash</span>
           </div>
-          <form className="w-full" onSubmit={handleSigninBtnClick}>
+          <form className="w-full mt-6" onSubmit={handleSigninBtnClick}>
             <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
               <div className="w-full flex flex-col mb-2">
                 <span className="leading-8 mb-1 text-gray-600">Email</span>

web/src/pages/SignUp.tsx

@@ -73,15 +73,15 @@ const SignUp: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
+    <div className="flex flex-row justify-center items-center w-full h-auto mt-12 sm:mt-24 bg-white">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="flex flex-col justify-start items-center w-full gap-y-2 mb-4">
-            <img src="/logo.png" className="w-16 h-auto" alt="logo" />
-            <span className="text-2xl font-medium font-mono opacity-80">Slash</span>
+          <div className="flex flex-row justify-start items-center w-auto mx-auto gap-y-2 mb-4">
+            <img src="/logo.png" className="w-12 h-auto mr-2 -mt-1" alt="logo" />
+            <span className="text-3xl font-medium font-mono opacity-80">Slash</span>
           </div>
-          <p className="w-full text-center mb-4 text-2xl">Create your account</p>
-          <form className="w-full" onSubmit={handleSignupBtnClick}>
+          <p className="w-full text-2xl mt-6">Create your account</p>
+          <form className="w-full mt-4" onSubmit={handleSignupBtnClick}>
             <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
               <div className="w-full flex flex-col mb-2">
                 <span className="leading-8 mb-1 text-gray-600">Email</span>

web/tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
     fontSize: {
       xs: ".75rem",
       sm: ".875rem",
-      base: "1rem",
+      base: "0.95rem",
       lg: "1.125rem",
       xl: "1.25rem",
       "2xl": "1.5rem",