From 963706aebd3bba2e6a870a3c150cf2913e765fe8 Mon Sep 17 00:00:00 2001 From: Steven Date: Sat, 26 Oct 2024 21:36:05 +0800 Subject: [PATCH] refactor: update button source --- web/index.html | 4 +- web/package.json | 2 +- web/pnpm-lock.yaml | 16 ++- .../components/ChangeMemberPasswordDialog.tsx | 9 +- web/src/components/ChangePasswordDialog.tsx | 116 ------------------ .../components/CreateAccessTokenDialog.tsx | 11 +- .../CreateIdentityProviderDialog.tsx | 11 +- web/src/components/CreateWebhookDialog.tsx | 11 +- .../ExploreSidebar/ExploreSidebarDrawer.tsx | 7 +- .../HomeSidebar/HomeSidebarDrawer.tsx | 7 +- .../MemoDetailSidebarDrawer.tsx | 7 +- .../ActionButton/AddMemoRelationPopover.tsx | 9 +- .../ActionButton/LocationSelector.tsx | 9 +- .../MemoEditor/ActionButton/MarkdownMenu.tsx | 8 +- .../MemoEditor/ActionButton/TagSelector.tsx | 7 +- .../ActionButton/UploadResourceButton.tsx | 6 +- web/src/components/MemoEditor/index.tsx | 18 ++- web/src/components/NavigationDrawer.tsx | 7 +- .../PagedMemoList/PagedMemoList.tsx | 11 +- web/src/components/PasswordSignInForm.tsx | 11 +- web/src/components/RenameTagDialog.tsx | 11 +- .../Settings/AccessTokenSection.tsx | 16 ++- web/src/components/Settings/MemberSection.tsx | 7 +- .../Settings/MemoRelatedSettings.tsx | 5 +- .../components/Settings/MyAccountSection.tsx | 11 +- web/src/components/Settings/SSOSection.tsx | 7 +- .../components/Settings/StorageSection.tsx | 5 +- .../components/Settings/WebhookSection.tsx | 12 +- .../components/Settings/WorkspaceSection.tsx | 7 +- web/src/components/UpdateAccountDialog.tsx | 9 +- .../UpdateCustomizedProfileDialog.tsx | 13 +- web/src/components/UserBanner.tsx | 6 +- web/src/components/UserStatisticsView.tsx | 19 ++- web/src/components/ui/Popover.tsx | 2 +- web/src/css/global.css | 14 --- web/src/css/tailwind.css | 64 ++-------- web/src/layouts/RootLayout.tsx | 10 +- web/src/main.tsx | 2 +- web/src/pages/MemoDetail.tsx | 20 ++- web/src/pages/Resources.tsx | 7 +- web/src/pages/SignIn.tsx | 8 +- web/src/pages/SignUp.tsx | 11 +- web/src/pages/UserProfile.tsx | 10 +- web/tailwind.config.js | 63 +--------- 44 files changed, 209 insertions(+), 417 deletions(-) delete mode 100644 web/src/components/ChangePasswordDialog.tsx delete mode 100644 web/src/css/global.css diff --git a/web/index.html b/web/index.html index 2bbab70e7..faa0ef6e2 100644 --- a/web/index.html +++ b/web/index.html @@ -18,8 +18,8 @@ } - -
+ +
diff --git a/web/package.json b/web/package.json index 23b006d20..758c8e70c 100644 --- a/web/package.json +++ b/web/package.json @@ -19,7 +19,7 @@ "@mui/joy": "5.0.0-beta.48", "@radix-ui/react-popover": "^1.1.2", "@reduxjs/toolkit": "^2.3.0", - "@usememos/mui": "0.0.1-alpha.6", + "@usememos/mui": "0.0.1-alpha.10", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "copy-to-clipboard": "^3.3.3", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index e47d3f66a..79be49d0a 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -39,8 +39,8 @@ importers: specifier: ^2.3.0 version: 2.3.0(react-redux@9.1.2(@types/react@18.3.12)(react@18.3.1)(redux@5.0.1))(react@18.3.1) '@usememos/mui': - specifier: 0.0.1-alpha.6 - version: 0.0.1-alpha.6(lucide-react@0.453.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 0.0.1-alpha.10 + version: 0.0.1-alpha.10(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14) class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -1409,12 +1409,15 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} - '@usememos/mui@0.0.1-alpha.6': - resolution: {integrity: sha512-CVE3kQ/Uk+T3Zp8jcEOWR4syS6hIxVrQ9UgwpnOiR8d3OEghRFbZBQ6hs4C0sEefIPWS5xsZiEKa0E4BIZezBw==} + '@usememos/mui@0.0.1-alpha.10': + resolution: {integrity: sha512-jyEQ4sgmYCxOWEyuUat7MqQN7Gy4PohQxnLvIje0upqu2zT2AaI0GhOPs/t2HkYK09tFXLAVnhp2I+6jBBhfIg==} peerDependencies: lucide-react: ^0.453.0 + postcss: ^8.4.47 react: '>=17.0.0' react-dom: '>=17.0.0' + tailwind-merge: ^2.5.4 + tailwindcss: ^3.4.14 '@vitejs/plugin-react@4.3.3': resolution: {integrity: sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==} @@ -4639,11 +4642,14 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@usememos/mui@0.0.1-alpha.6(lucide-react@0.453.0(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@usememos/mui@0.0.1-alpha.10(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)': dependencies: lucide-react: 0.453.0(react@18.3.1) + postcss: 8.4.47 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + tailwind-merge: 2.5.4 + tailwindcss: 3.4.14 '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.8.0)(less@4.2.0))': dependencies: diff --git a/web/src/components/ChangeMemberPasswordDialog.tsx b/web/src/components/ChangeMemberPasswordDialog.tsx index c90418a6e..f1aafe41e 100644 --- a/web/src/components/ChangeMemberPasswordDialog.tsx +++ b/web/src/components/ChangeMemberPasswordDialog.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input } from "@mui/joy"; +import { Input } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -70,9 +71,9 @@ const ChangeMemberPasswordDialog: React.FC = (props: Props) => {

{t("setting.account-section.change-password")} ({user.nickname})

- +

{t("auth.new-password")}

@@ -92,7 +93,7 @@ const ChangeMemberPasswordDialog: React.FC = (props: Props) => { onChange={handleNewPasswordAgainChanged} />
- - -
-
- - ); -}; - -function showChangePasswordDialog() { - generateDialog( - { - className: "change-password-dialog", - dialogName: "change-password-dialog", - }, - ChangePasswordDialog, - ); -} - -export default showChangePasswordDialog; diff --git a/web/src/components/CreateAccessTokenDialog.tsx b/web/src/components/CreateAccessTokenDialog.tsx index e66b4a305..0cc22523c 100644 --- a/web/src/components/CreateAccessTokenDialog.tsx +++ b/web/src/components/CreateAccessTokenDialog.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input, Radio, RadioGroup } from "@mui/joy"; +import { Input, Radio, RadioGroup } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import React, { useState } from "react"; import { toast } from "react-hot-toast"; @@ -86,9 +87,9 @@ const CreateAccessTokenDialog: React.FC = (props: Props) => { <>

Create access token

- destroy()}> +
@@ -118,10 +119,10 @@ const CreateAccessTokenDialog: React.FC = (props: Props) => {
- -
diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx index 439d59b6c..67574e496 100644 --- a/web/src/components/CreateIdentityProviderDialog.tsx +++ b/web/src/components/CreateIdentityProviderDialog.tsx @@ -1,4 +1,5 @@ -import { Button, Divider, IconButton, Input, Option, Select, Typography } from "@mui/joy"; +import { Divider, Input, Option, Select, Typography } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -244,9 +245,9 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => { <>

{t(isCreating ? "setting.sso-section.create-sso" : "setting.sso-section.update-sso")}

- +
{isCreating && ( @@ -420,10 +421,10 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => { )}
- -
diff --git a/web/src/components/CreateWebhookDialog.tsx b/web/src/components/CreateWebhookDialog.tsx index 57d6591ca..03d5583d9 100644 --- a/web/src/components/CreateWebhookDialog.tsx +++ b/web/src/components/CreateWebhookDialog.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input } from "@mui/joy"; +import { Input } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import React, { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -96,9 +97,9 @@ const CreateWebhookDialog: React.FC = (props: Props) => { <>

{isCreating ? "Create webhook" : "Edit webhook"}

- destroy()}> +
@@ -130,10 +131,10 @@ const CreateWebhookDialog: React.FC = (props: Props) => {
- -
diff --git a/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx b/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx index b80ac6c10..10506fba7 100644 --- a/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx +++ b/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx @@ -1,4 +1,5 @@ -import { Drawer, IconButton } from "@mui/joy"; +import { Drawer } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { SearchIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; @@ -22,9 +23,9 @@ const ExploreSidebarDrawer = () => { return ( <> - +
diff --git a/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx index 21bf1ed4f..693a3ce9d 100644 --- a/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx +++ b/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx @@ -1,4 +1,5 @@ -import { Drawer, IconButton } from "@mui/joy"; +import { Drawer } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { SearchIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; @@ -22,9 +23,9 @@ const HomeSidebarDrawer = () => { return ( <> - +
diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx index 7dd56a73a..22fb9cbce 100644 --- a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx +++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx @@ -1,4 +1,5 @@ -import { Drawer, IconButton } from "@mui/joy"; +import { Drawer } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { GanttChartIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; @@ -26,9 +27,9 @@ const MemoDetailSidebarDrawer = ({ memo }: Props) => { return ( <> - +
diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx index 55ee26e59..076fa1905 100644 --- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx +++ b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx @@ -1,4 +1,5 @@ -import { Autocomplete, AutocompleteOption, Button, Checkbox, Chip, IconButton } from "@mui/joy"; +import { Autocomplete, AutocompleteOption, Checkbox, Chip } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { uniqBy } from "lodash-es"; import { LinkIcon } from "lucide-react"; import React, { useContext, useState } from "react"; @@ -129,9 +130,9 @@ const AddMemoRelationPopover = (props: Props) => { return ( - +
@@ -173,7 +174,7 @@ const AddMemoRelationPopover = (props: Props) => { />
setEmbedded(e.target.checked)} /> -
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx index 8ef609a27..8647aa7a1 100644 --- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx +++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input } from "@mui/joy"; +import { Input } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { LatLng } from "leaflet"; import { MapPinIcon, XIcon } from "lucide-react"; import { useEffect, useState } from "react"; @@ -94,7 +95,7 @@ const LocationSelector = (props: Props) => { return ( - +
@@ -125,7 +126,7 @@ const LocationSelector = (props: Props) => { /> ); }; diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx index cb16c9160..1d497d7be 100644 --- a/web/src/components/MemoEditor/index.tsx +++ b/web/src/components/MemoEditor/index.tsx @@ -1,6 +1,7 @@ -import { Select, Option, Button, Divider } from "@mui/joy"; +import { Select, Option, Divider } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { isEqual } from "lodash-es"; -import { SendIcon } from "lucide-react"; +import { LoaderIcon, SendIcon } from "lucide-react"; import React, { useEffect, useMemo, useRef, useState } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; @@ -442,7 +443,7 @@ const MemoEditor = (props: Props) => {
e.stopPropagation()}> -
+
@@ -482,18 +483,13 @@ const MemoEditor = (props: Props) => {
{props.onCancel && ( - )} -
diff --git a/web/src/components/NavigationDrawer.tsx b/web/src/components/NavigationDrawer.tsx index efc28c8d6..596d414ad 100644 --- a/web/src/components/NavigationDrawer.tsx +++ b/web/src/components/NavigationDrawer.tsx @@ -1,4 +1,5 @@ -import { Drawer, IconButton } from "@mui/joy"; +import { Drawer } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { MenuIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; @@ -22,9 +23,9 @@ const NavigationDrawer = () => { return ( <> - +
diff --git a/web/src/components/PagedMemoList/PagedMemoList.tsx b/web/src/components/PagedMemoList/PagedMemoList.tsx index 8f404fed2..5f6617aaa 100644 --- a/web/src/components/PagedMemoList/PagedMemoList.tsx +++ b/web/src/components/PagedMemoList/PagedMemoList.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { ArrowDownIcon, LoaderIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts"; @@ -62,14 +62,9 @@ const PagedMemoList = (props: Props) => { )} {!state.isRequesting && state.nextPageToken && (
-
)} diff --git a/web/src/components/PasswordSignInForm.tsx b/web/src/components/PasswordSignInForm.tsx index 64584333e..ce70ea15d 100644 --- a/web/src/components/PasswordSignInForm.tsx +++ b/web/src/components/PasswordSignInForm.tsx @@ -1,4 +1,6 @@ -import { Button, Checkbox, Input } from "@mui/joy"; +import { Checkbox, Input } from "@mui/joy"; +import { Button } from "@usememos/mui"; +import { LoaderIcon } from "lucide-react"; import { ClientError } from "nice-grpc-web"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -108,14 +110,15 @@ const PasswordSignInForm = () => {
diff --git a/web/src/components/RenameTagDialog.tsx b/web/src/components/RenameTagDialog.tsx index 4db50121a..e388d6053 100644 --- a/web/src/components/RenameTagDialog.tsx +++ b/web/src/components/RenameTagDialog.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input, List, ListItem } from "@mui/joy"; +import { Input, List, ListItem } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import React, { useState } from "react"; import { toast } from "react-hot-toast"; @@ -54,9 +55,9 @@ const RenameTagDialog: React.FC = (props: Props) => { <>

{"Rename tag"}

- destroy()}> +
@@ -82,10 +83,10 @@ const RenameTagDialog: React.FC = (props: Props) => {
- -
diff --git a/web/src/components/Settings/AccessTokenSection.tsx b/web/src/components/Settings/AccessTokenSection.tsx index b25ad9fb6..6d48017da 100644 --- a/web/src/components/Settings/AccessTokenSection.tsx +++ b/web/src/components/Settings/AccessTokenSection.tsx @@ -1,4 +1,4 @@ -import { Button, IconButton } from "@mui/joy"; +import { Button } from "@usememos/mui"; import copy from "copy-to-clipboard"; import { ClipboardIcon, TrashIcon } from "lucide-react"; import { useEffect, useState } from "react"; @@ -63,8 +63,7 @@ const AccessTokenSection = () => {
{userAccessToken.description} @@ -115,16 +114,15 @@ const AccessTokenSection = () => { {userAccessToken.expiresAt?.toLocaleString() ?? "Never"} - { handleDeleteAccessToken(userAccessToken.accessToken); }} > - - + + ))} diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx index 11de27d44..0d7bafae0 100644 --- a/web/src/components/Settings/MemberSection.tsx +++ b/web/src/components/Settings/MemberSection.tsx @@ -1,4 +1,5 @@ -import { Button, Dropdown, Input, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy"; +import { Dropdown, Input, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { sortBy } from "lodash-es"; import { MoreVerticalIcon } from "lucide-react"; import React, { useEffect, useState } from "react"; @@ -158,7 +159,9 @@ const MemberSection = () => {
- +
diff --git a/web/src/components/Settings/MemoRelatedSettings.tsx b/web/src/components/Settings/MemoRelatedSettings.tsx index 4dd703a83..2809cdb36 100644 --- a/web/src/components/Settings/MemoRelatedSettings.tsx +++ b/web/src/components/Settings/MemoRelatedSettings.tsx @@ -1,4 +1,5 @@ -import { Button, Input, Switch, Select, Option, Chip, ChipDelete } from "@mui/joy"; +import { Input, Switch, Select, Option, Chip, ChipDelete } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { isEqual, uniq } from "lodash-es"; import { CheckIcon } from "lucide-react"; import { useState } from "react"; @@ -179,7 +180,7 @@ const MemoRelatedSettings = () => {
-
diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx index bc4f2aae1..ba70f4b45 100644 --- a/web/src/components/Settings/MyAccountSection.tsx +++ b/web/src/components/Settings/MyAccountSection.tsx @@ -1,8 +1,9 @@ -import { Button, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy"; +import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { MoreVerticalIcon, PenLineIcon } from "lucide-react"; import useCurrentUser from "@/hooks/useCurrentUser"; import { useTranslate } from "@/utils/i18n"; -import showChangePasswordDialog from "../ChangePasswordDialog"; +import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog"; import showUpdateAccountDialog from "../UpdateAccountDialog"; import UserAvatar from "../UserAvatar"; import AccessTokenSection from "./AccessTokenSection"; @@ -25,18 +26,18 @@ const MyAccountSection = () => {
- - - {t("setting.account-section.change-password")} + showChangeMemberPasswordDialog(user)}>{t("setting.account-section.change-password")}
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx index 95c169310..cb535503b 100644 --- a/web/src/components/Settings/SSOSection.tsx +++ b/web/src/components/Settings/SSOSection.tsx @@ -1,4 +1,5 @@ -import { Button, Divider, Dropdown, List, ListItem, Menu, MenuButton, MenuItem } from "@mui/joy"; +import { Divider, Dropdown, List, ListItem, Menu, MenuButton, MenuItem } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { MoreVerticalIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; @@ -42,7 +43,9 @@ const SSOSection = () => { {t("setting.sso-section.sso-list")}
- +
{identityProviderList.map((identityProvider) => ( diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx index c01d7b571..65064b4bf 100644 --- a/web/src/components/Settings/StorageSection.tsx +++ b/web/src/components/Settings/StorageSection.tsx @@ -1,4 +1,5 @@ -import { Button, Divider, Input, List, ListItem, Radio, RadioGroup, Tooltip } from "@mui/joy"; +import { Divider, Input, List, ListItem, Radio, RadioGroup, Tooltip } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { isEqual } from "lodash-es"; import { HelpCircleIcon } from "lucide-react"; import { useMemo, useState } from "react"; @@ -183,7 +184,7 @@ const StorageSection = () => { )}
-
diff --git a/web/src/components/Settings/WebhookSection.tsx b/web/src/components/Settings/WebhookSection.tsx index 160df6986..4eeb181c7 100644 --- a/web/src/components/Settings/WebhookSection.tsx +++ b/web/src/components/Settings/WebhookSection.tsx @@ -1,4 +1,4 @@ -import { Button, IconButton } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { ExternalLinkIcon, TrashIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; @@ -47,8 +47,7 @@ const WebhookSection = () => {
))} diff --git a/web/src/components/Settings/WorkspaceSection.tsx b/web/src/components/Settings/WorkspaceSection.tsx index e997cdf3d..c605d620a 100644 --- a/web/src/components/Settings/WorkspaceSection.tsx +++ b/web/src/components/Settings/WorkspaceSection.tsx @@ -1,4 +1,5 @@ -import { Button, Select, Textarea, Option, Divider, Switch } from "@mui/joy"; +import { Select, Textarea, Option, Divider, Switch } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { isEqual } from "lodash-es"; import { ExternalLinkIcon } from "lucide-react"; import { useEffect, useState } from "react"; @@ -57,7 +58,7 @@ const WorkspaceSection = () => { {t("setting.system-section.server-name")}:{" "} {workspaceGeneralSetting.customProfile?.title || "Memos"}
- @@ -147,7 +148,7 @@ const WorkspaceSection = () => {
-
diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx index 8deb839ef..64c6950a1 100644 --- a/web/src/components/UpdateAccountDialog.tsx +++ b/web/src/components/UpdateAccountDialog.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Input, Textarea } from "@mui/joy"; +import { Input, Textarea } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { isEqual } from "lodash-es"; import { XIcon } from "lucide-react"; import { useState } from "react"; @@ -146,9 +147,9 @@ const UpdateAccountDialog: React.FC = ({ destroy }: Props) => { <>

{t("setting.account-section.update-information")}

- +
@@ -203,7 +204,7 @@ const UpdateAccountDialog: React.FC = ({ destroy }: Props) => { onChange={handleDescriptionChanged} />
-

{t("setting.system-section.server-name")}

@@ -123,11 +124,13 @@ const UpdateCustomizedProfileDialog: React.FC = ({ destroy }: Props) => { {t("common.restore")}
-
+
- +
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx index f903c8259..7aad852f3 100644 --- a/web/src/components/UserBanner.tsx +++ b/web/src/components/UserBanner.tsx @@ -24,7 +24,7 @@ const UserBanner = (props: Props) => { const workspaceGeneralSetting = workspaceSettingStore.getWorkspaceSettingByKey(WorkspaceSettingKey.GENERAL).generalSetting || WorkspaceGeneralSetting.fromPartial({}); const title = (user ? user.nickname || user.username : workspaceGeneralSetting.customProfile?.title) || "Memos"; - const avatarUrl = (user ? user.avatarUrl : workspaceGeneralSetting.customProfile?.logoUrl) || "/logo.webp"; + const avatarUrl = (user ? user.avatarUrl : workspaceGeneralSetting.customProfile?.logoUrl) || "/full-logo.webp"; const handleSignOut = async () => { await authServiceClient.signOut({}); @@ -37,11 +37,11 @@ const UserBanner = (props: Props) => {
- + {!collapsed && {title}}
diff --git a/web/src/components/UserStatisticsView.tsx b/web/src/components/UserStatisticsView.tsx index c3c30cd06..60775d94e 100644 --- a/web/src/components/UserStatisticsView.tsx +++ b/web/src/components/UserStatisticsView.tsx @@ -1,4 +1,5 @@ -import { Divider, IconButton, Tooltip } from "@mui/joy"; +import { Divider, Tooltip } from "@mui/joy"; +import { Button } from "@usememos/mui"; import clsx from "clsx"; import dayjs from "dayjs"; import { countBy } from "lodash-es"; @@ -81,12 +82,20 @@ const UserStatisticsView = () => { - setVisibleMonthString(dayjs(visibleMonthString).subtract(1, "month").format("YYYY-MM"))}> + +
diff --git a/web/src/components/ui/Popover.tsx b/web/src/components/ui/Popover.tsx index 80977cca9..3478b0dec 100644 --- a/web/src/components/ui/Popover.tsx +++ b/web/src/components/ui/Popover.tsx @@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={clsx( - "z-[2000] w-auto rounded-md border dark:border-zinc-800 bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-[2000] w-auto rounded-md bg-white dark:bg-zinc-900 border dark:border-zinc-800 bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} diff --git a/web/src/css/global.css b/web/src/css/global.css deleted file mode 100644 index 78bbb2ae7..000000000 --- a/web/src/css/global.css +++ /dev/null @@ -1,14 +0,0 @@ -body { - @apply text-base w-full min-h-[100svh] bg-zinc-100 dark:bg-zinc-900; -} - -#root { - @apply relative w-full min-h-full; -} -html.dark { - color-scheme: dark; - scrollbar-color: hsla(0, 0%, 100%, 0.4) hsla(0, 0%, 100%, 0.029); -} -html.light { - color-scheme: light; -} diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css index 00289aaf7..979ac50e8 100644 --- a/web/src/css/tailwind.css +++ b/web/src/css/tailwind.css @@ -2,63 +2,6 @@ @tailwind components; @tailwind utilities; -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 10% 3.9%; - --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - } - - .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } -} - @layer utilities { .hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ @@ -75,3 +18,10 @@ word-break: normal; } } + +html.dark { + color-scheme: dark; +} +html.light { + color-scheme: light; +} diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx index d1394fd47..68c48c42c 100644 --- a/web/src/layouts/RootLayout.tsx +++ b/web/src/layouts/RootLayout.tsx @@ -1,4 +1,5 @@ -import { Button, IconButton, Tooltip } from "@mui/joy"; +import { Tooltip } from "@mui/joy"; +import { Button } from "@usememos/mui"; import clsx from "clsx"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import { Suspense, useEffect, useState } from "react"; @@ -55,14 +56,15 @@ const RootLayout = () => { onClick={() => setCollapsed(!collapsed)} > {!collapsed ? ( - ) : ( - + )} diff --git a/web/src/main.tsx b/web/src/main.tsx index 5322ad574..54a678551 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,11 +1,11 @@ import "@github/relative-time-element"; import { CssVarsProvider } from "@mui/joy"; +import "@usememos/mui/dist/index.css"; import "leaflet/dist/leaflet.css"; import { createRoot } from "react-dom/client"; import { Toaster } from "react-hot-toast"; import { Provider } from "react-redux"; import { RouterProvider } from "react-router-dom"; -import "./css/global.css"; import "./css/tailwind.css"; import "./helpers/polyfill"; import "./i18n"; diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx index 2d3fb6c7b..6766e2f63 100644 --- a/web/src/pages/MemoDetail.tsx +++ b/web/src/pages/MemoDetail.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mui/joy"; +import { Button } from "@usememos/mui"; import clsx from "clsx"; import { ArrowUpLeftFromCircleIcon, MessageCircleIcon } from "lucide-react"; import { ClientError } from "nice-grpc-web"; @@ -36,7 +36,7 @@ const MemoDetail = () => { const commentRelations = memo?.relations.filter((relation) => relation.relatedMemo?.name === memo.name && relation.type === MemoRelation_Type.COMMENT) || []; const comments = commentRelations.map((relation) => memoStore.getMemoByName(relation.memo!.name)).filter((memo) => memo) as any as Memo[]; - const showCreateCommentButton = workspaceMemoRelatedSetting.enableComment && currentUser; + const showCreateCommentButton = workspaceMemoRelatedSetting.enableComment && currentUser && !showCommentEditor; // Prepare memo. useEffect(() => { @@ -120,27 +120,23 @@ const MemoDetail = () => { {comments.length === 0 ? ( showCreateCommentButton && (
-
) ) : ( <> -
+
{t("memo.comment.self")} ({comments.length})
{showCreateCommentButton && ( - )}
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx index f6a7269b3..8f14ee551 100644 --- a/web/src/pages/Resources.tsx +++ b/web/src/pages/Resources.tsx @@ -1,4 +1,5 @@ -import { Divider, IconButton, Input, Tooltip } from "@mui/joy"; +import { Divider, Input, Tooltip } from "@mui/joy"; +import { Button } from "@usememos/mui"; import dayjs from "dayjs"; import { includes } from "lodash-es"; import { PaperclipIcon, SearchIcon, TrashIcon } from "lucide-react"; @@ -132,9 +133,9 @@ const Resources = () => { Unused resources ({unusedResources.length}) - +
{unusedResources.map((resource) => { diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx index c265b72e5..200e84f82 100644 --- a/web/src/pages/SignIn.tsx +++ b/web/src/pages/SignIn.tsx @@ -1,4 +1,5 @@ -import { Button, Divider } from "@mui/joy"; +import { Divider } from "@mui/joy"; +import { Button } from "@usememos/mui"; import { useEffect, useState } from "react"; import { toast } from "react-hot-toast"; import { Link } from "react-router-dom"; @@ -96,10 +97,9 @@ const SignIn = () => { {identityProviderList.map((identityProvider) => ( diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx index e422f7ac1..d75132995 100644 --- a/web/src/pages/UserProfile.tsx +++ b/web/src/pages/UserProfile.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mui/joy"; +import { Button } from "@usememos/mui"; import copy from "copy-to-clipboard"; import dayjs from "dayjs"; import { ExternalLinkIcon } from "lucide-react"; @@ -88,13 +88,9 @@ const UserProfile = () => { (user ? ( <>
-
diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 3d40ae4b3..295077453 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -2,33 +2,12 @@ /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], - content: ["./index.html", "./src/**/*.{ts,tsx}"], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], prefix: "", theme: { - fontSize: { - xs: ".75rem", - sm: ".875rem", - base: "1rem", - lg: "1.125rem", - xl: "1.25rem", - "2xl": "1.5rem", - "3xl": "1.875rem", - "4xl": "2.25rem", - "5xl": "2.5rem", - "6xl": "3rem", - }, - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, extend: { spacing: { - 112: "28rem", 128: "32rem", - 180: "45rem", }, zIndex: { 1: "1", @@ -41,46 +20,6 @@ module.exports = { gridTemplateRows: { 7: "repeat(7, minmax(0, 1fr))", }, - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, }, }, plugins: [require("tailwindcss-animate")],