happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: adjust spacing and background colors for improved UI consistency across components

This commit is contained in:
Johnny 2026-01-26 21:49:26 +08:00
parent 72c7965c8f
commit 98eaff1277
9 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/MemoContent/CodeBlock.tsx
View File

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

2
web/src/components/MemoContent/MermaidBlock.tsx
View File

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

10
web/src/components/MemoContent/Table.tsx
View File

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

5
web/src/components/MemoContent/Tag.tsx
View File

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

1
web/src/components/MemoContent/index.tsx
View File

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

2
web/src/components/MemoContent/markdown/Blockquote.tsx
View File

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

14
web/src/components/MemoContent/markdown/Heading.tsx
View File

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

2
web/src/components/MemoContent/markdown/InlineCode.tsx
View File

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

2
web/src/components/MemoContent/markdown/Link.tsx
View File

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