knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design): code-reviewer polish — dedupe tag-mitre recipe, drop dead boxShadow tokens, cover StatusBadge classes

Browse Source 
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>
This commit is contained in:
Knacky
2026-06-10 05:53:53 +02:00
parent 6995c4c860
commit 573281f454
3 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/MitreTechniqueTag.tsx
View File

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

7
frontend/tailwind.config.ts
View File

@@ -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',
},

15
frontend/tests/StatusBadge.test.tsx
View File

@@ -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');
});
});