From 0b8c18a43f23c8123399e75dda41e797f2b67b0f Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 11 Mar 2026 17:43:37 +0100
Subject: [PATCH] fix: Style

---
 frontend/src/app/canvas/CanvasMenubar.tsx | 40 ++++++++++-------------
 frontend/src/app/keroma/KeromaPage.tsx    |  2 +-
 frontend/src/app/pleroma/PleromaPage.tsx  | 33 ++++++++++++-------
 3 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/frontend/src/app/canvas/CanvasMenubar.tsx b/frontend/src/app/canvas/CanvasMenubar.tsx
index f275712..3e7e4dc 100644
--- a/frontend/src/app/canvas/CanvasMenubar.tsx
+++ b/frontend/src/app/canvas/CanvasMenubar.tsx
@@ -10,11 +10,7 @@ import {
   MenubarItem,
   MenubarMenu,
   MenubarSeparator,
-  MenubarTrigger,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-  MenubarCheckboxItem,
+  MenubarTrigger
 } from '@/components/ui/menubar'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
@@ -135,8 +131,20 @@ export function CanvasMenubar({
           <ArrowLeft className="size-4" />
         </Link>
         <MenubarMenu>
-          <MenubarTrigger className="font-medium">Project</MenubarTrigger>
+          <MenubarTrigger className="font-normal text-muted-foreground">Project</MenubarTrigger>
           <MenubarContent>
+                {projectId && (
+              <>
+                <MenubarItem
+                  onClick={() => setIsRenamingProject(true)}
+                  className="gap-2"
+                >
+                  <Pencil className="h-4 w-4" />
+                  Rename
+                </MenubarItem>
+                <MenubarSeparator />
+              </>
+            )}
             <MenubarItem onClick={onImport} className="gap-2">
               <FolderOpen className="h-4 w-4" />
               Import…
@@ -145,22 +153,10 @@ export function CanvasMenubar({
               <Download className="h-4 w-4" />
               Export…
             </MenubarItem>
-            {projectId && (
-              <>
-                <MenubarSeparator />
-                <MenubarItem
-                  onClick={() => setIsRenamingProject(true)}
-                  className="gap-2"
-                >
-                  <Pencil className="h-4 w-4" />
-                  Rename
-                </MenubarItem>
-              </>
-            )}
           </MenubarContent>
         </MenubarMenu>
         <MenubarMenu>
-          <MenubarTrigger className="font-medium">Edit</MenubarTrigger>
+          <MenubarTrigger className="font-normal text-muted-foreground">Edit</MenubarTrigger>
           <MenubarContent>
             <MenubarItem onClick={undo} disabled={!canUndo} className="gap-2">
               <Undo2 className="h-4 w-4" />
@@ -217,7 +213,7 @@ export function CanvasMenubar({
           </MenubarContent>
         </MenubarMenu>
         <MenubarMenu>
-          <MenubarTrigger className="font-medium">View</MenubarTrigger>
+          <MenubarTrigger className="font-normal text-muted-foreground">View</MenubarTrigger>
           <MenubarContent>
             {onFitView && (
               <MenubarItem onClick={onFitView} className="gap-2">
@@ -250,11 +246,11 @@ export function CanvasMenubar({
                 }
               }}
               onBlur={handleRenameBlur}
-              className="h-7 text-sm font-medium text-center"
+              className="h-7 text-sm font-medium text-center font-serif"
               aria-label="Project name"
             />
           ) : (
-            <span className="pointer-events-none truncate text-sm font-medium text-foreground">
+            <span className="pointer-events-none truncate text-sm font-medium text-foreground font-serif">
               {projectName ?? 'Untitled'}
             </span>
           )}
diff --git a/frontend/src/app/keroma/KeromaPage.tsx b/frontend/src/app/keroma/KeromaPage.tsx
index 329288e..699812e 100644
--- a/frontend/src/app/keroma/KeromaPage.tsx
+++ b/frontend/src/app/keroma/KeromaPage.tsx
@@ -8,7 +8,7 @@ export function KeromaPage() {
   return (
     <div className="relative flex flex-1 flex-col min-h-0 p-4">
       <div className="flex flex-wrap items-center gap-3">
-        <h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
+        <h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance font-serif">
           Keroma
         </h1>
       </div>
diff --git a/frontend/src/app/pleroma/PleromaPage.tsx b/frontend/src/app/pleroma/PleromaPage.tsx
index eb8bfe2..7f2017f 100644
--- a/frontend/src/app/pleroma/PleromaPage.tsx
+++ b/frontend/src/app/pleroma/PleromaPage.tsx
@@ -110,6 +110,19 @@ function getGraphCounts(projectId: string): { nodes: number; edges: number } {
 type NodeLike = { id: string; position?: { x: number; y: number } }
 type EdgeLike = { id?: string; source: string; target: string }
 
+/** Shared grid style for empty thumbnail, non-empty thumbnail SVG, and New project placeholder. */
+const THUMBNAIL_GRID = {
+  baseFill: 'hsl(var(--muted) / 0.4)',
+  dotFill: 'hsl(var(--muted-foreground) / 0.06)',
+  size: 8,
+} as const
+
+const thumbnailGridStyle: React.CSSProperties = {
+  backgroundColor: THUMBNAIL_GRID.baseFill,
+  backgroundImage: `radial-gradient(circle, ${THUMBNAIL_GRID.dotFill} 1px, transparent 1px)`,
+  backgroundSize: `${THUMBNAIL_GRID.size}px ${THUMBNAIL_GRID.size}px`,
+}
+
 /** Renders a minimal SVG preview of the graph from storage, or a placeholder. */
 function GraphThumbnail({ projectId, className }: { projectId: string; className?: string }) {
   const stored = loadGraphFromStorage(projectId)
@@ -123,11 +136,7 @@ function GraphThumbnail({ projectId, className }: { projectId: string; className
     return (
       <div
         className={`flex h-full w-full flex-col items-center justify-center gap-1 text-muted-foreground ${className ?? ''}`}
-        style={{
-          backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
-          backgroundSize: '8px 8px',
-          backgroundColor: 'hsl(var(--muted) / 0.5)',
-        }}
+        style={thumbnailGridStyle}
         aria-hidden
       >
         <Network className="size-8" />
@@ -164,11 +173,11 @@ function GraphThumbnail({ projectId, className }: { projectId: string; className
       aria-hidden
     >
       <defs>
-        <pattern id={dotGridPatternId} width={8} height={8} patternUnits="userSpaceOnUse">
-          <circle cx={1} cy={1} r={0.6} fill="hsl(var(--muted-foreground) / 0.2)" />
+        <pattern id={dotGridPatternId} width={THUMBNAIL_GRID.size} height={THUMBNAIL_GRID.size} patternUnits="userSpaceOnUse">
+          <circle cx={THUMBNAIL_GRID.size / 2} cy={THUMBNAIL_GRID.size / 2} r={1} fill={THUMBNAIL_GRID.dotFill} />
         </pattern>
       </defs>
-      <rect width={200} height={120} fill="hsl(var(--muted) / 0.4)" />
+      <rect width={200} height={120} fill={THUMBNAIL_GRID.baseFill} />
       <rect width={200} height={120} fill={`url(#${dotGridPatternId})`} />
       {validEdges.slice(0, 50).map((e, i) => {
         const a = nodeById.get(e.source)!.position!
@@ -493,7 +502,7 @@ export function ProjectsPage() {
       <div className="relative flex min-h-0 flex-1 flex-col gap-4 p-4 overflow-auto">
       <TooltipProvider>
         <div className="flex flex-wrap items-center gap-3">
-          <h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
+          <h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance font-serif">
             Hi, Demiurge
           </h1>
         </div>
@@ -569,7 +578,7 @@ export function ProjectsPage() {
                     }}
                     aria-label="Create new project"
                   >
-                    <div className="flex aspect-video w-full shrink-0 items-center justify-center bg-muted/30">
+                    <div className="flex aspect-video w-full shrink-0 items-center justify-center" style={thumbnailGridStyle}>
                       <Plus className="size-12 text-muted-foreground" />
                     </div>
                     <div className="flex flex-1 flex-col gap-1 p-3">
@@ -794,7 +803,7 @@ export function ProjectsPage() {
                       }}
                       aria-label="Create new project"
                     >
-                      <div className="flex aspect-video w-full shrink-0 items-center justify-center bg-muted/30">
+                      <div className="flex aspect-video w-full shrink-0 items-center justify-center" style={thumbnailGridStyle}>
                         <Plus className="size-12 text-muted-foreground" />
                       </div>
                       <div className="flex flex-1 flex-col gap-1 p-3">
@@ -852,7 +861,7 @@ export function ProjectsPage() {
                       <div className="flex flex-1 flex-col gap-1 p-3">
                         <div className="flex items-center gap-2">
                           <Icon className="size-4 shrink-0 text-muted-foreground" />
-                          <span className="truncate font-medium">{project.name}</span>
+                          <span className="truncate font-medium font-serif">{project.name}</span>
                         </div>
                         <Tooltip>
                           <TooltipTrigger asChild>