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

refactor(pages): apply terminal-SOC aesthetic to all 8 pages

Browse Source
This commit is contained in:
Knacky
2026-06-09 18:44:47 +02:00
parent ec7800ae38
commit 5cc830554c
8 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/pages/EngagementDetailPage.tsx
View File

@@ -35,7 +35,7 @@ export function EngagementDetailPage(): JSX.Element {
<Link to="/engagements" className="btn-text-link text-[14px]"> <Link to="/engagements" className="btn-text-link text-[14px]">
← Back to engagements ← Back to engagements
</Link> </Link>
<h1 className="text-[44px] font-medium leading-none">{eng.name}</h1> <h1 className="text-[32px] font-medium leading-none">{eng.name}</h1>
<div className="flex items-center gap-md"> <div className="flex items-center gap-md">
<StatusBadge status={eng.status} /> <StatusBadge status={eng.status} />
<span className="text-[14px] text-graphite"> <span className="text-[14px] text-graphite">
@@ -58,13 +58,13 @@ export function EngagementDetailPage(): JSX.Element {
<h2 className="text-[20px] font-medium mb-md">Schedule</h2> <h2 className="text-[20px] font-medium mb-md">Schedule</h2>
<dl className="grid grid-cols-2 gap-md text-[14px]"> <dl className="grid grid-cols-2 gap-md text-[14px]">
<dt className="text-graphite">Start date</dt> <dt className="text-graphite">Start date</dt>
<dd className="text-ink">{eng.start_date}</dd> <dd className="text-ink font-mono">{eng.start_date}</dd>
<dt className="text-graphite">End date</dt> <dt className="text-graphite">End date</dt>
<dd className="text-ink">{eng.end_date ?? '—'}</dd> <dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
<dt className="text-graphite">Status</dt> <dt className="text-graphite">Status</dt>
<dd className="text-ink capitalize">{eng.status}</dd> <dd className="text-ink capitalize">{eng.status}</dd>
<dt className="text-graphite">Created at</dt> <dt className="text-graphite">Created at</dt>
<dd className="text-ink">{eng.created_at}</dd> <dd className="text-ink font-mono">{eng.created_at}</dd>
</dl> </dl>
</div> </div>

2
frontend/src/pages/EngagementFormPage.tsx
View File

@@ -123,7 +123,7 @@ export function EngagementFormPage(): JSX.Element {
return ( return (
<div className="flex flex-col gap-xl max-w-2xl"> <div className="flex flex-col gap-xl max-w-2xl">
<header> <header>
<h1 className="text-[44px] font-medium leading-none"> <h1 className="text-[32px] font-medium leading-none">
{editing ? 'Edit engagement' : 'New engagement'} {editing ? 'Edit engagement' : 'New engagement'}
</h1> </h1>
<p className="text-charcoal text-[16px] mt-sm"> <p className="text-charcoal text-[16px] mt-sm">

6
frontend/src/pages/EngagementsListPage.tsx
View File

@@ -35,7 +35,7 @@ export function EngagementsListPage(): JSX.Element {
<div className="flex flex-col gap-xl"> <div className="flex flex-col gap-xl">
<header className="flex items-end justify-between gap-md"> <header className="flex items-end justify-between gap-md">
<div> <div>
<h1 className="text-[44px] font-medium leading-none">Engagements</h1> <h1 className="text-[32px] font-medium leading-none">Engagements</h1>
<p className="text-charcoal text-[16px] mt-sm"> <p className="text-charcoal text-[16px] mt-sm">
Red team missions and their lifecycle status. Red team missions and their lifecycle status.
</p> </p>
@@ -91,8 +91,8 @@ export function EngagementsListPage(): JSX.Element {
<td className="px-xl py-md"> <td className="px-xl py-md">
<StatusBadge status={eng.status} /> <StatusBadge status={eng.status} />
</td> </td>
<td className="px-xl py-md text-charcoal">{formatDate(eng.start_date)}</td> <td className="px-xl py-md text-charcoal font-mono">{formatDate(eng.start_date)}</td>
<td className="px-xl py-md text-charcoal">{formatDate(eng.end_date)}</td> <td className="px-xl py-md text-charcoal font-mono">{formatDate(eng.end_date)}</td>
<td className="px-xl py-md text-charcoal">{eng.created_by.username}</td> <td className="px-xl py-md text-charcoal">{eng.created_by.username}</td>
<td className="px-xl py-md text-right"> <td className="px-xl py-md text-right">
<div className="inline-flex gap-sm"> <div className="inline-flex gap-sm">

2
frontend/src/pages/LoginPage.tsx
View File

@@ -46,7 +46,7 @@ export function LoginPage(): JSX.Element {
{/* Chevron echo of the brand mark */} {/* Chevron echo of the brand mark */}
<div className="flex items-center gap-sm"> <div className="flex items-center gap-sm">
<span className="inline-block h-8 w-8 rotate-12 bg-primary" aria-hidden /> <span className="inline-block h-8 w-8 rotate-12 bg-primary" aria-hidden />
<h1 className="text-[32px] font-medium leading-none">Mimic</h1> <h1 className="text-[28px] font-medium leading-none">Mimic</h1>
</div> </div>
<p className="text-[16px] text-charcoal">Sign in to access your engagements.</p> <p className="text-[16px] text-charcoal">Sign in to access your engagements.</p>

8
frontend/src/pages/SimulationFormPage.tsx
View File

@@ -222,7 +222,7 @@ export function SimulationFormPage(): JSX.Element {
<Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]"> <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
← Back to engagement ← Back to engagement
</Link> </Link>
<h1 className="text-[44px] font-medium leading-none mt-sm">New simulation</h1> <h1 className="text-[32px] font-medium leading-none mt-sm">New simulation</h1>
</header> </header>
<form onSubmit={onSubmitNew} noValidate className="card-product flex flex-col gap-md"> <form onSubmit={onSubmitNew} noValidate className="card-product flex flex-col gap-md">
@@ -263,7 +263,7 @@ export function SimulationFormPage(): JSX.Element {
<Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]"> <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
← Back to engagement ← Back to engagement
</Link> </Link>
<h1 className="text-[44px] font-medium leading-none">{rt.name || simulation?.name}</h1> <h1 className="text-[32px] font-medium leading-none">{rt.name || simulation?.name}</h1>
{status ? ( {status ? (
<div className="flex items-center gap-md"> <div className="flex items-center gap-md">
<SimulationStatusBadge status={status} /> <SimulationStatusBadge status={status} />
@@ -281,7 +281,7 @@ export function SimulationFormPage(): JSX.Element {
{isDone && ( {isDone && (
<div <div
role="status" role="status"
className="rounded-xl px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal" className="rounded-none px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal"
> >
This simulation is <strong>done</strong> and read-only. Use Reopen to make changes. This simulation is <strong>done</strong> and read-only. Use Reopen to make changes.
</div> </div>
@@ -292,7 +292,7 @@ export function SimulationFormPage(): JSX.Element {
<div <div
role="alert" role="alert"
data-testid="soc-blocked-banner" data-testid="soc-blocked-banner"
className="rounded-xl px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal" className="rounded-none px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal"
> >
Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section. Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
</div> </div>

5
frontend/src/pages/TemplateFormPage.tsx
View File

@@ -130,7 +130,7 @@ export function TemplateFormPage(): JSX.Element {
<Link to="/admin/templates" className="btn-text-link text-[14px]"> <Link to="/admin/templates" className="btn-text-link text-[14px]">
← Back to templates ← Back to templates
</Link> </Link>
<h1 className="text-[44px] font-medium leading-none"> <h1 className="text-[32px] font-medium leading-none">
{isNew ? 'New template' : (existing.data?.name ?? 'Edit template')} {isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
</h1> </h1>
</div> </div>
@@ -173,6 +173,7 @@ export function TemplateFormPage(): JSX.Element {
onChange={(e) => setForm({ ...form, commands: e.target.value })} onChange={(e) => setForm({ ...form, commands: e.target.value })}
disabled={isPending} disabled={isPending}
placeholder="e.g. mimikatz.exe&#10;sekurlsa::logonpasswords" placeholder="e.g. mimikatz.exe&#10;sekurlsa::logonpasswords"
className="font-mono text-[14px]"
/> />
</FormField> </FormField>
@@ -228,7 +229,7 @@ export function TemplateFormPage(): JSX.Element {
type="button" type="button"
aria-label="Open MITRE matrix" aria-label="Open MITRE matrix"
onClick={() => { setShowPicker(false); setShowMatrix(true); }} onClick={() => { setShowPicker(false); setShowMatrix(true); }}
className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-md border border-steel text-graphite hover:text-ink hover:border-ink transition-colors" className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-none border border-steel text-graphite hover:text-ink hover:border-ink"
> >
<Grid2x2 size={16} /> <Grid2x2 size={16} />
</button> </button>

4
frontend/src/pages/TemplatesListPage.tsx
View File

@@ -36,7 +36,7 @@ export function TemplatesListPage(): JSX.Element {
<div className="flex flex-col gap-xl"> <div className="flex flex-col gap-xl">
<header className="flex items-end justify-between gap-md"> <header className="flex items-end justify-between gap-md">
<div> <div>
<h1 className="text-[44px] font-medium leading-none">Templates</h1> <h1 className="text-[32px] font-medium leading-none">Templates</h1>
<p className="text-charcoal text-[16px] mt-sm"> <p className="text-charcoal text-[16px] mt-sm">
Reusable simulation blueprints for red team operations. Reusable simulation blueprints for red team operations.
</p> </p>
@@ -94,7 +94,7 @@ export function TemplatesListPage(): JSX.Element {
{mitreCount(t) === 0 ? '—' : mitreCount(t)} {mitreCount(t) === 0 ? '—' : mitreCount(t)}
</td> </td>
<td className="px-xl py-md text-charcoal">{t.created_by.username}</td> <td className="px-xl py-md text-charcoal">{t.created_by.username}</td>
<td className="px-xl py-md text-charcoal">{formatDate(t.updated_at)}</td> <td className="px-xl py-md text-charcoal font-mono">{formatDate(t.updated_at)}</td>
<td className="px-xl py-md text-right"> <td className="px-xl py-md text-right">
<div className="inline-flex gap-sm"> <div className="inline-flex gap-sm">
<Link to={`/admin/templates/${t.id}/edit`} className="btn-text-link"> <Link to={`/admin/templates/${t.id}/edit`} className="btn-text-link">

6
frontend/src/pages/UsersAdminPage.tsx
View File

@@ -102,7 +102,7 @@ export function UsersAdminPage(): JSX.Element {
return ( return (
<div className="flex flex-col gap-xl"> <div className="flex flex-col gap-xl">
<header> <header>
<h1 className="text-[44px] font-medium leading-none">User accounts</h1> <h1 className="text-[32px] font-medium leading-none">User accounts</h1>
<p className="text-charcoal text-[16px] mt-sm"> <p className="text-charcoal text-[16px] mt-sm">
Manage local accounts. Admins can create new red team or SOC analysts. Manage local accounts. Admins can create new red team or SOC analysts.
</p> </p>
@@ -205,7 +205,7 @@ export function UsersAdminPage(): JSX.Element {
// per-row reconciliation (reset-password state leaked across rows). // per-row reconciliation (reset-password state leaked across rows).
<Fragment key={u.id}> <Fragment key={u.id}>
<tr className="border-b border-hairline last:border-0"> <tr className="border-b border-hairline last:border-0">
<td className="px-xl py-md font-medium text-ink"> <td className="px-xl py-md font-mono font-medium text-ink">
{u.username} {u.username}
{isSelf ? ( {isSelf ? (
<span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]"> <span className="ml-sm text-[12px] text-graphite uppercase tracking-[0.5px]">
@@ -222,7 +222,7 @@ export function UsersAdminPage(): JSX.Element {
disabled={patchMutation.isPending} disabled={patchMutation.isPending}
/> />
</td> </td>
<td className="px-xl py-md text-charcoal">{u.created_at}</td> <td className="px-xl py-md text-charcoal font-mono">{u.created_at}</td>
<td className="px-xl py-md text-right"> <td className="px-xl py-md text-right">
<div className="inline-flex gap-sm"> <div className="inline-flex gap-sm">
<button <button