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

Compare commits

base: knacky:88b97cef2eb61551c5390d63dcbc18f9d3979593
Branches Tags
knacky:main knacky:sprint/9-ui-contrast
...
compare: knacky:sprint/9-ui-contrast
Branches Tags
knacky:main knacky:sprint/9-ui-contrast

2 Commits
88b97cef2e ... sprint/9-u

Author SHA1 Message Date
Knacky
8b5b5d94d8 fix(frontend): floating dropdowns and matrix modal frame use bg-paper 
MitreTechniquePicker dropdown, SimulationList overflow menu,
ExportEngagementButton format menu, and MitreMatrixModal dialog frame
all used bg-canvas as their surface color. With the tinted canvas
(#f3f5f8), these floating surfaces appeared slightly grey instead of
clean white. Switched to bg-paper (#ffffff light / #1f2937 dark).
MitreMatrixModal cell hover (bg-canvas) intentionally preserved —
matrix cells sit on canvas, not on paper.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-11 11:12:07 +02:00
Knacky
76bcb04c8f style(frontend): inputs + outline buttons inside cards use bg-paper 
.text-input, .btn-outline, .btn-outline-ink were using bg-canvas which
now resolves to the tinted #f3f5f8 instead of white, making inputs and
Cancel/outlined buttons visually gritty on white paper cards. Switching
all three to bg-paper restores white surfaces inside cards in light mode.
Dark mode unaffected (canvas/paper both resolve correctly there).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-11 11:11:59 +02:00
5 changed files with 7 additions and 7 deletions
Expand all files Collapse all files

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

@@ -74,7 +74,7 @@ export function ExportEngagementButton({ engagementId }: ExportEngagementButtonP
{open ? ( {open ? (
<div <div
className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-none z-20 min-w-[160px]" className="absolute right-0 top-full mt-xxs bg-paper border border-hairline rounded-none z-20 min-w-[160px]"
role="menu" role="menu"
> >
{FORMATS.map(({ label, value }) => ( {FORMATS.map(({ label, value }) => (

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

@@ -170,7 +170,7 @@ export function MitreMatrixModal({
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="matrix-modal-title" aria-labelledby="matrix-modal-title"
className="relative bg-canvas rounded-none border border-hairline max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col" className="relative bg-paper rounded-none border border-hairline max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
style={{ width: '1400px' }} style={{ width: '1400px' }}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >

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

@@ -107,7 +107,7 @@ export function MitreTechniquePicker({
/> />
{open && ( {open && (
<div className="absolute z-20 w-full mt-xxs bg-canvas border border-steel rounded-none overflow-hidden"> <div className="absolute z-20 w-full mt-xxs bg-paper border border-steel rounded-none overflow-hidden">
{isFetching && ( {isFetching && (
<div className="px-md py-sm text-[14px] text-graphite">Searching…</div> <div className="px-md py-sm text-[14px] text-graphite">Searching…</div>
)} )}

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

@@ -93,7 +93,7 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
{open ? ( {open ? (
<div <div
className="absolute right-0 top-full mt-xxs bg-canvas border border-hairline rounded-none z-20 min-w-[180px]" className="absolute right-0 top-full mt-xxs bg-paper border border-hairline rounded-none z-20 min-w-[180px]"
role="menu" role="menu"
> >
<button <button

6
frontend/src/styles/index.css
View File

@@ -100,7 +100,7 @@
} }
.btn-outline { .btn-outline {
@apply inline-flex items-center justify-center gap-xs bg-canvas text-primary border border-primary uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11; @apply inline-flex items-center justify-center gap-xs bg-paper text-primary border border-primary uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
} }
.btn-outline:hover { .btn-outline:hover {
@apply bg-primary-soft; @apply bg-primary-soft;
@@ -110,7 +110,7 @@
} }
.btn-outline-ink { .btn-outline-ink {
@apply inline-flex items-center justify-center gap-xs bg-canvas text-ink border border-ink uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11; @apply inline-flex items-center justify-center gap-xs bg-paper text-ink border border-ink uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
} }
.btn-outline-ink:hover { .btn-outline-ink:hover {
@apply bg-cloud; @apply bg-cloud;
@@ -121,7 +121,7 @@
} }
.text-input { .text-input {
@apply block w-full bg-canvas text-ink rounded-none border border-steel px-md py-sm h-11 text-[16px] leading-[1.4] focus:outline-none focus:border-primary; @apply block w-full bg-paper text-ink rounded-none border border-steel px-md py-sm h-11 text-[16px] leading-[1.4] focus:outline-none focus:border-primary;
} }
/* Panel / card — hairline border, no shadow, no radius */ /* Panel / card — hairline border, no shadow, no radius */