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

fix(ui): unify metadata component styles across MemoView and MemoEditor 

Align header padding, text color, background tokens, and item row styles
across CodeBlock, AttachmentList, RelationList, and LocationDisplay so all
metadata panels follow the same visual pattern.
This commit is contained in:
Steven 2026-02-26 23:18:11 +08:00
parent 2be4a52e1a
commit 664b8c5629
6 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
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-2 rounded-lg border border-border bg-muted/30 overflow-hidden">
<pre className="relative my-2 rounded-lg border border-border bg-muted/20 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/50">
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide select-none">{language || "text"}</span>
<div className="flex items-center justify-between px-2 py-1 border-b border-border bg-muted/30">
<span className="text-xs text-foreground 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",
"inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs",
"transition-colors duration-200",
"hover:bg-accent active:scale-95",
copied ? "text-primary bg-primary/10" : "text-muted-foreground",
copied ? "text-primary" : "text-muted-foreground hover:text-foreground",
)}
aria-label={copied ? "Copied" : "Copy code"}
title={copied ? "Copied!" : "Copy code"}

4
web/src/components/MemoEditor/components/AttachmentList.tsx
View File

@ -139,9 +139,9 @@ const AttachmentList: FC<AttachmentListProps> = ({ attachments, localFiles = [],
return (
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
<div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
<PaperclipIcon className="w-3.5 h-3.5 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Attachments ({items.length})</span>
<span className="text-xs text-foreground">Attachments ({items.length})</span>
</div>
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">

2
web/src/components/MemoEditor/components/LocationDisplay.tsx
View File

@ -15,7 +15,7 @@ const LocationDisplay: FC<LocationDisplayProps> = ({ location, onRemove, classNa
return (
<div
className={cn(
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-background hover:bg-accent/20 transition-all w-full",
"relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-muted/20 hover:bg-accent/20 transition-all w-full",
className,
)}
>

4
web/src/components/MemoEditor/components/RelationList.tsx
View File

@ -74,9 +74,9 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
return (
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
<div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
<LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Relations ({referenceRelations.length})</span>
<span className="text-xs text-foreground">Relations ({referenceRelations.length})</span>
</div>
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">

4
web/src/components/MemoView/components/metadata/AttachmentList.tsx
View File

@ -37,7 +37,7 @@ const DocumentItem = ({ attachment }: { attachment: Attachment }) => {
const fileSizeLabel = attachment.size ? formatFileSize(Number(attachment.size)) : undefined;
return (
<div className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/20 transition-colors whitespace-nowrap">
<div className="flex items-center gap-1 px-1 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors whitespace-nowrap">
<div className="shrink-0 w-5 h-5 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
<FileIcon className="w-3 h-3 text-muted-foreground" />
</div>
@ -136,7 +136,7 @@ const AttachmentList = ({ attachments }: AttachmentListProps) => {
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
<SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
<div className="p-2 flex flex-col gap-1">
<div className="p-1.5 flex flex-col gap-1">
{mediaItems.length > 0 && <MediaGrid attachments={mediaItems} onImageClick={handleImageClick} />}
{mediaItems.length > 0 && docItems.length > 0 && <div className="border-t mt-1 border-border opacity-60" />}

2
web/src/components/MemoView/components/metadata/LocationDisplay.tsx
View File

@ -26,7 +26,7 @@ const LocationDisplay = ({ location, className }: LocationDisplayProps) => {
<div
className={cn(
"w-auto max-w-full flex flex-row gap-2 cursor-pointer",
"relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background hover:bg-accent text-secondary-foreground text-xs transition-colors",
"relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-muted/20 hover:bg-accent/20 text-muted-foreground hover:text-foreground text-xs transition-colors",
className,
)}
onClick={() => setPopoverOpen(true)}