chore: update header style (#1945)

web/src/components/AboutSiteDialog.tsx

@@ -40,8 +40,12 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           </div>
           <GitHubBadge />
         </div>
-        <div className="border-t w-full mt-3 pt-2 text-sm flex flex-row justify-start items-center space-x-2">
+        <div className="border-t w-full mt-3 pt-2 text-sm flex flex-row justify-start items-center space-x-4">
           <span className="text-gray-500">{t("about.other-projects")}:</span>
+          <a href="https://github.com/boojack/slash" target="_blank" className="flex items-center underline text-blue-600 hover:opacity-80">
+            <img className="w-4 h-auto mr-1" src="https://github.com/boojack/slash/raw/main/resources/logo.png" alt="" />
+            <span>Slash</span>
+          </a>
           <a
             href="https://github.com/boojack/sticky-notes"
             target="_blank"
@@ -54,10 +58,6 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
             />
             <span>Sticky notes</span>
           </a>
-          <a href="https://star-history.com" target="_blank" className="flex items-center underline text-blue-600 hover:opacity-80">
-            <img className="w-4 h-auto mr-1" src="https://star-history.com/icon.png" alt="" />
-            <span>Star history</span>
-          </a>
         </div>
       </div>
     </>

web/src/components/Header.tsx

@@ -6,7 +6,6 @@ import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
 import UserBanner from "./UserBanner";
 import showAboutSiteDialog from "./AboutSiteDialog";
-import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
 import UpgradeVersionView from "./UpgradeVersionBanner";
 
 const Header = () => {
@@ -55,8 +54,8 @@ const Header = () => {
                 id="header-home"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
@@ -68,8 +67,8 @@ const Header = () => {
                 id="header-review"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
@@ -81,8 +80,8 @@ const Header = () => {
                 id="header-resources"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
@@ -96,8 +95,8 @@ const Header = () => {
             id="header-explore"
             className={({ isActive }) =>
               `${
-                isActive && "bg-white dark:bg-zinc-700 shadow"
+                isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-              } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+              } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
             }
           >
             <>
@@ -111,8 +110,8 @@ const Header = () => {
                 id="header-archived"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
@@ -124,23 +123,14 @@ const Header = () => {
                 id="header-setting"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
                   <Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
                 </>
               </NavLink>
-              <div id="header-memo">
-                <button
-                  className="px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 bg-gray-50/100 dark:bg-zinc-700/20 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
-                  onClick={() => showMemoEditorDialog()}
-                >
-                  <Icon.Feather className="mr-3 w-6 h-auto opacity-70" />
-                  {t("common.new")}
-                </button>
-              </div>
               <UpgradeVersionView />
             </>
           )}
@@ -151,8 +141,8 @@ const Header = () => {
                 id="header-auth"
                 className={({ isActive }) =>
                   `${
-                    isActive && "bg-white dark:bg-zinc-700 shadow"
+                    isActive && "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600"
-                  } px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700`
+                  } px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700`
                 }
               >
                 <>
@@ -161,7 +151,7 @@ const Header = () => {
               </NavLink>
               <button
                 id="header-about"
-                className="px-4 pr-5 py-2 rounded-full flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
+                className="px-4 pr-5 py-2 rounded-full border border-transparent flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700"
                 onClick={() => showAboutSiteDialog()}
               >
                 <Icon.CupSoda className="mr-3 w-6 h-auto opacity-70" /> {t("common.about")}

web/src/components/MobileHeader.tsx

@@ -28,7 +28,7 @@ const MobileHeader = (props: Props) => {
   }, [filter, shortcuts]);
 
   return (
-    <div className="sticky top-0 pt-4 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
+    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
         <div
           className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"

web/src/components/UserBanner.tsx

@@ -40,7 +40,7 @@ const UserBanner = () => {
       <Dropdown
         className="w-full"
         trigger={
-          <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-full hover:shadow hover:bg-white dark:hover:bg-zinc-700">
+          <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
             <UserAvatar avatarUrl={user?.avatarUrl} />
             <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">
               {userStore.isVisitorMode() ? systemStatus.customizedProfile.name : username}