feat(ui): cohesive frontend polish — design system + per-screen refinement
Distill the UI into a single, recognizable voice: a precision instrument for one operator on one machine. Bloomberg-coded chrome, warm-paper detail surfaces, mono-heavy numerics, with one editorial serif accent for moments of weight. Design system - Three-font stack: Geist Sans (UI), Geist Mono (data), Instrument Serif (editorial display). No Inter, no system fonts. - Two surfaces: dark chrome (--background, --accent, --signal) and warm paper detail surfaces (--surface, --surface-ink*). - Inbox has its own Ticker Tape terminal palette (--tt-*). - Shared component classes: .eyebrow, .mono, .display, .surface, .surface-2, .row-hover, .nav-active, .kbd, .editorial, .hairline. - --m-* token aliases for the legacy drawer components so test- asserted class strings keep resolving to the same hue family. Drawers (Claim + Remit) - Editorial display face for totals (paid/adjustment amounts). - Color-coded money tiles: green-tinted paid card, amber-tinted adjustment card when non-zero, muted otherwise. - Tabs get accent-blue underline + CSS-driven active state. - Validation banners with proper background opacity + ring-around- dot success badge. - StateHistoryTimeline: dashed border, ring around dots, ↳ prefix for remit ids. - DiagnosesList, PartiesGrid, MatchedRemitCard, CasAdjustmentsPanel: refined typography, dashed dividers, italic descriptions, mono amounts, font-semibold totals, hover row tints. Inbox Ticker Tape - Custom RowCheckbox with sr-only input + amber accent. - Alternating row striping, hover tints, accent rail with inset shadow on selection. - Refined sparkline with glow at high values. - BulkBar: bottom-floating bar with amber count chip, larger shadow. - CandidateBreakdown: animated progress bars with amber gradient. - InboxHeader: Instrument Serif headline, mono day/date stamp, pulsing amber status dot. Dialogs & search - NewClaimDialog: editorial title, mono NPI/CPT/amount fields. - SearchBar: refined input row with mono, footer with pulsing loading indicator. - KeyboardCheatsheet: monogram icon chip, hover row states, refined eyebrow header. Primitives - StatusBadge / ClaimStateBadge: per-state dot indicators. - SelectItem: data-[highlighted]:outline tokens for keyboard a11y. - Table primitives: refined header treatment, hover/focus states. Tests + build - 354/354 tests passing across 59 files. - Vite build clean (53.84 kB CSS / 560.86 kB JS). - Eyebrow assertions updated to match the consolidated .eyebrow class (intact visual contract, abstracted class string). - Badge variant tokens updated to the polished bg-muted/80 / /0.14 opacity scale.
This commit is contained in:
Tyler
@@ -15,30 +15,49 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
const kindConfig: Record<
|
||||
Activity["kind"],
|
||||
{ icon: LucideIcon; tone: string }
|
||||
{ icon: LucideIcon; tone: string; tint: string }
|
||||
> = {
|
||||
claim_submitted: { icon: FileText, tone: "text-[hsl(var(--accent))]" },
|
||||
claim_accepted: { icon: CheckCircle2, tone: "text-[hsl(var(--success))]" },
|
||||
claim_paid: { icon: Banknote, tone: "text-[hsl(var(--success))]" },
|
||||
claim_denied: { icon: XCircle, tone: "text-destructive" },
|
||||
remit_received: { icon: Pill, tone: "text-[hsl(var(--warning))]" },
|
||||
provider_added: { icon: UserPlus, tone: "text-foreground" },
|
||||
// `manual_match` is emitted by the backend when an operator manually
|
||||
// pairs a remit to a claim from the Reconciliation page — see
|
||||
// `cyclone.store` `record_manual_match`. Wrench is the closest fit;
|
||||
// we keep it neutral-tone so it doesn't read as a status.
|
||||
manual_match: { icon: Wrench, tone: "text-muted-foreground" },
|
||||
claim_submitted: {
|
||||
icon: FileText,
|
||||
tone: "text-[hsl(var(--accent))]",
|
||||
tint: "bg-accent/10",
|
||||
},
|
||||
claim_accepted: {
|
||||
icon: CheckCircle2,
|
||||
tone: "text-[hsl(var(--success))]",
|
||||
tint: "bg-[hsl(var(--success)/0.12)]",
|
||||
},
|
||||
claim_paid: {
|
||||
icon: Banknote,
|
||||
tone: "text-[hsl(var(--success))]",
|
||||
tint: "bg-[hsl(var(--success)/0.12)]",
|
||||
},
|
||||
claim_denied: {
|
||||
icon: XCircle,
|
||||
tone: "text-destructive",
|
||||
tint: "bg-destructive/12",
|
||||
},
|
||||
remit_received: {
|
||||
icon: Pill,
|
||||
tone: "text-[hsl(var(--warning))]",
|
||||
tint: "bg-[hsl(var(--warning)/0.12)]",
|
||||
},
|
||||
provider_added: {
|
||||
icon: UserPlus,
|
||||
tone: "text-foreground",
|
||||
tint: "bg-muted/60",
|
||||
},
|
||||
manual_match: {
|
||||
icon: Wrench,
|
||||
tone: "text-muted-foreground",
|
||||
tint: "bg-muted/40",
|
||||
},
|
||||
};
|
||||
|
||||
// Defensive fallback: if the backend ever emits a kind this UI doesn't
|
||||
// know about (e.g. a new kind landed server-side before the frontend
|
||||
// picked it up), render a neutral icon instead of crashing the whole
|
||||
// Activity Log page. The kindConfig map above stays exhaustive for
|
||||
// known kinds so TypeScript still catches missing entries at compile
|
||||
// time; this only protects the runtime path.
|
||||
const FALLBACK_KIND: { icon: LucideIcon; tone: string } = {
|
||||
const FALLBACK_KIND: { icon: LucideIcon; tone: string; tint: string } = {
|
||||
icon: Circle,
|
||||
tone: "text-muted-foreground",
|
||||
tint: "bg-muted/40",
|
||||
};
|
||||
|
||||
export function ActivityFeed({
|
||||
@@ -50,7 +69,7 @@ export function ActivityFeed({
|
||||
}) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-muted-foreground px-2 py-6 text-center">
|
||||
<div className="text-[13px] text-muted-foreground px-2 py-6 text-center">
|
||||
{emptyMessage}
|
||||
</div>
|
||||
);
|
||||
@@ -67,28 +86,29 @@ export function ActivityFeed({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-0.5 h-7 w-7 shrink-0 rounded-md bg-muted/50 flex items-center justify-center",
|
||||
"mt-0.5 h-7 w-7 shrink-0 rounded-md ring-1 ring-inset ring-border/40 flex items-center justify-center",
|
||||
cfg.tint,
|
||||
cfg.tone
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5" strokeWidth={1.75} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-foreground/95 leading-snug">
|
||||
<div className="text-[13px] text-foreground/95 leading-snug">
|
||||
{a.message}
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground mt-0.5 flex items-center gap-2">
|
||||
<div className="mono text-[10.5px] text-muted-foreground mt-0.5 flex items-center gap-2">
|
||||
<span>{fmt.relative(a.timestamp)}</span>
|
||||
{a.npi ? (
|
||||
<>
|
||||
<span className="opacity-40">·</span>
|
||||
<span className="num">{a.npi}</span>
|
||||
<span>{a.npi}</span>
|
||||
</>
|
||||
) : null}
|
||||
{a.amount ? (
|
||||
<>
|
||||
<span className="opacity-40">·</span>
|
||||
<span className="num">{fmt.usd(a.amount)}</span>
|
||||
<span>{fmt.usd(a.amount)}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user