chore: update some detail styles (#2168)

* chore: update some detail styls

* chore: update

web/src/components/Dialog/CommonDialog.tsx

@@ -1,14 +1,14 @@
+import { Button } from "@mui/joy";
+import { DefaultColorPalette } from "@mui/joy/styles/types";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import { generateDialog } from "./BaseDialog";
 import "@/less/common-dialog.less";
 
-type DialogStyle = "info" | "warning";
-
 interface Props extends DialogProps {
   title: string;
   content: string;
-  style?: DialogStyle;
+  style?: DefaultColorPalette;
   closeBtnText?: string;
   confirmBtnText?: string;
   onClose?: () => void;
@@ -18,7 +18,7 @@ interface Props extends DialogProps {
 const defaultProps = {
   title: "",
   content: "",
-  style: "info",
+  style: "neutral",
   closeBtnText: "common.close",
   confirmBtnText: "common.confirm",
   onClose: () => null,
@@ -54,13 +54,13 @@ const CommonDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <p className="content-text">{content}</p>
-        <div className="btns-container">
-          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+        <div className="mt-4 w-full flex flex-row justify-end items-center gap-2">
+          <Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
             {closeBtnText}
-          </span>
-          <span className={`btn confirm-btn ${style}`} onClick={handleConfirmBtnClick}>
+          </Button>
+          <Button color={style} onClick={handleConfirmBtnClick}>
             {confirmBtnText}
-          </span>
+          </Button>
         </div>
       </div>
     </>
@@ -71,7 +71,7 @@ interface CommonDialogProps {
   title: string;
   content: string;
   className?: string;
-  style?: DialogStyle;
+  style?: DefaultColorPalette;
   dialogName: string;
   closeBtnText?: string;
   confirmBtnText?: string;

web/src/components/Header.tsx

@@ -1,17 +1,22 @@
 import classNames from "classnames";
 import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { useGlobalStore, useLayoutStore, useUserStore } from "@/store/module";
+import { useLayoutStore, useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
-import UpgradeVersionView from "./UpgradeVersionBanner";
 import UserBanner from "./UserBanner";
 
+interface NavLinkItem {
+  id: string;
+  path: string;
+  title: string;
+  icon: React.ReactNode;
+}
+
 const Header = () => {
   const t = useTranslate();
   const location = useLocation();
-  const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const layoutStore = useLayoutStore();
   const showHeader = layoutStore.state.showHeader;
@@ -29,6 +34,53 @@ const Header = () => {
     handleWindowResize();
   }, [location]);
 
+  const homeNavLink: NavLinkItem = {
+    id: "header-home",
+    path: "/",
+    title: t("common.home"),
+    icon: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const dailyReviewNavLink: NavLinkItem = {
+    id: "header-daily-review",
+    path: "/review",
+    title: t("daily-review.title"),
+    icon: <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const exploreNavLink: NavLinkItem = {
+    id: "header-explore",
+    path: "/explore",
+    title: t("common.explore"),
+    icon: <Icon.Hash className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const resourcesNavLink: NavLinkItem = {
+    id: "header-resources",
+    path: "/resources",
+    title: t("common.resources"),
+    icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const archivedNavLink: NavLinkItem = {
+    id: "header-archived",
+    path: "/archived",
+    title: t("common.archived"),
+    icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const settingNavLink: NavLinkItem = {
+    id: "header-setting",
+    path: "/setting",
+    title: t("common.settings"),
+    icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const authNavLink: NavLinkItem = {
+    id: "header-auth",
+    path: "/auth",
+    title: t("common.sign-in"),
+    icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
+  };
+
+  const navLinks: NavLinkItem[] = !isVisitorMode
+    ? [homeNavLink, dailyReviewNavLink, exploreNavLink, resourcesNavLink, archivedNavLink, settingNavLink]
+    : [exploreNavLink, authNavLink];
+
   return (
     <div
       className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
@@ -48,122 +100,23 @@ const Header = () => {
       >
         <UserBanner />
         <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
-          {!isVisitorMode && (
-            <>
-              <NavLink
-                to="/"
-                id="header-home"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Home className="mr-3 w-6 h-auto opacity-70" /> {t("common.home")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/review"
-                id="header-review"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" /> {t("daily-review.title")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/resources"
-                id="header-resources"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" /> {t("common.resources")}
-                </>
-              </NavLink>
-            </>
-          )}
-          {!globalStore.getDisablePublicMemos() && (
-            <>
-              <NavLink
-                to="/explore"
-                id="header-explore"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Hash className="mr-3 w-6 h-auto opacity-70" /> {t("common.explore")}
-                </>
-              </NavLink>
-            </>
-          )}
-
-          {!isVisitorMode && (
-            <>
-              <NavLink
-                to="/archived"
-                id="header-archived"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Archive className="mr-3 w-6 h-auto opacity-70" /> {t("common.archived")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/setting"
-                id="header-setting"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
-                </>
-              </NavLink>
-              <UpgradeVersionView />
-            </>
-          )}
-          {isVisitorMode && (
-            <>
-              <NavLink
-                to="/auth"
-                id="header-auth"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border 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",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" /> {t("common.sign-in")}
-                </>
-              </NavLink>
-            </>
-          )}
+          {navLinks.map((navLink) => (
+            <NavLink
+              key={navLink.id}
+              to={navLink.path}
+              id={navLink.id}
+              className={({ isActive }) =>
+                classNames(
+                  "px-4 pr-5 py-2 rounded-full border 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",
+                  isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
+                )
+              }
+            >
+              <>
+                {navLink.icon} {navLink.title}
+              </>
+            </NavLink>
+          ))}
         </div>
       </header>
     </div>

web/src/components/Memo.tsx

@@ -1,4 +1,4 @@
-import { Divider, Tooltip } from "@mui/joy";
+import { Divider } from "@mui/joy";
 import { isEqual, uniqWith } from "lodash-es";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const Memo: React.FC<Props> = (props: Props) => {
-  const { memo, showCreator, showFull, showVisibility, showRelatedMemos, lazyRendering } = props;
+  const { memo, showCreator, showFull, showRelatedMemos, lazyRendering } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const filterStore = useFilterStore();
@@ -243,15 +243,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     }
   };
 
-  const handleMemoVisibilityClick = (visibility: Visibility) => {
-    const currVisibilityQuery = filterStore.getState().visibility;
-    if (currVisibilityQuery === visibility) {
-      filterStore.setMemoVisibilityFilter(undefined);
-    } else {
-      filterStore.setMemoVisibilityFilter(visibility);
-    }
-  };
-
   return (
     <>
       <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
@@ -271,17 +262,6 @@ const Memo: React.FC<Props> = (props: Props) => {
             </Link>
           </div>
           <div className="btns-container space-x-2">
-            {showVisibility && memo.visibility !== "PRIVATE" && (
-              <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase() as Lowercase<typeof memo.visibility>}`)} placement="top">
-                <div onClick={() => handleMemoVisibilityClick(memo.visibility)}>
-                  {memo.visibility === "PUBLIC" ? (
-                    <Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" />
-                  ) : (
-                    <Icon.Users className="w-4 h-auto cursor-pointer rounded text-gray-500 dark:text-gray-400" />
-                  )}
-                </div>
-              </Tooltip>
-            )}
             {memo.pinned && <Icon.Bookmark className="w-4 h-auto rounded text-green-600" />}
             {!readonly && (
               <>

web/src/components/Settings/MemberSection.tsx

@@ -1,4 +1,4 @@
-import { Button, Input } from "@mui/joy";
+import { Button, Dropdown, Input, Menu, MenuButton } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import * as api from "@/helpers/api";
@@ -6,7 +6,7 @@ import { useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
-import Dropdown from "../kit/Dropdown";
+import Icon from "../Icon";
 
 interface State {
   createUserUsername: string;
@@ -163,8 +163,11 @@ const PreferencesSection = () => {
                     {currentUser?.id === user.id ? (
                       <span>{t("common.yourself")}</span>
                     ) : (
-                      <Dropdown
-                        actions={
+                      <Dropdown>
+                        <MenuButton size="sm">
+                          <Icon.MoreVertical className="w-4 h-auto" />
+                        </MenuButton>
+                        <Menu>
                           <>
                             <button
                               className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
@@ -196,8 +199,8 @@ const PreferencesSection = () => {
                               </>
                             )}
                           </>
-                        }
-                      />
+                        </Menu>
+                      </Dropdown>
                     )}
                   </td>
                 </tr>

web/src/components/Settings/MyAccountSection.tsx

@@ -53,7 +53,7 @@ const MyAccountSection = () => {
         <p className="title-text">Open ID</p>
         <div className="w-full flex flex-row justify-start items-center">
           <Input className="grow mr-2" value={user.openId} readOnly />
-          <Button className="shrink-0" color="warning" onClick={handleResetOpenIdBtnClick}>
+          <Button className="shrink-0" color="neutral" variant="outlined" onClick={handleResetOpenIdBtnClick}>
             <Icon.RefreshCw className="h-4 w-4" />
           </Button>
         </div>

web/src/components/UserBanner.tsx

@@ -38,7 +38,7 @@ const UserBanner = () => {
   return (
     <div className="flex flex-row justify-between items-center relative w-full h-auto px-2 flex-nowrap shrink-0">
       <Dropdown
-        className="w-full"
+        className="w-auto"
         trigger={
           <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} />