From 4d4325eba5bfdbf3fab5a4c55ab5533745140ca6 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 22 Oct 2025 20:21:58 +0800
Subject: [PATCH] chore: update component styles for consistency

---
 .../components/Inbox/MemoCommentMessage.tsx   |  2 +-
 web/src/components/MemoAttachmentListView.tsx |  2 +-
 web/src/components/MemoContent/Highlight.tsx  |  2 +-
 .../MemoDetailSidebarDrawer.tsx               |  2 +-
 .../MemoEditor/AttachmentListView.tsx         |  2 +-
 .../MemoEditor/RelationListView.tsx           |  2 +-
 web/src/components/MemoEditor/index.tsx       |  2 +-
 web/src/components/MemoRelationListView.tsx   |  2 +-
 web/src/components/ReactionView.tsx           |  2 +-
 web/src/themes/default-dark.css               |  2 +-
 web/src/themes/default.css                    |  2 +-
 web/src/themes/paper.css                      | 38 +++++++++----------
 12 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/web/src/components/Inbox/MemoCommentMessage.tsx b/web/src/components/Inbox/MemoCommentMessage.tsx
index f73ff944f..ef132ce8f 100644
--- a/web/src/components/Inbox/MemoCommentMessage.tsx
+++ b/web/src/components/Inbox/MemoCommentMessage.tsx
@@ -129,7 +129,7 @@ const MemoCommentMessage = observer(({ inbox }: Props) => {
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-primary text-primary bg-primary/10"
-            : "border-muted-foreground text-muted-foreground bg-popover",
+            : "border-muted-foreground text-muted-foreground bg-muted",
         )}
       >
         <TooltipProvider>
diff --git a/web/src/components/MemoAttachmentListView.tsx b/web/src/components/MemoAttachmentListView.tsx
index e169f20aa..bfa58b47a 100644
--- a/web/src/components/MemoAttachmentListView.tsx
+++ b/web/src/components/MemoAttachmentListView.tsx
@@ -58,7 +58,7 @@ const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[
       return (
         <video
           className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-popover transition-colors",
+            "cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-muted transition-colors",
             className,
           )}
           preload="metadata"
diff --git a/web/src/components/MemoContent/Highlight.tsx b/web/src/components/MemoContent/Highlight.tsx
index 8f9c36e35..c3ffc1e02 100644
--- a/web/src/components/MemoContent/Highlight.tsx
+++ b/web/src/components/MemoContent/Highlight.tsx
@@ -3,7 +3,7 @@ interface Props {
 }
 
 const Highlight: React.FC<Props> = ({ content }: Props) => {
-  return <mark className="bg-yellow-200 text-foreground px-1 rounded">{content}</mark>;
+  return <mark className="bg-accent text-accent-foreground px-1 rounded">{content}</mark>;
 };
 
 export default Highlight;
diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
index a6de33ec2..4f22b3bff 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
@@ -26,7 +26,7 @@ const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
           <GanttChartIcon className="w-5 h-auto text-muted-foreground" />
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-full sm:w-80 px-4 bg-popover">
+      <SheetContent side="right" className="w-full sm:w-80 px-4 bg-background">
         <MemoDetailSidebar className="py-4" memo={memo} parentPage={parentPage} />
       </SheetContent>
     </Sheet>
diff --git a/web/src/components/MemoEditor/AttachmentListView.tsx b/web/src/components/MemoEditor/AttachmentListView.tsx
index 94450d19d..cf64fbe29 100644
--- a/web/src/components/MemoEditor/AttachmentListView.tsx
+++ b/web/src/components/MemoEditor/AttachmentListView.tsx
@@ -38,7 +38,7 @@ const AttachmentListView = (props: Props) => {
               return (
                 <div
                   key={attachment.name}
-                  className="max-w-full w-auto flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-popover px-2 py-1 rounded hover:shadow-sm text-muted-foreground"
+                  className="max-w-full w-auto flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-muted px-2 py-1 rounded hover:shadow-sm text-muted-foreground"
                 >
                   <SortableItem id={attachment.name} className="flex flex-row justify-start items-center gap-x-1">
                     <AttachmentIcon attachment={attachment} className="w-4! h-4! opacity-100!" />
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
index 76c5e4a70..cad436e4c 100644
--- a/web/src/components/MemoEditor/RelationListView.tsx
+++ b/web/src/components/MemoEditor/RelationListView.tsx
@@ -37,7 +37,7 @@ const RelationListView = observer((props: Props) => {
             return (
               <div
                 key={memo.name}
-                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-popover hover:opacity-80 rounded-md text-sm p-1 px-2 text-muted-foreground cursor-pointer hover:line-through"
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-muted hover:opacity-80 rounded-md text-sm p-1 px-2 text-muted-foreground cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <LinkIcon className="w-4 h-auto shrink-0 opacity-80" />
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 1e9a1de70..921dda459 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -483,7 +483,7 @@ const MemoEditor = observer((props: Props) => {
     >
       <div
         className={cn(
-          "group relative w-full flex flex-col justify-start items-start bg-background px-4 pt-3 pb-2 rounded-lg border",
+          "group relative w-full flex flex-col justify-start items-start bg-card px-4 pt-3 pb-2 rounded-lg border",
           state.isDraggingFile ? "border-dashed border-muted-foreground cursor-copy" : "border-border cursor-auto",
           className,
         )}
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
index 53dd3b8cf..7699a1dbc 100644
--- a/web/src/components/MemoRelationListView.tsx
+++ b/web/src/components/MemoRelationListView.tsx
@@ -30,7 +30,7 @@ const MemoRelationListView = (props: Props) => {
   }
 
   return (
-    <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-popover rounded-lg border border-border">
+    <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-muted/50 rounded-lg border border-border">
       <div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
         {referencingMemoList.length > 0 && (
           <button
diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
index c97f4b757..ea64eff2e 100644
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@@ -73,7 +73,7 @@ const ReactionView = observer((props: Props) => {
               "h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1",
               "text-sm text-muted-foreground",
               currentUser && !readonly && "cursor-pointer",
-              hasReaction && "bg-popover border-border",
+              hasReaction && "bg-accent border-border",
             )}
             onClick={handleReactionClick}
           >
diff --git a/web/src/themes/default-dark.css b/web/src/themes/default-dark.css
index 16ea6a48e..ad94571d1 100644
--- a/web/src/themes/default-dark.css
+++ b/web/src/themes/default-dark.css
@@ -1,7 +1,7 @@
 :root {
   --background: oklch(0.25 0.003 270);
   --foreground: oklch(0.75 0.003 270);
-  --card: oklch(0.25 0.003 270);
+  --card: oklch(0.28 0.003 270);
   --card-foreground: oklch(0.75 0.003 270);
   --popover: oklch(0.28 0.003 270);
   --popover-foreground: oklch(0.72 0.003 270);
diff --git a/web/src/themes/default.css b/web/src/themes/default.css
index 47da71895..0681a6365 100644
--- a/web/src/themes/default.css
+++ b/web/src/themes/default.css
@@ -1,7 +1,7 @@
 :root {
   --background: oklch(0.9818 0.0054 95.0986);
   --foreground: oklch(0.2438 0.0269 95.7226);
-  --card: oklch(0.9818 0.0054 95.0986);
+  --card: oklch(1 0 0);
   --card-foreground: oklch(0.1908 0.002 106.5859);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.2671 0.0196 98.939);
diff --git a/web/src/themes/paper.css b/web/src/themes/paper.css
index 8e36a8f30..59afb9445 100644
--- a/web/src/themes/paper.css
+++ b/web/src/themes/paper.css
@@ -1,23 +1,23 @@
 :root {
-  --background: oklch(0.9765 0.0086 85.8732);
-  --foreground: oklch(0.2147 0.0157 68.4253);
-  --card: oklch(0.9765 0.0086 85.8732);
-  --card-foreground: oklch(0.1725 0.0098 72.3456);
-  --popover: oklch(0.9882 0.0049 81.2547);
-  --popover-foreground: oklch(0.2058 0.0127 70.1823);
-  --primary: oklch(0.4627 0.0471 52.3674);
-  --primary-foreground: oklch(0.9765 0.0086 85.8732);
-  --secondary: oklch(0.9412 0.0196 78.9456);
-  --secondary-foreground: oklch(0.3725 0.0235 65.7412);
-  --muted: oklch(0.9294 0.0216 82.1567);
-  --muted-foreground: oklch(0.5294 0.0157 69.8745);
-  --accent: oklch(0.9412 0.0196 78.9456);
-  --accent-foreground: oklch(0.2058 0.0127 70.1823);
-  --destructive: oklch(0.4118 0.0392 25.6734);
-  --destructive-foreground: oklch(0.9647 0.0078 88.2341);
-  --border: oklch(0.8824 0.0157 79.3627);
-  --input: oklch(0.8235 0.0196 82.1456);
-  --ring: oklch(0.4627 0.0471 52.3674);
+  --background: oklch(0.95 0.015 75);
+  --foreground: oklch(0.25 0.02 65);
+  --card: oklch(0.98 0.008 80);
+  --card-foreground: oklch(0.22 0.015 68);
+  --popover: oklch(0.98 0.008 80);
+  --popover-foreground: oklch(0.25 0.02 65);
+  --primary: oklch(0.45 0.08 45);
+  --primary-foreground: oklch(0.98 0.008 80);
+  --secondary: oklch(0.92 0.025 70);
+  --secondary-foreground: oklch(0.35 0.03 60);
+  --muted: oklch(0.90 0.025 75);
+  --muted-foreground: oklch(0.50 0.02 68);
+  --accent: oklch(0.88 0.035 55);
+  --accent-foreground: oklch(0.25 0.02 65);
+  --destructive: oklch(0.48 0.15 25);
+  --destructive-foreground: oklch(0.98 0.008 80);
+  --border: oklch(0.85 0.025 72);
+  --input: oklch(0.80 0.03 75);
+  --ring: oklch(0.45 0.08 45);
   --chart-1: oklch(0.5686 0.0549 42.7834);
   --chart-2: oklch(0.6275 0.0392 85.6723);
   --chart-3: oklch(0.7843 0.0235 78.9456);