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:
@@ -1,4 +1,5 @@
|
||||
import type { InboxClaimRow, InboxCandidateRow, ScoreBreakdown } from "@/lib/inbox-api";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type Accent = "oxblood" | "amber" | "ink-blue" | "muted";
|
||||
|
||||
@@ -30,19 +31,23 @@ function Sparkline({ breakdown }: { breakdown: ScoreBreakdown | null }) {
|
||||
if (!breakdown) return null;
|
||||
const fields: Array<keyof ScoreBreakdown> = ["patient", "date", "amount", "provider"];
|
||||
return (
|
||||
<span className="inline-flex items-end gap-0.5 align-middle h-3">
|
||||
<span className="inline-flex items-end gap-[2px] align-middle h-3.5">
|
||||
{fields.map((k) => {
|
||||
const v = breakdown[k] as number;
|
||||
const h = Math.max(2, Math.round(v * 12));
|
||||
const h = Math.max(3, Math.round(v * 14));
|
||||
return (
|
||||
<span
|
||||
key={k}
|
||||
title={`${k}: ${v.toFixed(2)}`}
|
||||
className="inline-block w-1.5"
|
||||
style={{
|
||||
height: `${h}px`,
|
||||
background: v >= 0.5 ? "var(--tt-amber)" : "var(--tt-muted)",
|
||||
}}
|
||||
className={cn(
|
||||
"inline-block w-[3px] rounded-[1px] transition-all",
|
||||
v >= 0.7
|
||||
? "bg-[color:var(--tt-amber)] shadow-[0_0_4px_-1px_var(--tt-amber)]"
|
||||
: v >= 0.5
|
||||
? "bg-[color:var(--tt-amber)]/70"
|
||||
: "bg-[color:var(--tt-muted)]"
|
||||
)}
|
||||
style={{ height: `${h}px` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@@ -67,41 +72,48 @@ export function InboxRow({ row, accent, onClick }: Props) {
|
||||
return (
|
||||
<tr
|
||||
onClick={onClick}
|
||||
className="cursor-pointer hover:bg-white/[0.03] transition-colors"
|
||||
style={{ borderBottom: "1px solid var(--tt-bg-elev)" }}
|
||||
className="cursor-pointer transition-colors group"
|
||||
>
|
||||
<td style={{ width: 4, background: ACCENT_VAR[accent], padding: 0 }} />
|
||||
<td
|
||||
className="py-2 pl-3 font-mono"
|
||||
style={{ color: "var(--tt-ink)", fontSize: 12 }}
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 4,
|
||||
background: ACCENT_VAR[accent],
|
||||
padding: 0,
|
||||
boxShadow: `inset 0 0 0 1px ${ACCENT_VAR[accent]}40`,
|
||||
}}
|
||||
/>
|
||||
<td
|
||||
className="py-2.5 pl-3 mono font-semibold"
|
||||
style={{ color: "var(--tt-ink)", fontSize: 12, letterSpacing: "-0.005em" }}
|
||||
>
|
||||
{id}
|
||||
</td>
|
||||
<td
|
||||
className="py-2 font-mono"
|
||||
style={{ color: "var(--tt-ink-dim)", fontSize: 11 }}
|
||||
className="py-2.5 mono"
|
||||
style={{ color: reason ? "var(--tt-oxblood)" : "var(--tt-amber)", fontSize: 11 }}
|
||||
>
|
||||
{reason ?? (topScore != null ? `score ${topScore}` : "")}
|
||||
</td>
|
||||
<td
|
||||
className="py-2 font-mono tabular-nums"
|
||||
className="py-2.5 mono tabular-nums"
|
||||
style={{ color: "var(--tt-ink-dim)", fontSize: 11 }}
|
||||
>
|
||||
{fmtAgo(rejectedAt)}
|
||||
</td>
|
||||
<td
|
||||
className="py-2 text-right font-mono tabular-nums"
|
||||
className="py-2.5 text-right mono tabular-nums font-semibold"
|
||||
style={{ color: "var(--tt-ink)", fontSize: 12 }}
|
||||
>
|
||||
{charge}
|
||||
</td>
|
||||
<td
|
||||
className="py-2 pl-4 uppercase tracking-wider"
|
||||
style={{ color: "var(--tt-ink-dim)", fontSize: 10 }}
|
||||
className="py-2.5 pl-4 mono uppercase"
|
||||
style={{ color: "var(--tt-ink-dim)", fontSize: 10, letterSpacing: "0.14em" }}
|
||||
>
|
||||
{payer}
|
||||
</td>
|
||||
<td className="py-2 pr-3">
|
||||
<td className="py-2.5 pr-3">
|
||||
<Sparkline breakdown={filled} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user