From 98eaff12779c38a53ef0139e7f061a4865e51134 Mon Sep 17 00:00:00 2001
From: Johnny <johnnyjoygg@gmail.com>
Date: Mon, 26 Jan 2026 21:49:26 +0800
Subject: [PATCH] style: adjust spacing and background colors for improved UI
 consistency across components

---
 web/src/components/MemoContent/CodeBlock.tsx       |  8 ++++----
 web/src/components/MemoContent/MermaidBlock.tsx    |  2 +-
 web/src/components/MemoContent/Table.tsx           | 10 +++++-----
 web/src/components/MemoContent/Tag.tsx             |  5 ++++-
 web/src/components/MemoContent/index.tsx           |  1 +
 .../components/MemoContent/markdown/Blockquote.tsx |  2 +-
 .../components/MemoContent/markdown/Heading.tsx    | 14 +++++++-------
 .../components/MemoContent/markdown/InlineCode.tsx |  2 +-
 web/src/components/MemoContent/markdown/Link.tsx   |  2 +-
 9 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 89c4ead63..8dfa91a30 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -115,17 +115,17 @@ export const CodeBlock = ({ children, className, node: _node, ...props }: CodeBl
   };
 
   return (
-    <pre className="relative my-3 rounded-lg border border-border bg-muted/30 overflow-hidden">
+    <pre className="relative my-2 rounded-lg border border-border bg-muted/30 overflow-hidden">
       {/* Header with language label and copy button */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-accent/30">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-accent/50">
         <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide select-none">{language || "text"}</span>
         <button
           onClick={handleCopy}
           className={cn(
             "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium",
             "transition-all duration-200",
-            "hover:bg-accent/80 active:scale-95",
-            copied ? "text-primary bg-primary/10" : "text-muted-foreground bg-transparent",
+            "hover:bg-accent active:scale-95",
+            copied ? "text-primary bg-primary/10" : "text-muted-foreground",
           )}
           aria-label={copied ? "Copied" : "Copy code"}
           title={copied ? "Copied!" : "Copy code"}
diff --git a/web/src/components/MemoContent/MermaidBlock.tsx b/web/src/components/MemoContent/MermaidBlock.tsx
index 48ec20bb1..d7511e65e 100644
--- a/web/src/components/MemoContent/MermaidBlock.tsx
+++ b/web/src/components/MemoContent/MermaidBlock.tsx
@@ -86,7 +86,7 @@ export const MermaidBlock = ({ children, className }: MermaidBlockProps) => {
   return (
     <div
       ref={containerRef}
-      className={cn("mermaid-diagram w-full flex justify-center items-center my-4 overflow-x-auto", className)}
+      className={cn("mermaid-diagram w-full flex justify-center items-center my-2 overflow-x-auto", className)}
       dangerouslySetInnerHTML={{ __html: svg }}
     />
   );
diff --git a/web/src/components/MemoContent/Table.tsx b/web/src/components/MemoContent/Table.tsx
index 47f260a1a..45d0cee93 100644
--- a/web/src/components/MemoContent/Table.tsx
+++ b/web/src/components/MemoContent/Table.tsx
@@ -7,7 +7,7 @@ interface TableProps extends React.HTMLAttributes<HTMLTableElement>, ReactMarkdo
 
 export const Table = ({ children, className, node: _node, ...props }: TableProps) => {
   return (
-    <div className="w-full overflow-x-auto rounded-lg border border-border my-4">
+    <div className="w-full overflow-x-auto rounded-lg border border-border my-2">
       <table className={cn("w-full border-collapse text-sm", className)} {...props}>
         {children}
       </table>
@@ -21,7 +21,7 @@ interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement>,
 
 export const TableHead = ({ children, className, node: _node, ...props }: TableHeadProps) => {
   return (
-    <thead className={cn("bg-accent", className)} {...props}>
+    <thead className={cn("bg-accent/50", className)} {...props}>
       {children}
     </thead>
   );
@@ -45,7 +45,7 @@ interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>, React
 
 export const TableRow = ({ children, className, node: _node, ...props }: TableRowProps) => {
   return (
-    <tr className={cn("transition-colors hover:bg-muted/50", "even:bg-accent/50", className)} {...props}>
+    <tr className={cn("transition-colors hover:bg-muted/30", className)} {...props}>
       {children}
     </tr>
   );
@@ -59,7 +59,7 @@ export const TableHeaderCell = ({ children, className, node: _node, ...props }:
   return (
     <th
       className={cn(
-        "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+        "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
         "border-b-2 border-border",
         className,
       )}
@@ -76,7 +76,7 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement>, R
 
 export const TableCell = ({ children, className, node: _node, ...props }: TableCellProps) => {
   return (
-    <td className={cn("px-4 py-3 text-left", className)} {...props}>
+    <td className={cn("px-3 py-2 text-left", className)} {...props}>
       {children}
     </td>
   );
diff --git a/web/src/components/MemoContent/Tag.tsx b/web/src/components/MemoContent/Tag.tsx
index 5fa87d753..71a2d6336 100644
--- a/web/src/components/MemoContent/Tag.tsx
+++ b/web/src/components/MemoContent/Tag.tsx
@@ -48,7 +48,10 @@ export const Tag: React.FC<TagProps> = ({ "data-tag": dataTag, children, classNa
 
   return (
     <span
-      className={cn("inline-block w-auto text-primary cursor-pointer hover:opacity-80 transition-colors", className)}
+      className={cn(
+        "inline-block w-auto text-primary cursor-pointer transition-colors hover:text-primary/80",
+        className,
+      )}
       data-tag={tag}
       {...props}
       onClick={handleTagClick}
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index 1aa802f38..f3dc1845e 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -40,6 +40,7 @@ const MemoContent = (props: MemoContentProps) => {
         ref={memoContentContainerRef}
         className={cn(
           "relative w-full max-w-full wrap-break-word text-base leading-6",
+          "[&>*:last-child]:mb-0",
           showCompactMode === "ALL" && "overflow-hidden",
           contentClassName,
         )}
diff --git a/web/src/components/MemoContent/markdown/Blockquote.tsx b/web/src/components/MemoContent/markdown/Blockquote.tsx
index 914505729..c8ed5fc31 100644
--- a/web/src/components/MemoContent/markdown/Blockquote.tsx
+++ b/web/src/components/MemoContent/markdown/Blockquote.tsx
@@ -10,7 +10,7 @@ interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElemen
  */
 export const Blockquote = ({ children, className, node: _node, ...props }: BlockquoteProps) => {
   return (
-    <blockquote className={cn("my-0 mb-2 border-l-4 border-border pl-3 text-muted-foreground", className)} {...props}>
+    <blockquote className={cn("my-0 mb-2 border-l-4 border-primary/30 pl-3 text-muted-foreground italic", className)} {...props}>
       {children}
     </blockquote>
   );
diff --git a/web/src/components/MemoContent/markdown/Heading.tsx b/web/src/components/MemoContent/markdown/Heading.tsx
index c77b5a481..000589abc 100644
--- a/web/src/components/MemoContent/markdown/Heading.tsx
+++ b/web/src/components/MemoContent/markdown/Heading.tsx
@@ -14,16 +14,16 @@ export const Heading = ({ level, children, className, node: _node, ...props }: H
   const Component = `h${level}` as const;
 
   const levelClasses = {
-    1: "text-3xl font-bold border-b border-border pb-1",
-    2: "text-2xl border-b border-border pb-1",
-    3: "text-xl",
-    4: "text-base",
-    5: "text-sm",
-    6: "text-sm text-muted-foreground",
+    1: "text-3xl font-bold border-b border-border pb-2",
+    2: "text-2xl font-semibold border-b border-border pb-1.5",
+    3: "text-xl font-semibold",
+    4: "text-lg font-semibold",
+    5: "text-base font-semibold",
+    6: "text-base font-medium text-muted-foreground",
   };
 
   return (
-    <Component className={cn("mt-3 mb-2 font-semibold leading-tight", levelClasses[level], className)} {...props}>
+    <Component className={cn("mt-3 mb-2 leading-tight", levelClasses[level], className)} {...props}>
       {children}
     </Component>
   );
diff --git a/web/src/components/MemoContent/markdown/InlineCode.tsx b/web/src/components/MemoContent/markdown/InlineCode.tsx
index e01371b23..945dc1c03 100644
--- a/web/src/components/MemoContent/markdown/InlineCode.tsx
+++ b/web/src/components/MemoContent/markdown/InlineCode.tsx
@@ -10,7 +10,7 @@ interface InlineCodeProps extends React.HTMLAttributes<HTMLElement>, ReactMarkdo
  */
 export const InlineCode = ({ children, className, node: _node, ...props }: InlineCodeProps) => {
   return (
-    <code className={cn("font-mono text-sm bg-muted px-1 py-0.5 rounded", className)} {...props}>
+    <code className={cn("font-mono text-sm bg-muted px-1 py-0.5 rounded-md", className)} {...props}>
       {children}
     </code>
   );
diff --git a/web/src/components/MemoContent/markdown/Link.tsx b/web/src/components/MemoContent/markdown/Link.tsx
index 7414dfdd8..99fd2be1e 100644
--- a/web/src/components/MemoContent/markdown/Link.tsx
+++ b/web/src/components/MemoContent/markdown/Link.tsx
@@ -15,7 +15,7 @@ export const Link = ({ children, className, href, node: _node, ...props }: LinkP
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn("text-primary underline transition-opacity hover:opacity-80", className)}
+      className={cn("text-primary underline decoration-primary/50 underline-offset-2 transition-colors hover:decoration-primary", className)}
       {...props}
     >
       {children}