From 522eaaf101c94b7ec9fa14177f1b223960635fda Mon Sep 17 00:00:00 2001 From: null Date: Fri, 10 Jul 2026 18:03:15 -0500 Subject: [PATCH] chore(deps)!: tailwind 3 -> 4 via @tailwindcss/vite (4i) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Official codemod (run in a clean worktree; docker-owned data/ blocks it in-tree): tailwind.config.js inlined into client/index.css as CSS-first @theme/@utility (config file deleted — v4 auto-detects content, which also retires the .tsx-content-glob failure class from the TS migration), 33 template files' class renames applied, tailwindcss-animate loads via the v4 @plugin bridge. Build runs through @tailwindcss/vite; postcss config is now plugin-free. tailwind-merge -> 3 (v4 class model). Visual-regression gate: only diffs were a ~2px global preflight shift + the version string (baseline predated 0.41.1); re-baselined both login screenshots in this commit after review. webauthn.probe confined to the probe project (it enables WebAuthn for the seeded user, racing the parallel UI projects' password logins). e2e 27 passed, probe 18/18, PROD SMOKE PASS, typecheck/lint/tests green. Co-Authored-By: Claude Fable 5 --- client/components/BillMerchantRules.tsx | 2 +- client/components/CalendarFeedManager.tsx | 2 +- client/components/ReleaseNotesDialog.tsx | 2 +- client/components/admin/OnboardingWizard.tsx | 2 +- .../bill-modal/PaymentHistoryList.tsx | 2 +- .../components/data/DownloadMyDataSection.tsx | 4 +- .../data/TransactionMatchingSection.tsx | 2 +- client/components/layout/BrandBlock.tsx | 4 +- client/components/layout/NavPill.tsx | 2 +- client/components/layout/Sidebar.tsx | 6 +- .../components/snowball/PlanHistoryPanel.tsx | 2 +- .../components/snowball/PlanStatusBanner.tsx | 2 +- client/components/tracker/CashFlowCard.tsx | 4 +- .../components/tracker/DriftInsightPanel.tsx | 6 +- .../tracker/OverdueCommandCenter.tsx | 2 +- client/components/tracker/TrackerBucket.tsx | 2 +- client/components/tracker/TrackerRow.tsx | 6 +- client/components/ui/app-primitives.tsx | 8 +- client/components/ui/dropdown-menu.tsx | 10 +- client/components/ui/select.tsx | 6 +- client/components/ui/table.tsx | 8 +- client/components/ui/theme-toggle.tsx | 2 +- client/index.css | 413 +++++-- client/lib/trackerUtils.ts | 10 +- client/pages/AboutPage.tsx | 2 +- client/pages/CalendarPage.tsx | 22 +- client/pages/LoginPage.tsx | 2 +- client/pages/ReleaseNotesPage.tsx | 2 +- client/pages/RoadmapPage.tsx | 4 +- client/pages/SnowballPage.tsx | 2 +- client/pages/SubscriptionsPage.tsx | 2 +- client/pages/TrackerPage.tsx | 14 +- docs/UI_IMPROVEMENTS.md | 74 +- .../login-chromium-desktop-linux.png | Bin 266101 -> 267640 bytes .../login-chromium-mobile-linux.png | Bin 91313 -> 92637 bytes package-lock.json | 1035 +++++------------ package.json | 5 +- playwright.config.js | 18 +- postcss.config.js | 4 +- tailwind.config.js | 76 -- vite.config.mjs | 2 + 41 files changed, 749 insertions(+), 1024 deletions(-) delete mode 100644 tailwind.config.js diff --git a/client/components/BillMerchantRules.tsx b/client/components/BillMerchantRules.tsx index 8292919..acc05af 100644 --- a/client/components/BillMerchantRules.tsx +++ b/client/components/BillMerchantRules.tsx @@ -77,7 +77,7 @@ function RuleChip({
{rule.merchant} diff --git a/client/components/CalendarFeedManager.tsx b/client/components/CalendarFeedManager.tsx index ff547e3..15f8826 100644 --- a/client/components/CalendarFeedManager.tsx +++ b/client/components/CalendarFeedManager.tsx @@ -177,7 +177,7 @@ export function CalendarFeedManager({ {!loading && active && ( <> -
+
Anyone with this URL can see the bill events in this feed. Regenerate or revoke it if it was shared somewhere it should not be.
diff --git a/client/components/ReleaseNotesDialog.tsx b/client/components/ReleaseNotesDialog.tsx index c1b0b05..bab7119 100644 --- a/client/components/ReleaseNotesDialog.tsx +++ b/client/components/ReleaseNotesDialog.tsx @@ -75,7 +75,7 @@ export function ReleaseNotesDialog() { src={RELEASE_NOTES.image.src} alt={RELEASE_NOTES.image.alt} loading="lazy" - className="aspect-[16/10] w-full object-contain" + className="aspect-16/10 w-full object-contain" />
diff --git a/client/components/admin/OnboardingWizard.tsx b/client/components/admin/OnboardingWizard.tsx index eb9f81b..1664941 100644 --- a/client/components/admin/OnboardingWizard.tsx +++ b/client/components/admin/OnboardingWizard.tsx @@ -86,7 +86,7 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
- +

Set up {BRAND.name} with a clean privacy line.

diff --git a/client/components/bill-modal/PaymentHistoryList.tsx b/client/components/bill-modal/PaymentHistoryList.tsx index 63e625b..99d6f28 100644 --- a/client/components/bill-modal/PaymentHistoryList.tsx +++ b/client/components/bill-modal/PaymentHistoryList.tsx @@ -99,7 +99,7 @@ export default function PaymentHistoryList({ className={cn( 'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5', historyOnly - ? 'border-amber-500/25 bg-amber-500/[0.06] opacity-85' + ? 'border-amber-500/25 bg-amber-500/6 opacity-85' : 'border-border/60 bg-background/35', )} > diff --git a/client/components/data/DownloadMyDataSection.tsx b/client/components/data/DownloadMyDataSection.tsx index 50be9c9..9b001fc 100644 --- a/client/components/data/DownloadMyDataSection.tsx +++ b/client/components/data/DownloadMyDataSection.tsx @@ -79,11 +79,11 @@ function PaymentsExport() {
- setFrom(e.target.value)} className="mt-1 h-9 w-[9.5rem]" /> + setFrom(e.target.value)} className="mt-1 h-9 w-38" />
- setTo(e.target.value)} className="mt-1 h-9 w-[9.5rem]" /> + setTo(e.target.value)} className="mt-1 h-9 w-38" />
Format diff --git a/client/components/data/TransactionMatchingSection.tsx b/client/components/data/TransactionMatchingSection.tsx index f9e449e..00a3885 100644 --- a/client/components/data/TransactionMatchingSection.tsx +++ b/client/components/data/TransactionMatchingSection.tsx @@ -140,7 +140,7 @@ function SuggestedMatchesPanel({ suggestions, loading, actionId, onAccept, onRej

-
+

{bill.name || `Bill ${suggestion.billId}`}

diff --git a/client/components/layout/BrandBlock.tsx b/client/components/layout/BrandBlock.tsx index 7884d5b..55b4326 100644 --- a/client/components/layout/BrandBlock.tsx +++ b/client/components/layout/BrandBlock.tsx @@ -14,13 +14,13 @@ export const BrandBlock = React.memo(function BrandBlock({ aria-label={BRAND.name} className="group flex min-w-0 items-center gap-3 rounded-2xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" > - + {adminMode ? 'Admin workspace' : 'Home workspace'} - + {adminMode ? 'System care and access' : 'Bills, timing, and clarity'} diff --git a/client/components/layout/NavPill.tsx b/client/components/layout/NavPill.tsx index d29db2b..d7520fb 100644 --- a/client/components/layout/NavPill.tsx +++ b/client/components/layout/NavPill.tsx @@ -50,7 +50,7 @@ export const NavPill = React.memo(function NavPill({ - + {badge > 99 ? '99+' : badge} diff --git a/client/components/layout/Sidebar.tsx b/client/components/layout/Sidebar.tsx index 344ab3a..70c40bc 100644 --- a/client/components/layout/Sidebar.tsx +++ b/client/components/layout/Sidebar.tsx @@ -124,7 +124,7 @@ function TrackerMenu({ - + {badge > 99 ? '99+' : badge} @@ -309,8 +309,8 @@ export default function Sidebar({ }, [adminMode]); return ( -
-
+
+