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.
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
// Shared incident "type" badge — used on the incidents list, incident detail,
|
|
// and the dashboard's active-incidents panel. `other` covers anything outside
|
|
// the four radio-traffic archetypes (rail ops, public works, utility
|
|
// coordination, …) and must always resolve to a styled badge, never fall
|
|
// through unstyled.
|
|
//
|
|
// Type is carried by SHAPE (TypeGlyph), never hue — see UI_REDESIGN.md §2.3.
|
|
// This badge is the transitional/list-row form: glyph + word in neutral ink.
|
|
import { TypeGlyph } from "@/components/marks/TypeGlyph";
|
|
|
|
const TYPE_LABEL: Record<string, string> = {
|
|
fire: "Fire",
|
|
police: "Police",
|
|
ems: "EMS",
|
|
accident: "Collision",
|
|
collision: "Collision",
|
|
other: "Other",
|
|
};
|
|
|
|
export function TypeBadge({ type }: { type: string | null }) {
|
|
const label = TYPE_LABEL[type ?? "other"] ?? TYPE_LABEL.other;
|
|
return (
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full bg-raised text-ink-2">
|
|
<TypeGlyph type={type} size={16} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|