From 573281f454d8bc45e18ce6bd713ec20728560104 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Wed, 10 Jun 2026 05:53:53 +0200
Subject: [PATCH] =?UTF-8?q?fix(design):=20code-reviewer=20polish=20?=
 =?UTF-8?q?=E2=80=94=20dedupe=20tag-mitre=20recipe,=20drop=20dead=20boxSha?=
 =?UTF-8?q?dow=20tokens,=20cover=20StatusBadge=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

F1: MitreTechniqueTag inline classes replaced with className="tag-mitre gap-xxs"
    (index.css .tag-mitre is now the single source of truth for technique tags).
F2: boxShadow block removed from tailwind.config.ts — no component referenced
    shadow-soft-lift / shadow-floating / *-dark; DESIGN.md §Don'ts prohibits shadows.
F4: StatusBadge.test.tsx gains 3 class assertions (bg-warn-soft / bg-primary-soft / bg-cloud)
    mirroring SimulationStatusBadge.test.tsx pattern. Test count: 136 → 139.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/MitreTechniqueTag.tsx |  2 +-
 frontend/tailwind.config.ts                   |  7 -------
 frontend/tests/StatusBadge.test.tsx           | 15 +++++++++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/MitreTechniqueTag.tsx b/frontend/src/components/MitreTechniqueTag.tsx
index a064d1f..481e1b3 100644
--- a/frontend/src/components/MitreTechniqueTag.tsx
+++ b/frontend/src/components/MitreTechniqueTag.tsx
@@ -22,7 +22,7 @@ export function MitreTechniqueTag({
     <span
       data-testid="mitre-technique-tag"
       title={`${technique.id} — ${technique.name}`}
-      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-none border border-primary-soft px-sm py-xxs text-[13px] font-mono"
+      className="tag-mitre gap-xxs"
     >
       {technique.id}
       {!disabled && (
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 6ccf51c..22615e9 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -98,13 +98,6 @@ const config: Config = {
         none: '0px',
         pill: '9999px',
       },
-      boxShadow: {
-        // Kept in config for backwards compat but no component should apply them
-        'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
-        floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
-        'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',
-        'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)',
-      },
       maxWidth: {
         page: '1366px',
       },
diff --git a/frontend/tests/StatusBadge.test.tsx b/frontend/tests/StatusBadge.test.tsx
index 70fa850..a9e6187 100644
--- a/frontend/tests/StatusBadge.test.tsx
+++ b/frontend/tests/StatusBadge.test.tsx
@@ -9,4 +9,19 @@ describe('StatusBadge', () => {
     expect(badge).toHaveAttribute('data-status', status);
     expect(badge.textContent?.toLowerCase()).toBe(status);
   });
+
+  it('applies warn-soft surface for planned', () => {
+    render(<StatusBadge status="planned" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-warn-soft');
+  });
+
+  it('applies primary-soft surface for active', () => {
+    render(<StatusBadge status="active" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-primary-soft');
+  });
+
+  it('applies cloud surface for closed', () => {
+    render(<StatusBadge status="closed" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-cloud');
+  });
 });