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

refactor(components): squared shapes + mono data cells across all components

Browse Source
This commit is contained in:
Knacky
2026-06-09 18:42:26 +02:00
parent c791e50108
commit ec7800ae38
15 changed files with 42 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -170,7 +170,7 @@ export function MitreMatrixModal({
role="dialog"
aria-modal="true"
aria-labelledby="matrix-modal-title"
className="relative bg-canvas rounded-xl shadow-floating dark:shadow-floating-dark max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
className="relative bg-canvas rounded-none border border-hairline max-w-[98vw] max-h-[80vh] overflow-hidden flex flex-col"
style={{ width: '1400px' }}
onKeyDown={handleKeyDown}
>
@@ -230,7 +230,7 @@ export function MitreMatrixModal({
type="button"
onClick={() => toggleTactic(tactic.tactic_id)}
title={`${tactic.tactic_name} (${tactic.tactic_id}) — click to tag this tactic`}
className={`w-full text-left px-xs py-xxs rounded-t-sm border border-b-0 border-hairline transition-colors ${
className={`w-full text-left px-xs py-xxs rounded-none border border-b-0 border-hairline ${
tacticSelected
? 'bg-primary border-primary'
: 'bg-cloud hover:bg-fog'
@@ -251,7 +251,7 @@ export function MitreMatrixModal({
</button>
{/* Techniques */}
<div className="border border-hairline rounded-b-sm overflow-hidden flex flex-col">
<div className="border border-hairline rounded-none overflow-hidden flex flex-col">
{visibleTechniques.map((tech, techIdx) => {
const isSelected = selectedTechMap.has(tech.id);
const isExpanded = expandedTechniques.has(tech.id) || autoExpanded.has(tech.id);
@@ -296,7 +296,7 @@ export function MitreMatrixModal({
isSelected ? 'text-white' : 'text-ink'
}`}
>
<span className="font-semibold block truncate">{tech.id}</span>
<span className="font-mono font-semibold block truncate">{tech.id}</span>
<span className={`block truncate text-[10px] ${isSelected ? 'text-white/80' : 'text-charcoal'}`}>
{tech.name}
</span>
@@ -318,7 +318,7 @@ export function MitreMatrixModal({
: 'bg-cloud text-charcoal hover:bg-fog'
}`}
>
<span className="font-semibold block truncate">{sub.id}</span>
<span className="font-mono font-semibold block truncate">{sub.id}</span>
<span className="block truncate">{sub.name}</span>
</button>
);