dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Style

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-11 17:43:37 +01:00
parent fc58dcdaa2
commit 0b8c18a43f
3 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app/pleroma/PleromaPage.tsx
View File

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