Logan Cusano
3a786bc227
Rewrite components/ui/* (Button, Card, Badge, PageHeader, EmptyState, Skeleton) against the chunk-1 tokens instead of hardcoded gray-9xx classes, and drop the remaining font-mono from label/heading text. Add the three colour-blindness-validated encoding components from UI_REDESIGN.md §2.3: - components/marks/SeverityMark.tsx — glyph (filled triangle / outline triangle / outline circle) + optional spine + optional label, from the four-level severity ladder. Colour is never the only channel. - components/marks/TypeGlyph.tsx — five stroked SVG glyphs (fire, police, ems, collision, other) in currentColor. Incident type is now shape, not hue, since five hues can't clear an all-pairs CVD gate. - components/marks/NodeMark.tsx — diamond at four weights (filled+ring / filled / hollow / hollow-dashed). Green is gone from node state entirely. lib/severity.tsx now renders through SeverityMark; SEVERITY_COLORS reads the validated sev-moderate/sev-major tokens with routine/minor neutral. IncidentBadges.tsx's TypeBadge is reimplemented on TypeGlyph instead of a coloured pill. Per UI_REDESIGN.md chunk 2.
28 lines
901 B
TypeScript
28 lines
901 B
TypeScript
/** Loading placeholder block. Use instead of a bare "Loading…" string wherever the eventual
|
|
* content has a predictable shape (cards, table rows, stat tiles). */
|
|
export function Skeleton({ className }: { className?: string }) {
|
|
return <div className={`skeleton bg-raised rounded-md ${className ?? "h-4 w-full"}`} />;
|
|
}
|
|
|
|
export function SkeletonCard() {
|
|
return (
|
|
<div className="bg-surface border border-line rounded-xl p-4 space-y-3">
|
|
<Skeleton className="h-4 w-1/3" />
|
|
<Skeleton className="h-3 w-2/3" />
|
|
<Skeleton className="h-3 w-1/2" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SkeletonRow({ cols = 5 }: { cols?: number }) {
|
|
return (
|
|
<tr className="border-b border-line">
|
|
{Array.from({ length: cols }).map((_, i) => (
|
|
<td key={i} className="px-4 py-3">
|
|
<Skeleton className="h-3 w-full max-w-[8rem]" />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
);
|
|
}
|