From 6995c4c860df0aed35c623eb898dc31ed2f2adf9 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Tue, 9 Jun 2026 19:43:08 +0200
Subject: [PATCH] =?UTF-8?q?fix(design):=20address=20design-reviewer=20find?=
 =?UTF-8?q?ings=20F1-F6=20=E2=80=94=20nav=20slab,=20spinner,=20badge=20cov?=
 =?UTF-8?q?erage,=20mono=20discipline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

F3: nav-bar-top bg-paper → bg-slab text-slab-text (3-band slab anchoring restored).
    NavLinks: text-slab-muted default, text-slab-text + border-primary active.
    Logo span: text-ink → text-slab-text.
F2: (you) label extracted from font-mono td into adjacent font-sans span.
F1: Loader2 circular spinner → EXPORTING… text with animate-pulse (terminal-SOC compatible).

Screenshots regenerated:
- All 8 pages light+dark (01→10)
- 05-simulation-form-edit light+dark (F6)
- 11-mitre-matrix-modal light+dark (F6)
- 12-toast-success light+dark (F6)
- 13-confirm-dialog light+dark (F6)
- admin-light/dark-open/closed regenerated from HEAD (F4)

F4: StatusBadge.tsx confirmed single code path — planned → bg-warn-soft (no divergence in code).
    Divergence in prior captures was stale cache; regenerated admin-* confirm consistency.
F5: Simulations seeded (pending/in_progress/review_required/done) via API;
    10-sim-list-badges shows all 4 semantic badge colors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/ExportEngagementButton.tsx  |  8 +++++---
 frontend/src/components/Layout.tsx             | 18 ++++++++++++------
 frontend/src/pages/UsersAdminPage.tsx          |  6 +++---
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ExportEngagementButton.tsx b/frontend/src/components/ExportEngagementButton.tsx
index 482cf21..dada565 100644
--- a/frontend/src/components/ExportEngagementButton.tsx
+++ b/frontend/src/components/ExportEngagementButton.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ChevronDown, Download, Loader2 } from 'lucide-react';
+import { ChevronDown, Download } from 'lucide-react';
 import { downloadEngagementExport, type ExportFormat } from '@/api/exports';
 import { useToast } from '@/hooks/useToast';
 
@@ -88,9 +88,11 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
               data-testid={`export-format-${value}`}
             >
               {loading === value ? (
-                <Loader2 size={12} className="animate-spin" aria-hidden />
+                <span className="font-mono text-[11px] animate-pulse" aria-hidden>
+                  EXPORTING…
+                </span>
               ) : null}
-              {label}
+              {loading !== value ? label : null}
             </button>
           ))}
         </div>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 04079ff..2d14a51 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -59,12 +59,12 @@ export function Layout(): JSX.Element {
         </div>
       </div>
 
-      {/* nav-bar-top — paper gives dark-mode lift vs canvas body */}
-      <header className="bg-paper border-b border-hairline">
+      {/* nav-bar-top — fixed dark slab, never inverts (same visual family as utility-strip + footer) */}
+      <header className="bg-slab text-slab-text">
         <div className="mx-auto w-full max-w-page px-xl h-16 flex items-center justify-between">
           <Link to="/engagements" className="flex items-center gap-sm" aria-label="Mimic home">
             <span className="inline-block h-6 w-6 rotate-12 bg-primary" aria-hidden />
-            <span className="text-[20px] font-medium tracking-tight text-ink">Mimic</span>
+            <span className="text-[20px] font-medium tracking-tight text-slab-text">Mimic</span>
           </Link>
 
           <nav className="flex items-center gap-md">
@@ -72,7 +72,9 @@ export function Layout(): JSX.Element {
               to="/engagements"
               className={({ isActive }) =>
                 `text-[16px] py-2 px-md ${
-                  isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                  isActive
+                    ? 'text-slab-text border-b-2 border-primary'
+                    : 'text-slab-muted hover:text-slab-text'
                 }`
               }
             >
@@ -83,7 +85,9 @@ export function Layout(): JSX.Element {
                 to="/admin/templates"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >
@@ -95,7 +99,9 @@ export function Layout(): JSX.Element {
                 to="/admin/users"
                 className={({ isActive }) =>
                   `text-[16px] py-2 px-md ${
-                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
+                    isActive
+                      ? 'text-slab-text border-b-2 border-primary'
+                      : 'text-slab-muted hover:text-slab-text'
                   }`
                 }
               >
diff --git a/frontend/src/pages/UsersAdminPage.tsx b/frontend/src/pages/UsersAdminPage.tsx
index 0789d39..301a17c 100644
--- a/frontend/src/pages/UsersAdminPage.tsx
+++ b/frontend/src/pages/UsersAdminPage.tsx
@@ -205,10 +205,10 @@ export function UsersAdminPage(): JSX.Element {
                     // per-row reconciliation (reset-password state leaked across rows).
                     <Fragment key={u.id}>
                       <tr className="border-b border-hairline last:border-0">
-                        <td className="px-xl py-md font-mono font-medium text-ink">
-                          {u.username}
+                        <td className="px-xl py-md text-ink">
+                          <span className="font-mono font-medium">{u.username}</span>
                           {isSelf ? (
-                            <span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]">
+                            <span className="ml-sm font-sans text-[12px] text-graphite">
                               (you)
                             </span>
                           ) : null}