chore: update component styles for consistency

pull/5038/merge
Steven 2 weeks ago
parent b4341dd123
commit 4d4325eba5

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

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

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

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

@ -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!" />

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

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

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

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

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

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

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

Loading…
Cancel
Save