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:
@@ -14,23 +14,40 @@ export function BulkBar({
|
||||
if (count === 0) return null;
|
||||
return (
|
||||
<div
|
||||
className="fixed bottom-4 left-1/2 px-4 py-2 font-mono flex gap-3 z-20"
|
||||
className="fixed bottom-6 left-1/2 px-3 py-2.5 mono flex items-center gap-2 z-20 rounded-md"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
background: "var(--tt-bg-elev)",
|
||||
border: "1px solid var(--tt-amber)",
|
||||
color: "var(--tt-ink)",
|
||||
fontSize: 11,
|
||||
boxShadow:
|
||||
"0 0 0 1px hsl(36 88% 56% / 0.15), 0 12px 40px -8px hsl(0 0% 0% / 0.6), inset 0 1px 0 0 hsl(0 0% 100% / 0.04)",
|
||||
}}
|
||||
>
|
||||
<span className="tabular-nums" style={{ color: "var(--tt-amber)" }}>
|
||||
{count} selected
|
||||
<span
|
||||
className="tabular-nums flex items-center gap-1.5 px-2 py-0.5 rounded-sm"
|
||||
style={{
|
||||
color: "var(--tt-bg)",
|
||||
background: "var(--tt-amber)",
|
||||
fontWeight: 700,
|
||||
fontSize: 11,
|
||||
letterSpacing: "0.04em",
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
<span style={{ color: "var(--tt-amber)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
|
||||
selected
|
||||
</span>
|
||||
|
||||
<span className="mx-1 h-4 w-px" style={{ background: "var(--tt-muted)" }} aria-hidden />
|
||||
|
||||
{lane === "rejected" && (
|
||||
<button
|
||||
onClick={onResubmit}
|
||||
className="hover:underline"
|
||||
style={{ color: "var(--tt-ink)" }}
|
||||
className="px-2.5 py-1 rounded-sm uppercase tracking-[0.12em] transition-colors hover:bg-[color:var(--tt-amber)]/10 focus-visible:outline-none focus-visible:bg-[color:var(--tt-amber)]/10"
|
||||
style={{ color: "var(--tt-ink)", fontWeight: 600 }}
|
||||
>
|
||||
Re-submit ({count})
|
||||
</button>
|
||||
@@ -38,16 +55,16 @@ export function BulkBar({
|
||||
{lane === "candidates" && (
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="hover:underline"
|
||||
style={{ color: "var(--tt-ink)" }}
|
||||
className="px-2.5 py-1 rounded-sm uppercase tracking-[0.12em] transition-colors hover:bg-[color:var(--tt-amber)]/10 focus-visible:outline-none focus-visible:bg-[color:var(--tt-amber)]/10"
|
||||
style={{ color: "var(--tt-ink)", fontWeight: 600 }}
|
||||
>
|
||||
Dismiss ({count})
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onExport}
|
||||
className="hover:underline"
|
||||
style={{ color: "var(--tt-ink)" }}
|
||||
className="px-2.5 py-1 rounded-sm uppercase tracking-[0.12em] transition-colors hover:bg-[color:var(--tt-amber)]/10 focus-visible:outline-none focus-visible:bg-[color:var(--tt-amber)]/10"
|
||||
style={{ color: "var(--tt-ink)", fontWeight: 600 }}
|
||||
>
|
||||
Export CSV ({count})
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user