Apply technical-light design system to the gateway dashboard

Restyles the Blazor dashboard onto a portable token-based theme so it reads like an instrument panel: warm-paper background, hairline-ruled panels, IBM Plex type, monospace tabular numerics, and status carried by colour chips. Vendors theme.css + IBM Plex fonts, rewrites dashboard.css as a thin token-driven view layer, and swaps the Bootstrap navbar and status badges for the design-system app bar and chips. Also includes pending API-key management, Galaxy hierarchy projection, and constraint-enforcement work with their tests. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-16 22:30:25 -04:00
parent a4ed605f74
commit 96bea1d478
42 changed files with 3529 additions and 178 deletions
@@ -169,11 +169,17 @@ public static class DashboardEndpointRouteBuilderExtensions
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <title>{HtmlEncoder.Default.Encode(title)}</title>
                <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
+                <link rel="stylesheet" href="/css/theme.css" />
                <link rel="stylesheet" href="/css/dashboard.css" />
            </head>
            <body class="dashboard-body">
-                <main class="container py-5">
-                    <h1 class="h3 mb-4">{HtmlEncoder.Default.Encode(title)}</h1>
+                <header class="app-bar">
+                    <span class="brand"><span class="mark">&#9646;</span> MXAccess Gateway</span>
+                </header>
+                <main class="page">
+                    <div class="dashboard-page-header">
+                        <h1>{HtmlEncoder.Default.Encode(title)}</h1>
+                    </div>
                    {body}
                </main>
                <script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>