YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-24 06:30:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode for dialogs (#643)

Browse Source
This commit is contained in:
boojack 2022-11-30 20:34:16 +08:00 committed by GitHub
parent 1078132b12
commit c5200ca31b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 184 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/index.html
View File

@ -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>

2
web/package.json
View File

@ -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",

12
web/src/App.tsx
View File

@ -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>
);
}

14
web/src/components/AboutSiteDialog.tsx
View File

@ -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>
</>

10
web/src/components/Dialog/BaseDialog.tsx
View File

@ -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>
);

12
web/src/components/GitHubBadge.tsx
View File

@ -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>
);
};

4
web/src/components/Memo.tsx
View File

@ -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;

8
web/src/components/ResourcesDialog.tsx
View File

@ -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")}

6
web/src/components/ResourcesSelectorDialog.tsx
View File

@ -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">

39
web/src/components/Settings/MemberSection.tsx
View File

@ -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")}

1
web/src/components/Settings/SystemSection.tsx
View File

@ -130,6 +130,7 @@ const SystemSection = () => {
</div>
<Textarea
className="w-full"
color="neutral"
sx={{
fontFamily: "monospace",
fontSize: "14px",

4
web/src/components/ShareMemoImageDialog.tsx
View File

@ -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) => {

8
web/src/components/UserBanner.tsx
View File

@ -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")}

2
web/src/components/common/Dropdown.tsx
View File

@ -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>
)}

4
web/src/css/tailwind.css
View File

@ -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;
}
}

4
web/src/less/base-dialog.less
View File

@ -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;
}
}

19
web/src/less/common/date-picker.less
View File

@ -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 {

4
web/src/less/create-shortcut-dialog.less
View File

@ -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;
}
}
}

6
web/src/less/daily-memo.less
View File

@ -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;
}
}
}

10
web/src/less/daily-review-dialog.less
View File

@ -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 {

15
web/src/less/github-badge.less
View File

@ -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;
}
}

11
web/src/less/loading.less
View File

@ -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;
}
}
}

7
web/src/less/memo-editor.less
View File

@ -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;

4
web/src/less/memo.less
View File

@ -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;
}

4
web/src/less/resources-dialog.less
View File

@ -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;

18
web/src/less/setting-dialog.less
View File

@ -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;
}

10
web/src/less/settings/member-section.less
View File

@ -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 {

4
web/src/less/settings/my-account-section.less
View File

@ -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;
}
}
}

34
web/src/less/share-memo-image-dialog.less
View File

@ -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;
}
}
}

2
web/src/locales/en.json
View File

@ -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.",

2
web/src/locales/fr.json
View File

@ -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.",

2
web/src/locales/vi.json
View File

@ -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.",

2
web/src/locales/zh.json
View File

@ -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 用户账号。",

13
web/src/main.tsx
View File

@ -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>
);

3
web/src/pages/Explore.tsx
View File

@ -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);

3
web/src/pages/Home.tsx
View File

@ -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);

7
web/src/pages/Loading.tsx
View File

@ -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>
);

3
web/src/pages/MemoDetail.tsx
View File

@ -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);

118
web/yarn.lock
View File

@ -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/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.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==
"@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.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"
"@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"