null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

fix(ui): restore row-status tints lost in the tailwind 4 codemod 

The v4 upgrade codemod rewrote arbitrary-value opacity modifiers like
bg-emerald-500/[0.025] to bare fractional form (/2.5), but v4 emits NO
rule for fractional bare opacity — the tracker/calendar row tints and
two banner backgrounds silently disappeared (6 classes, 4 files). Found
by the code-review line-scan; invisible to the screenshot baseline
(login page only) and the text-based census. Restored the /[0.025]
arbitrary form; compiled CSS verified to emit all six selectors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
null 2026-07-10 22:49:35 -05:00
parent 044bdbe1f1
commit a00013d778
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/data/TransactionMatchingSection.tsx
View File

@ -140,7 +140,7 @@ function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onRej
</p>
</div>
<div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/4.5 px-2.5 py-2">
<div className="mt-3 flex items-center gap-2 rounded-md border border-emerald-500/15 bg-emerald-500/[0.045] px-2.5 py-2">
<Link2 className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
<div className="min-w-0">
<p className="truncate text-sm font-medium">{bill.name || `Bill ${suggestion.billId}`}</p>

2
client/components/tracker/OverdueCommandCenter.tsx
View File

@ -226,7 +226,7 @@ export default function OverdueCommandCenter({
return (
<Collapsible open={isOpen} onOpenChange={setOpen}>
<div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/5.5 dark:border-amber-300/25 dark:bg-amber-400/5">
<div className="surface-premium overflow-hidden border-amber-500/30 bg-amber-500/[0.055] dark:border-amber-300/25 dark:bg-amber-400/5">
{/* Header */}
<div className="flex items-center gap-2 px-3 py-3 sm:px-4">
<CollapsibleTrigger asChild>

8
client/lib/trackerUtils.ts
View File

@ -51,16 +51,16 @@ export const TRACKER_SORT_DEFAULT_DIRS = Object.fromEntries(
);
export const ROW_STATUS_CLS: Record<string, string> = {
paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/2.5 dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
paid: 'border-l-2 border-l-emerald-500/45 bg-emerald-500/[0.025] dark:bg-emerald-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-emerald-500/45',
autodraft:
'border-l-2 border-l-teal-500/45 bg-teal-500/2.5 dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
'border-l-2 border-l-teal-500/45 bg-teal-500/[0.025] dark:bg-teal-400/[0.018] [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-teal-500/45',
upcoming:
'border-l-2 border-l-transparent [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-transparent',
due_soon:
'border-l-2 border-l-amber-400/65 bg-amber-400/5.5 dark:bg-amber-300/2 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
'border-l-2 border-l-amber-400/65 bg-amber-400/[0.055] dark:bg-amber-300/2 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-amber-400/65',
late: 'border-l-2 border-l-orange-400/80 bg-orange-500/9 ring-1 ring-inset ring-orange-400/20 dark:bg-orange-400/[0.07] dark:ring-orange-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-orange-400/80',
missed:
'border-l-2 border-l-rose-400/80 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/7.5 dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
'border-l-2 border-l-rose-400/80 bg-rose-500/10 ring-1 ring-inset ring-rose-400/20 dark:bg-rose-400/[0.075] dark:ring-rose-300/20 [&>td:first-child]:border-l-2 [&>td:first-child]:border-l-rose-400/80',
};
export const STATUS_META = {