From c5200ca31b91c0de8bdbf3ddd1bc39f8c5972485 Mon Sep 17 00:00:00 2001 From: boojack Date: Wed, 30 Nov 2022 20:34:16 +0800 Subject: [PATCH] feat: dark mode for dialogs (#643) --- web/index.html | 3 +- web/package.json | 2 +- web/src/App.tsx | 12 +- web/src/components/AboutSiteDialog.tsx | 14 +- web/src/components/Dialog/BaseDialog.tsx | 10 +- web/src/components/GitHubBadge.tsx | 12 +- web/src/components/Memo.tsx | 4 - web/src/components/ResourcesDialog.tsx | 8 +- .../components/ResourcesSelectorDialog.tsx | 6 +- web/src/components/Settings/MemberSection.tsx | 39 ++---- web/src/components/Settings/SystemSection.tsx | 1 + web/src/components/ShareMemoImageDialog.tsx | 4 +- web/src/components/UserBanner.tsx | 8 +- web/src/components/common/Dropdown.tsx | 2 +- web/src/css/tailwind.css | 4 +- web/src/less/base-dialog.less | 4 +- web/src/less/common/date-picker.less | 19 +-- web/src/less/create-shortcut-dialog.less | 4 +- web/src/less/daily-memo.less | 6 +- web/src/less/daily-review-dialog.less | 10 +- web/src/less/github-badge.less | 15 --- web/src/less/loading.less | 11 -- web/src/less/memo-editor.less | 7 +- web/src/less/memo.less | 4 - web/src/less/resources-dialog.less | 4 +- web/src/less/setting-dialog.less | 18 +-- web/src/less/settings/member-section.less | 10 +- web/src/less/settings/my-account-section.less | 4 +- web/src/less/share-memo-image-dialog.less | 34 ++--- web/src/locales/en.json | 2 +- web/src/locales/fr.json | 2 +- web/src/locales/vi.json | 2 +- web/src/locales/zh.json | 2 +- web/src/main.tsx | 13 +- web/src/pages/Explore.tsx | 3 - web/src/pages/Home.tsx | 3 - web/src/pages/Loading.tsx | 7 +- web/src/pages/MemoDetail.tsx | 3 - web/yarn.lock | 122 ++++++++++-------- 39 files changed, 186 insertions(+), 252 deletions(-) delete mode 100644 web/src/less/github-badge.less delete mode 100644 web/src/less/loading.less diff --git a/web/index.html b/web/index.html index d461a35f..41484ff6 100644 --- a/web/index.html +++ b/web/index.html @@ -3,7 +3,8 @@ - + + Memos diff --git a/web/package.json b/web/package.json index f9a8da43..a0424c4d 100644 --- 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", diff --git a/web/src/App.tsx b/web/src/App.tsx index 699857f0..f8b0fec0 100644 --- 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 ( - - }> - - - + }> + + ); } diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx index f3e48ca1..8c159ddd 100644 --- a/web/src/components/AboutSiteDialog.tsx +++ b/web/src/components/AboutSiteDialog.tsx @@ -18,27 +18,27 @@ const AboutSiteDialog: React.FC = ({ destroy }: Props) => { return ( <>
-

- 🤠 - {t("common.about")} -

+

{t("common.about")}

- +

+ + memos +

{t("slogan")}


- <> + {t("common.version")}: {profile.version}-{profile.mode} 🎉 - +
diff --git a/web/src/components/Dialog/BaseDialog.tsx b/web/src/components/Dialog/BaseDialog.tsx index 7d92fa6b..8bad6130 100644 --- 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( const Fragment = ( - - - + + + + + ); diff --git a/web/src/components/GitHubBadge.tsx b/web/src/components/GitHubBadge.tsx index 327be363..bc912a4d 100644 --- 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 ( - -
- + +
+ Star
-
{starCount || ""}
+
{starCount || ""}
 ); }; diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 9dd80d4a..283c3530 100644 --- 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; diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx index 1c9a7493..259e7aa7 100644 --- a/web/src/components/ResourcesDialog.tsx +++ b/web/src/components/ResourcesDialog.tsx @@ -201,25 +201,25 @@ const ResourcesDialog: React.FC = (props: Props) => { actions={ <> +
-
+
{t("setting.member-list")}
-
-
-
- - -
-
-
ID {t("common.username")}
- {showUserList.map((user) => ( + {userList.map((user) => (
{user.id} {user.username} @@ -197,14 +174,14 @@ const PreferencesSection = () => { actions={ <> {user.rowStatus === "NORMAL" ? (