@@ -203,7 +204,7 @@ const UpdateAccountDialog: React.FC
= ({ destroy }: Props) => {
onChange={handleDescriptionChanged}
/>
-
-
+
{!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"))}>
+
- setVisibleMonthString(dayjs(visibleMonthString).add(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})
-
+
+