From 0c75220adc2395cc733dae2bc38172a654a055a7 Mon Sep 17 00:00:00 2001 From: vince Date: Sat, 20 Jun 2026 02:11:16 +0200 Subject: [PATCH 1/2] feat(ui): sharpen dashboard console visual system --- src/App.test.tsx | 2 +- src/app.css | 7 +- src/lib/ui/components/DashboardFrame.tsx | 2 +- src/lib/ui/components/ServiceRow.tsx | 6 + src/lib/ui/components/StatusStrip.tsx | 7 +- src/lib/ui/components/TelemetryCard.tsx | 14 +- src/lib/ui/components/TelemetryGrid.tsx | 21 +- src/lib/ui/components/ThemeToggle.tsx | 1 + src/lib/ui/components/render.test.tsx | 38 +++ src/lib/ui/components/styles.css | 305 ++++++++++++++---- src/lib/ui/tokens.css | 147 +++++---- ...shboard-desktop-chromium-desktop-linux.png | Bin 260072 -> 311439 bytes ...d-light-desktop-chromium-desktop-linux.png | Bin 281707 -> 464885 bytes ...dashboard-mobile-chromium-mobile-linux.png | Bin 282804 -> 316059 bytes tests/e2e/storybook.spec.ts | 2 +- 15 files changed, 417 insertions(+), 135 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 1120df5..31f5787 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -36,7 +36,7 @@ describe("React app dashboard state view", () => { expect(html).toContain('data-ui-theme-toggle="true"'); expect(html).toContain('data-ui-theme-current="dark"'); expect(html).toContain('aria-label="Switch to light theme"'); - expect(html).not.toContain("aria-pressed"); + expect(html).toContain('aria-pressed="false"'); expect(html).toContain("Theme"); expect(html).toContain("Dark"); expect(html).toContain("Light"); diff --git a/src/app.css b/src/app.css index e4fe069..0345394 100644 --- a/src/app.css +++ b/src/app.css @@ -67,8 +67,8 @@ --accent: var(--ui-color-accent); --accent-foreground: var(--ui-color-canvas); --destructive: var(--ui-color-danger); - --border: rgba(244, 244, 244, 0.16); - --input: rgba(244, 244, 244, 0.18); + --border: var(--ui-color-border); + --input: var(--ui-color-border-strong); --ring: var(--ui-color-accent); --chart-1: var(--ui-color-accent); --chart-2: var(--ui-color-ok); @@ -107,10 +107,11 @@ body { min-height: 100vh; margin: 0; background: + radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%), linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px), var(--ui-color-canvas); - background-size: 48px 48px, 48px 48px, auto; + background-size: auto, 40px 40px, 40px 40px, auto; color: var(--ui-color-text); font-family: var(--ui-font-mono); text-rendering: geometricPrecision; diff --git a/src/lib/ui/components/DashboardFrame.tsx b/src/lib/ui/components/DashboardFrame.tsx index 6a3a35b..cdf312a 100644 --- a/src/lib/ui/components/DashboardFrame.tsx +++ b/src/lib/ui/components/DashboardFrame.tsx @@ -22,7 +22,7 @@ export function DashboardFrame({ return (
-
+
{dashboard.eyebrow ?

{dashboard.eyebrow}

: null} diff --git a/src/lib/ui/components/ServiceRow.tsx b/src/lib/ui/components/ServiceRow.tsx index 1030092..cf065f4 100644 --- a/src/lib/ui/components/ServiceRow.tsx +++ b/src/lib/ui/components/ServiceRow.tsx @@ -11,6 +11,7 @@ export function ServiceRow({ service }: ServiceRowProps) { const rel = service.link?.external ? "noreferrer" : undefined; const content = ( <> +