feat: dark mode for dialogs (#643)

2 years ago · c5200ca31b
parent 1078132b12
commit c5200ca31b
39 changed files with 186 additions and 252 deletions
--- a/web/index.html
+++ b/web/index.html
@ -3,7 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/logo.webp" type="image/*" />
-    <meta name="theme-color" content="#f6f5f4" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f5f4" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="manifest" href="/manifest.json" />
    <title>Memos</title>
--- a/web/package.json
+++ b/web/package.json
@ -10,7 +10,7 @@
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
-    "@mui/joy": "^5.0.0-alpha.52",
+    "@mui/joy": "^5.0.0-alpha.56",
    "@reduxjs/toolkit": "^1.8.1",
    "axios": "^0.27.2",
    "copy-to-clipboard": "^3.3.2",
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -1,4 +1,3 @@
-import { CssVarsProvider } from "@mui/joy/styles";
 import { useEffect, Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
@ -7,11 +6,12 @@ import { useAppSelector } from "./store";
 import Loading from "./pages/Loading";
 import router from "./router";
 import * as storage from "./helpers/storage";
-import theme from "./theme";
+import useApperance from "./hooks/useApperance";

 function App() {
  const { i18n } = useTranslation();
  const { locale, systemStatus } = useAppSelector((state) => state.global);
+  useApperance();

  useEffect(() => {
    locationService.updateStateWithLocation();
@ -43,11 +43,9 @@ function App() {
  }, [locale]);

  return (
-    <CssVarsProvider theme={theme}>
-      <Suspense fallback={<Loading />}>
-        <RouterProvider router={router} />
-      </Suspense>
-    </CssVarsProvider>
+    <Suspense fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </Suspense>
  );
 }

--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@ -18,27 +18,27 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
  return (
    <>
      <div className="dialog-header-container">
-        <p className="title-text">
-          <span className="icon-text">🤠</span>
-          {t("common.about")}
-        </p>
+        <p className="title-text">{t("common.about")}</p>
        <button className="btn close-btn" onClick={handleCloseBtnClick}>
          <Icon.X />
        </button>
      </div>
      <div className="dialog-content-container">
-        <img className="logo-img" src="/logo-full.webp" alt="" />
+        <p className="flex justify-start items-center">
+          <img className="logo-img w-16 h-auto" src="/logo.webp" alt="" />
+          <span className=" font-mono text-4xl">memos</span>
+        </p>
        <p>{t("slogan")}</p>
        <br />
        <div className="addition-info-container">
          <GitHubBadge />
-          <>
+          <span className="ml-2">
            {t("common.version")}:
            <span className="pre-text">
              {profile.version}-{profile.mode}
            </span>
            🎉
-          </>
+          </span>
        </div>
      </div>
    </>
--- a/web/src/components/Dialog/BaseDialog.tsx
+++ b/web/src/components/Dialog/BaseDialog.tsx
@ -4,6 +4,8 @@ import { Provider } from "react-redux";
 import { ANIMATION_DURATION } from "../../helpers/consts";
 import store from "../../store";
 import "../../less/base-dialog.less";
+import { CssVarsProvider } from "@mui/joy";
+import theme from "../../theme";

 interface DialogConfig {
  className: string;
@ -77,9 +79,11 @@ export function generateDialog<T extends DialogProps>(

  const Fragment = (
    <Provider store={store}>
-      <BaseDialog destroy={cbs.destroy} clickSpaceDestroy={true} {...config}>
-        <DialogComponent {...dialogProps} />
-      </BaseDialog>
+      <CssVarsProvider theme={theme}>
+        <BaseDialog destroy={cbs.destroy} clickSpaceDestroy={true} {...config}>
+          <DialogComponent {...dialogProps} />
+        </BaseDialog>
+      </CssVarsProvider>
    </Provider>
  );

--- a/web/src/components/GitHubBadge.tsx
+++ b/web/src/components/GitHubBadge.tsx
@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import * as api from "../helpers/api";
 import Icon from "./Icon";
-import "../less/github-badge.less";

 const GitHubBadge = () => {
  const [starCount, setStarCount] = useState(0);
@ -13,12 +12,15 @@ const GitHubBadge = () => {
  }, []);

  return (
-    <a className="github-badge-container" href="https://github.com/usememos/memos">
-      <div className="github-icon">
-        <Icon.GitHub className="icon-img" />
+    <a
+      className="h-7 flex flex-row justify-start items-center border dark:border-zinc-600 rounded cursor-pointer hover:opacity-80"
+      href="https://github.com/usememos/memos"
+    >
+      <div className="apply w-auto h-full px-2 flex flex-row justify-center items-center text-xs bg-gray-100 dark:bg-zinc-700">
+        <Icon.GitHub className="mr-1 w-4 h-4" />
        Star
      </div>
-      <div className="count-text">{starCount || ""}</div>
+      <div className="w-auto h-full flex flex-row justify-center items-center px-3 text-xs font-bold">{starCount || ""}</div>
    </a>
  );
 };
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@ -1,10 +1,8 @@
 import copy from "copy-to-clipboard";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
 import { memo, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import "dayjs/locale/zh";
 import { editorStateService, locationService, memoService, userService } from "../services";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
@ -15,8 +13,6 @@ import showPreviewImageDialog from "./PreviewImageDialog";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import "../less/memo.less";

-dayjs.extend(relativeTime);
-
 interface Props {
  memo: Memo;
  highlightWord?: string;
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@ -201,25 +201,25 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
                      actions={
                        <>
                          <button
-                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                            onClick={() => handlePreviewBtnClick(resource)}
                          >
                            {t("resources.preview")}
                          </button>
                          <button
-                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                            onClick={() => handleRenameBtnClick(resource)}
                          >
                            {t("resources.rename")}
                          </button>
                          <button
-                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                            onClick={() => handleCopyResourceLinkBtnClick(resource)}
                          >
                            {t("resources.copy-link")}
                          </button>
                          <button
-                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
                            onClick={() => handleDeleteResourceBtnClick(resource)}
                          >
                            {t("common.delete")}
--- a/web/src/components/ResourcesSelectorDialog.tsx
+++ b/web/src/components/ResourcesSelectorDialog.tsx
@ -108,12 +108,12 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
              resources.map((resource, index) => (
                <div key={resource.id} className="resource-container">
                  <span className="field-text id-text">{resource.id}</span>
-                  <Tooltip title={resource.filename}>
+                  <Tooltip placement="top-start" title={resource.filename}>
                    <span className="field-text name-text">{resource.filename}</span>
                  </Tooltip>
                  <div className="flex justify-end">
                    <Icon.Eye
-                      className=" text-left text-sm leading-6 px-1 mr-2 cursor-pointer hover:bg-gray-100"
+                      className=" text-left text-sm leading-6 px-1 mr-2 cursor-pointer hover:opacity-80"
                      onClick={() => handlePreviewBtnClick(resource)}
                    >
                      {t("resources.preview")}
@ -126,7 +126,7 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
          </div>
        )}
        <div className="flex justify-between w-full mt-2 px-2">
-          <span className="text-sm font-mono text-gray-500 leading-8">
+          <span className="text-sm font-mono text-gray-400 leading-8">
            {t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
          </span>
          <div className="flex flex-row justify-start items-center">
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@ -4,7 +4,6 @@ import { userService } from "../../services";
 import { useAppSelector } from "../../store";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
-import Icon from "../Icon";
 import Dropdown from "../common/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
@ -24,13 +23,8 @@ const PreferencesSection = () => {
    createUserPassword: "",
    repeatUserPassword: "",
  });
-  const [userNameQueryText, setUserNameQueryText] = useState("");
  const [userList, setUserList] = useState<User[]>([]);

-  const showUserList = userList.filter((user: User) => {
-    return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
-  });
-
  useEffect(() => {
    fetchUserList();
  }, []);
@ -90,11 +84,6 @@ const PreferencesSection = () => {
    });
  };

-  const handleUserNameQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
-    const text = event.currentTarget.value;
-    setUserNameQueryText(text);
-  };
-
  const handleChangePasswordClick = (user: User) => {
    showChangeMemberPasswordDialog(user);
  };
@ -158,32 +147,20 @@ const PreferencesSection = () => {
          />
        </div>
        <div className="btns-container">
-          <button onClick={handleCreateUserBtnClick}>{t("common.create")}</button>
+          <button className="btn-normal" onClick={handleCreateUserBtnClick}>
+            {t("common.create")}
+          </button>
        </div>
      </div>
-      <div className="section-header-container">
+      <div className="w-full flex flex-row justify-between items-center">
        <div className="title-text">{t("setting.member-list")}</div>
-        <div className="search-bar">
-          <div className="search-bar-container">
-            <div className="search-bar-inputer">
-              <Icon.Search className="icon-img" />
-              <input
-                className="text-input"
-                type="text"
-                placeholder={t("common.username")}
-                value={userNameQueryText}
-                onChange={handleUserNameQueryInput}
-              />
-            </div>
-          </div>
-        </div>
      </div>
      <div className="member-container field-container">
        <span className="field-text">ID</span>
        <span className="field-text username-field">{t("common.username")}</span>
        <span></span>
      </div>
-      {showUserList.map((user) => (
+      {userList.map((user) => (
        <div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
          <span className="field-text id-text">{user.id}</span>
          <span className="field-text username-text">{user.username}</span>
@ -197,14 +174,14 @@ const PreferencesSection = () => {
                actions={
                  <>
                    <button
-                      className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                      className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                      onClick={() => handleChangePasswordClick(user)}
                    >
                      {t("setting.account-section.change-password")}
                    </button>
                    {user.rowStatus === "NORMAL" ? (
                      <button
-                        className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                        className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                        onClick={() => handleArchiveUserClick(user)}
                      >
                        {t("common.archive")}
@ -212,7 +189,7 @@ const PreferencesSection = () => {
                    ) : (
                      <>
                        <button
-                          className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                          className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
                          onClick={() => handleRestoreUserClick(user)}
                        >
                          {t("common.restore")}
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@ -130,6 +130,7 @@ const SystemSection = () => {
      </div>
      <Textarea
        className="w-full"
+        color="neutral"
        sx={{
          fontFamily: "monospace",
          fontSize: "14px",
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/web/src/components/ShareMemoImageDialog.tsx
@ -15,6 +15,7 @@ import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
 import Selector from "./common/Selector";
 import "../less/share-memo-image-dialog.less";
+import useApperance from "../hooks/useApperance";

 interface Props extends DialogProps {
  memo: Memo;
@ -35,6 +36,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
    shortcutImgUrl: "",
    memoVisibility: propsMemo.visibility,
  });
+  const [apperance] = useApperance();
  const loadingState = useLoading();
  const memoElRef = useRef<HTMLDivElement>(null);
  const memo = {
@ -70,7 +72,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
      }

      toImage(memoElRef.current, {
-        backgroundColor: "#f4f4f5",
+        backgroundColor: apperance === "light" ? "#f4f4f5" : "#27272a",
        pixelRatio: window.devicePixelRatio * 2,
      })
        .then((url) => {
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@ -81,13 +81,13 @@ const UserBanner = () => {
              {!userService.isVisitorMode() && (
                <>
                  <button
-                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                    onClick={handleResourcesBtnClick}
                  >
                    <span className="mr-1">🌄</span> {t("sidebar.resources")}
                  </button>
                  <button
-                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
+                    className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                    onClick={handleArchivedBtnClick}
                  >
                    <span className="mr-1">🗂</span> {t("sidebar.archived")}
@ -95,14 +95,14 @@ const UserBanner = () => {
                </>
              )}
              <button
-                className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
+                className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                onClick={handleAboutBtnClick}
              >
                <span className="mr-1">🤠</span> {t("common.about")}
              </button>
              {!userService.isVisitorMode() && (
                <button
-                  className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-zinc-800"
+                  className="w-full px-3 whitespace-nowrap text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                  onClick={handleSignOutBtnClick}
                >
                  <span className="mr-1">👋</span> {t("common.sign-out")}
--- a/web/src/components/common/Dropdown.tsx
+++ b/web/src/components/common/Dropdown.tsx
@ -38,7 +38,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
      {trigger ? (
        trigger
      ) : (
-        <button className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 dark:text-gray-200 cursor-pointer hover:opacity-80">
+        <button className="flex flex-row justify-center items-center border dark:border-zinc-700 p-1 rounded shadow text-gray-600 dark:text-gray-200 cursor-pointer hover:opacity-80">
          <Icon.MoreHorizontal className="w-4 h-auto" />
        </button>
      )}
--- a/web/src/css/tailwind.css
+++ b/web/src/css/tailwind.css
@ -16,7 +16,7 @@

@layer components {
  .btn-normal {
-    @apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
+    @apply select-none inline-flex border dark:border-zinc-700 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
  }

  .btn-primary {
@ -32,6 +32,6 @@
  }

  .input-text {
-    @apply w-full px-3 py-2 leading-6 text-sm border rounded;
+    @apply w-full px-3 py-2 leading-6 text-sm rounded border dark:border-zinc-700 dark:bg-zinc-800;
  }
 }
--- a/web/src/less/base-dialog.less
+++ b/web/src/less/base-dialog.less
@ -10,7 +10,7 @@
  }

  > .dialog-container {
-    @apply flex flex-col justify-start items-start bg-white p-4 rounded-lg;
+    @apply flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;

    > .dialog-header-container {
      @apply flex flex-row justify-between items-center w-full mb-4;
@ -22,7 +22,7 @@
      }

      .btn {
-        @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
+        @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 dark:hover:bg-zinc-700 hover:shadow;
      }
    }

--- a/web/src/less/common/date-picker.less
+++ b/web/src/less/common/date-picker.less
@ -22,10 +22,7 @@
      @apply flex flex-row justify-around items-center w-full;

      > .day-item {
-        @apply flex flex-col justify-center items-center;
-        width: 36px;
-        height: 36px;
-        user-select: none;
+        @apply w-9 h-9 select-none flex flex-col justify-center items-center;
        color: gray;
        font-size: 13px;
        margin: 2px 0;
@ -33,21 +30,11 @@
    }

    > .day-item {
-      @apply flex flex-col justify-center items-center;
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      font-size: 14px;
-      user-select: none;
-      cursor: pointer;
+      @apply w-9 h-9 rounded-full text-sm select-none cursor-pointer flex flex-col justify-center items-center hover:bg-gray-200 dark:hover:bg-zinc-600;
      margin: 2px;

-      &:hover {
-        @apply bg-gray-100;
-      }
-
      &.current {
-        @apply text-blue-600 bg-blue-100 text-base font-medium;
+        @apply text-blue-600 !bg-blue-100 text-base font-medium;
      }

      &.null {
--- a/web/src/less/create-shortcut-dialog.less
+++ b/web/src/less/create-shortcut-dialog.less
@ -16,14 +16,14 @@
        }

        > .title-input {
-          @apply w-full py-1 px-2 h-9 text-sm rounded border shadow-inner;
+          @apply w-full py-1 px-2 h-9 text-sm rounded border dark:border-zinc-700 dark:bg-zinc-800 shadow-inner;
        }

        > .filters-wrapper {
          @apply w-full flex flex-col justify-start items-start;

          > .create-filter-btn {
-            @apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border cursor-pointer text-blue-500 hover:opacity-80;
+            @apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border dark:border-zinc-700 cursor-pointer text-blue-500 hover:opacity-80;
          }
        }
      }
--- a/web/src/less/daily-memo.less
+++ b/web/src/less/daily-memo.less
@ -8,18 +8,18 @@
  }

  > .split-line {
-    @apply h-full px-px bg-gray-50 absolute top-1 left-6 z-0 -ml-px;
+    @apply h-full px-px bg-gray-50 dark:bg-zinc-600 absolute top-1 left-6 z-0 -ml-px;
  }

  > .time-wrapper {
-    @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 border-2 border-white text-gray-600 z-10;
+    @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 dark:bg-zinc-600 border-2 border-white dark:border-zinc-800 text-gray-600 dark:text-gray-300 z-10;
  }

  > .memo-container {
    @apply w-full overflow-x-hidden flex flex-col justify-start items-start;

    .memo-content-text {
-      margin-top: 3px;
+      @apply mt-1;
    }
  }
 }
--- a/web/src/less/daily-review-dialog.less
+++ b/web/src/less/daily-review-dialog.less
@ -2,20 +2,20 @@
  @apply p-0 sm:py-16;

  > .dialog-container {
-    @apply w-full sm:w-112 max-w-full grow sm:grow-0 bg-white p-0 rounded-none sm:rounded-lg;
+    @apply w-full sm:w-112 max-w-full grow sm:grow-0 p-0 rounded-none sm:rounded-lg;

    > .dialog-header-container {
      @apply relative flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;

      > .title-text {
-        @apply px-2 py-1 -ml-2 cursor-pointer select-none rounded hover:bg-gray-100;
+        @apply px-2 py-1 -ml-2 cursor-pointer select-none rounded hover:bg-gray-100 dark:hover:bg-zinc-700;
      }

      > .btns-container {
        @apply flex flex-row justify-start items-center;

        > .btn-text {
-          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none text-gray-600 last:mr-0 hover:bg-gray-200 p-0.5;
+          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200 dark:hover:bg-zinc-700 p-0.5;

          > .icon-img {
            @apply w-full h-auto;
@ -28,7 +28,7 @@
      }

      > .date-picker {
-        @apply absolute top-12 left-4 mt-2 bg-white shadow z-20 mx-auto border border-gray-200 rounded-lg mb-6;
+        @apply absolute top-12 left-4 mt-2 bg-white dark:bg-zinc-700 shadow z-20 mx-auto border dark:border-zinc-800 rounded-lg mb-6;
      }
    }

@ -40,7 +40,7 @@
        z-index: 1;

        > .year-text {
-          @apply m-auto font-bold text-gray-600 text-center leading-6 mb-2;
+          @apply m-auto font-bold text-gray-600 dark:text-gray-300 text-center leading-6 mb-2;
        }

        > .date-container {
--- a/web/src/less/github-badge.less
+++ b/web/src/less/github-badge.less
@ -1,15 +0,0 @@
-.github-badge-container {
-  @apply h-7 flex flex-row justify-start items-center border rounded cursor-pointer hover:opacity-80;
-
-  > .github-icon {
-    @apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs text-gray-800 bg-gray-100;
-
-    > .icon-img {
-      @apply mr-1 w-4 h-4;
-    }
-  }
-
-  > .count-text {
-    @apply w-auto h-full flex flex-row justify-center items-center px-3 text-xs font-bold text-gray-800;
-  }
-}
--- a/web/src/less/loading.less
+++ b/web/src/less/loading.less
@ -1,11 +0,0 @@
-.page-wrapper.loading {
-  @apply flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-900;
-
-  > .page-container {
-    @apply w-80 max-w-full h-full py-4 flex flex-col justify-center items-center;
-
-    >.loading-icon {
-      @apply animate-spin;
-    }
-  }
-}
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@ -1,12 +1,11 @@
 .memo-editor-container {
-  @apply transition-all relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
+  @apply relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;

  &.fullscreen {
-    @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
-    background-color: #f6f5f4;
+    @apply transition-all fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;

    > .memo-editor {
-      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white dark:bg-zinc-700;
+      @apply p-4 mb-4 rounded-lg border shadow-lg flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white dark:bg-zinc-700 dark:border-zinc-600;

      > .common-editor-inputer {
        @apply flex-grow w-full !h-full max-h-full;
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@ -1,10 +1,6 @@
 .memo-wrapper {
  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;

-  &.archived-memo {
-    @apply border-gray-200;
-  }
-
  &.pinned {
    @apply border-gray-200 border-2 dark:border-zinc-600;
  }
--- a/web/src/less/resources-dialog.less
+++ b/web/src/less/resources-dialog.less
@ -25,7 +25,7 @@
            @apply text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-red-600 text-red-600 bg-red-100 hover:opacity-80;

            > .icon-img {
-            @apply w-4 h-auto mr-1;
+              @apply w-4 h-auto mr-1;
            }
          }
        }
@ -39,7 +39,7 @@
        @apply flex flex-col justify-start items-start w-full;

        > .fields-container {
-          @apply px-2 py-2 w-full grid grid-cols-7 border-b;
+          @apply px-2 py-2 w-full grid grid-cols-7 border-b dark:border-b-zinc-600;

          > .field-text {
            @apply font-mono text-gray-400;
--- a/web/src/less/setting-dialog.less
+++ b/web/src/less/setting-dialog.less
@ -8,11 +8,11 @@
      @apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0 hide-scrollbar;

      > .close-btn {
-        @apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded bg-white hover:bg-gray-200 hover:shadow;
+        @apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 dark:hover:bg-zinc-700 hover:shadow;
      }

      > .section-selector-container {
-        @apply w-full sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 border-r bg-gray-100 flex flex-col justify-start items-start;
+        @apply w-full sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 bg-gray-100 dark:bg-zinc-700 flex flex-col justify-start items-start;

        > .section-title {
          @apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;
@ -22,7 +22,7 @@
          @apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;

          > .section-item {
-            @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 cursor-pointer hover:opacity-80;
+            @apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 dark:text-gray-300 cursor-pointer hover:opacity-80;

            &.selected {
              @apply font-bold hover:opacity-100;
@ -41,18 +41,6 @@
        > .section-container {
          @apply flex flex-col justify-start items-start w-full my-2;

-          > .section-header-container{
-            @apply flex bg-white;
-
-            > .text-text {
-              @apply w-20;
-            }
-
-            > .search-bar{
-              @apply w-48;
-            }
-          }
-
          .title-text {
            @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500;
          }
--- a/web/src/less/settings/member-section.less
+++ b/web/src/less/settings/member-section.less
@ -10,16 +10,12 @@
      }

      > input {
-        @apply border rounded text-sm leading-7 shadow-inner px-2;
+        @apply border dark:border-zinc-700 rounded text-sm leading-7 shadow-inner px-2 dark:bg-zinc-800;
      }
    }

    > .btns-container {
      @apply w-full mb-6 pl-20 flex flex-row justify-start items-center;
-
-      > button {
-        @apply border text-sm px-3 rounded leading-7 shadow hover:opacity-80;
-      }
    }
  }

@ -34,13 +30,13 @@
  }

  > .member-container {
-    @apply w-full grid grid-cols-4 border-b py-2;
+    @apply w-full grid grid-cols-4 border-b dark:border-b-zinc-700 py-2;

    > .field-text {
      @apply text-base pl-2 mr-4 w-16 truncate;

      &.id-text {
-        @apply font-mono text-gray-600;
+        @apply font-mono text-gray-400;
      }

      &.username-text {
--- a/web/src/less/settings/my-account-section.less
+++ b/web/src/less/settings/my-account-section.less
@ -1,6 +1,6 @@
 .openapi-section-container {
  > .value-text {
-    @apply w-full font-mono text-sm shadow-inner border py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
+    @apply w-full font-mono text-sm shadow-inner border dark:border-zinc-700 py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
  }

  > .usage-guide-container {
@ -11,7 +11,7 @@
    }

    > pre {
-      @apply w-full bg-gray-100 shadow-inner py-2 px-3 text-sm rounded font-mono break-all whitespace-pre-wrap;
+      @apply w-full bg-gray-100 dark:bg-zinc-700 shadow-inner py-2 px-3 text-sm rounded font-mono break-all whitespace-pre-wrap;
    }
  }
 }
--- a/web/src/less/share-memo-image-dialog.less
+++ b/web/src/less/share-memo-image-dialog.less
@ -3,7 +3,7 @@
    @apply w-96 p-0 bg-zinc-100;

    > .dialog-header-container {
-      @apply py-2 pt-4 px-4 pl-6 mb-0 bg-white rounded-t-lg;
+      @apply py-2 pt-4 px-4 pl-6 mb-0 rounded-t-lg;
    }

    > .dialog-content-container {
@ -11,7 +11,7 @@
      min-height: 128px;

      > .tip-words-container {
-        @apply w-full flex flex-col justify-center items-start border-b bg-white px-6 py-0 pb-2;
+        @apply w-full flex flex-col justify-center items-start border-b px-6 py-0 pb-2;

        > .tip-text {
          @apply text-sm text-gray-500;
@ -38,15 +38,15 @@
        @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start;

        > .memo-shortcut-img {
-          @apply absolute top-0 left-0 w-full h-auto rounded-b-lg z-10;
+          @apply absolute top-0 left-0 w-full h-auto z-10;
        }

        > .time-text {
-          @apply w-full px-6 pt-5 pb-2 text-sm text-gray-500 bg-white;
+          @apply w-full px-6 pt-5 pb-2 text-sm text-gray-500;
        }

        > .memo-content-wrapper {
-          @apply w-full px-6 text-base bg-white pb-4;
+          @apply w-full px-6 text-base pb-4;
        }

        > .images-container {
@ -58,7 +58,7 @@
        }

        > .watermark-container {
-          @apply flex flex-row justify-between items-center w-full py-2 px-6;
+          @apply flex flex-row justify-between items-center w-full dark:bg-zinc-900 py-2 px-6;

          > .normal-text {
            @apply w-full flex flex-row justify-start items-center text-sm leading-6 text-gray-500;
@ -86,33 +86,33 @@
        }
      }

-      .share-actions-container{
-        @apply flex justify-between px-4 py-3 mb-0 bg-white w-full rounded-b-lg border-t;
+      .share-actions-container {
+        @apply flex justify-between px-4 py-3 mb-0 w-full border-t dark:border-t-zinc-700;

-        > .visibility-selector{
-          @apply  w-36;
+        > .visibility-selector {
+          @apply w-36;

-          > .selector-wrapper{
+          > .selector-wrapper {
            @apply h-10;
          }
        }

-        > .share-btns-container{
+        > .share-btns-container {
          @apply flex justify-end;

          > .buttons-wrapper {
-          @apply flex flex-row justify-start items-center;
+            @apply flex flex-row justify-start items-center;

-            > .share-btn{
-            @apply text-sm cursor-pointer px-3 py-2 rounded flex flex-row justify-center items-center border bg-gray-50 hover:bg-gray-100;
+            > .share-btn {
+              @apply text-sm cursor-pointer px-3 py-2 rounded flex flex-row justify-center items-center border dark:border-zinc-700 hover:opacity-80;

              > .icon-img {
-              @apply w-4 h-auto mr-1;
+                @apply w-4 h-auto mr-1;
              }
            }

            > .share-image-btn {
-            @apply mr-3;
+              @apply mr-3;
            }
          }
        }
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@ -47,7 +47,7 @@
    "image": "Image",
    "link": "Link"
  },
-  "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
+  "slogan": "An open-source, self-hosted memo hub with knowledge management and socialization.",
  "auth": {
    "signup-as-host": "Sign up as Host",
    "host-tip": "You are registering as the Site Host.",
--- a/web/src/locales/fr.json
+++ b/web/src/locales/fr.json
@ -47,7 +47,7 @@
    "image": "Image",
    "link": "Link"
  },
-  "slogan": "Un hub de mémos open source et auto-hébergé pour la gestion des connaissances et la collaboration.",
+  "slogan": "An open-source, self-hosted memo hub with knowledge management and socialization.",
  "auth": {
    "signup-as-host": "S'inscrire en tant qu'hôte",
    "host-tip": "Vous vous inscrivez en tant qu'hébergeur du site.",
--- a/web/src/locales/vi.json
+++ b/web/src/locales/vi.json
@ -47,7 +47,7 @@
    "image": "Image",
    "link": "Link"
  },
-  "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
+  "slogan": "An open-source, self-hosted memo hub with knowledge management and socialization.",
  "auth": {
    "signup-as-host": "Đăng ký như chủ nhân",
    "host-tip": "Bạn đang đăng ký với tư cách chủ nhân của trang web này.",
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@ -47,7 +47,7 @@
    "image": "图片",
    "link": "链接"
  },
-  "slogan": "An open-source, self-hosted memo hub for knowledge management and collaboration.",
+  "slogan": "An open-source, self-hosted memo hub with knowledge management and socialization.",
  "auth": {
    "signup-as-host": "注册为 Host",
    "host-tip": "你正在注册为 Host 用户账号。",
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@ -1,3 +1,5 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
@ -7,11 +9,20 @@ import "./helpers/polyfill";
 import "highlight.js/styles/github.css";
 import "./less/global.less";
 import "./css/tailwind.css";
+import "dayjs/locale/zh";
+import "dayjs/locale/fr";
+import "dayjs/locale/vi";
+import { CssVarsProvider } from "@mui/joy";
+import theme from "./theme";
+
+dayjs.extend(relativeTime);

 const container = document.getElementById("root");
 const root = createRoot(container as HTMLElement);
 root.render(
  <Provider store={store}>
-    <App />
+    <CssVarsProvider theme={theme}>
+      <App />
+    </CssVarsProvider>
  </Provider>
 );
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@ -9,7 +9,6 @@ import useLoading from "../hooks/useLoading";
 import toastHelper from "../components/Toast";
 import MemoContent from "../components/MemoContent";
 import MemoResources from "../components/MemoResources";
-import useApperance from "../hooks/useApperance";
 import "../less/explore.less";

 interface State {
@ -17,8 +16,6 @@ interface State {
 }

 const Explore = () => {
-  useApperance();
-
  const { t, i18n } = useTranslation();
  const user = useAppSelector((state) => state.user.user);
  const location = useAppSelector((state) => state.location);
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@ -11,11 +11,8 @@ import MemoFilter from "../components/MemoFilter";
 import MemoList from "../components/MemoList";
 import UpdateVersionBanner from "../components/UpdateVersionBanner";
 import "../less/home.less";
-import useApperance from "../hooks/useApperance";

 function Home() {
-  useApperance();
-
  const { t } = useTranslation();
  const location = useLocation();
  const user = useAppSelector((state) => state.user.user);
--- a/web/src/pages/Loading.tsx
+++ b/web/src/pages/Loading.tsx
@ -1,11 +1,10 @@
 import Icon from "../components/Icon";
-import "../less/loading.less";

 function Loading() {
  return (
-    <div className="page-wrapper loading">
-      <div className="page-container">
-        <Icon.Loader className="loading-icon" />
+    <div className="flex flex-row justify-center items-center w-full h-screen bg-white dark:bg-zinc-800">
+      <div className="w-80 max-w-full h-full py-4 flex flex-col justify-center items-center">
+        <Icon.Loader className="animate-spin dark:text-gray-200" />
      </div>
    </div>
  );
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@ -7,7 +7,6 @@ import { memoService } from "../services";
 import { UNKNOWN_ID } from "../helpers/consts";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
-import useApperance from "../hooks/useApperance";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
@ -20,8 +19,6 @@ interface State {
 }

 const MemoDetail = () => {
-  useApperance();
-
  const { t, i18n } = useTranslation();
  const params = useParams();
  const user = useAppSelector((state) => state.user.user);
--- a/web/yarn.lock
+++ b/web/yarn.lock
@ -304,13 +304,20 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3":
  version "7.20.1"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
  dependencies:
    regenerator-runtime "^0.13.10"

+"@babel/runtime@^7.20.1":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
  version "7.18.10"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@ -368,7 +375,7 @@
    source-map "^0.5.7"
    stylis "4.1.3"

-"@emotion/cache@^11.10.3", "@emotion/cache@^11.10.5":
+"@emotion/cache@^11.10.5":
  version "11.10.5"
  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
@ -756,85 +763,85 @@
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"

-"@mui/base@5.0.0-alpha.104":
-  version "5.0.0-alpha.104"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.104.tgz#1792e962dd782f1fa434f4aa7bab5410ed946644"
-  integrity sha512-tQPxZTzfYMwxYfKhEwufbTfdLpNjFdW7bXq6dK0j8651AAyZL4M8wynWUQ98hH1362R26mZFhVxHB2UD9t7VuA==
+"@mui/base@5.0.0-alpha.108":
+  version "5.0.0-alpha.108"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.108.tgz#4e4639ba6769dd178ef475dba4cc36bf8a3f1dc6"
+  integrity sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==
  dependencies:
-    "@babel/runtime" "^7.19.0"
+    "@babel/runtime" "^7.20.1"
    "@emotion/is-prop-valid" "^1.2.0"
-    "@mui/types" "^7.2.0"
-    "@mui/utils" "^5.10.9"
+    "@mui/types" "^7.2.2"
+    "@mui/utils" "^5.10.16"
    "@popperjs/core" "^2.11.6"
    clsx "^1.2.1"
    prop-types "^15.8.1"
    react-is "^18.2.0"

-"@mui/core-downloads-tracker@^5.10.12":
-  version "5.10.12"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.12.tgz#ff36abc5f4aac3c762d116e12ab51c2688d93da1"
-  integrity sha512-cR8lOS606G++iVHR8I6ySgMAEiPoA3DxO/nLeqiv7w7d1707kvKoV4/7SWjh4ui+kHb052xlf/G196q2EKx31w==
-
-"@mui/joy@^5.0.0-alpha.52":
-  version "5.0.0-alpha.52"
-  resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-alpha.52.tgz#5fbab73e51396e1c866134862d69c053707a3cf2"
-  integrity sha512-HJw00MDgylL95TyFR2Q3ipBvfK20GVOoYPmzc59piu5587aWg2pJs4VEGJ2VgkY/mbsxXBYl0JYT93JRz6RL9A==
-  dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@mui/base" "5.0.0-alpha.104"
-    "@mui/core-downloads-tracker" "^5.10.12"
-    "@mui/system" "^5.10.12"
-    "@mui/types" "^7.2.0"
-    "@mui/utils" "^5.10.9"
+"@mui/core-downloads-tracker@^5.10.16":
+  version "5.10.16"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz#4c2d36bcab58cb6250596b20601f499bfadc0642"
+  integrity sha512-eK9+olw2ZbXX+vGrtKnN01/vLP1aX0Lq0xok35bqWM1aB93Dcmky/xPNf8h31oJ/C+IzJBjZaZMEDzVZg4Qc0A==
+
+"@mui/joy@^5.0.0-alpha.56":
+  version "5.0.0-alpha.56"
+  resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-alpha.56.tgz#34346df0e6ab14bb464c7f706ab58b4374be54e6"
+  integrity sha512-xl6KrHxQEqIkId9HI6V0KN4YRvXsZY1TfP09GT0vS8MZ9nvbwxHLuOpzwHzlQ6BTU1LqfzJDSNooiaU2J5W3TA==
+  dependencies:
+    "@babel/runtime" "^7.20.1"
+    "@mui/base" "5.0.0-alpha.108"
+    "@mui/core-downloads-tracker" "^5.10.16"
+    "@mui/system" "^5.10.16"
+    "@mui/types" "^7.2.2"
+    "@mui/utils" "^5.10.16"
    clsx "^1.2.1"
    csstype "^3.1.1"
    prop-types "^15.8.1"
    react-is "^18.2.0"

-"@mui/private-theming@^5.10.9":
-  version "5.10.9"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.9.tgz#c427bfa736455703975cdb108dbde6a174ba7971"
-  integrity sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg==
+"@mui/private-theming@^5.10.16":
+  version "5.10.16"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.16.tgz#181ab7568a3cf0c6b12cc12f5a91aeb4509df1ce"
+  integrity sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==
  dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@mui/utils" "^5.10.9"
+    "@babel/runtime" "^7.20.1"
+    "@mui/utils" "^5.10.16"
    prop-types "^15.8.1"

-"@mui/styled-engine@^5.10.8":
-  version "5.10.8"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.8.tgz#2db411e4278f06f70ccb6b5cd56ace67109513f6"
-  integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==
+"@mui/styled-engine@^5.10.16":
+  version "5.10.16"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.16.tgz#52a2d31e4012958d21c92b42acaca4c3e79841b4"
+  integrity sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==
  dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@emotion/cache" "^11.10.3"
+    "@babel/runtime" "^7.20.1"
+    "@emotion/cache" "^11.10.5"
    csstype "^3.1.1"
    prop-types "^15.8.1"

-"@mui/system@^5.10.12":
-  version "5.10.12"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.12.tgz#fd97a6fd75995038c1c34e9c5b6eb4ff9b9eee56"
-  integrity sha512-9DcN3hF2KTTTpZ0K5Tn20B+Tz7tIqDmJLk1M6P0CYoAGUN/xrcF/6dn1zZ829rxE5tmauoDUekTfomrvPsvlSQ==
+"@mui/system@^5.10.16":
+  version "5.10.16"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.16.tgz#2b07d78eb5e337463045b81a59f718795807fdc7"
+  integrity sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==
  dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@mui/private-theming" "^5.10.9"
-    "@mui/styled-engine" "^5.10.8"
-    "@mui/types" "^7.2.0"
-    "@mui/utils" "^5.10.9"
+    "@babel/runtime" "^7.20.1"
+    "@mui/private-theming" "^5.10.16"
+    "@mui/styled-engine" "^5.10.16"
+    "@mui/types" "^7.2.2"
+    "@mui/utils" "^5.10.16"
    clsx "^1.2.1"
    csstype "^3.1.1"
    prop-types "^15.8.1"

-"@mui/types@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.0.tgz#91380c2d42420f51f404120f7a9270eadd6f5c23"
-  integrity sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==
+"@mui/types@^7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.2.tgz#723f6d40c25c89c2e0352a7e51794e8eb77cdbe3"
+  integrity sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==

-"@mui/utils@^5.10.9":
-  version "5.10.9"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.9.tgz#9dc455f9230f43eeb81d96a9a4bdb3855bb9ea39"
-  integrity sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==
+"@mui/utils@^5.10.16":
+  version "5.10.16"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.16.tgz#7a981444855968ebdb1830d76e298d1ac47eaaf6"
+  integrity sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==
  dependencies:
-    "@babel/runtime" "^7.19.0"
+    "@babel/runtime" "^7.20.1"
    "@types/prop-types" "^15.7.5"
    "@types/react-is" "^16.7.1 || ^17.0.0"
    prop-types "^15.8.1"
@ -3773,6 +3780,11 @@ regenerator-runtime@^0.13.10:
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==

+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4:
  version "0.13.9"
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"