From 6d8f361d7d53e721b55a480d6e43445107ec560e Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 14:34:06 -0500
Subject: [PATCH] fix: visual consistency - toasts, typography, focus rings,
 container padding

- Remove richColors from Sonner toasts, limit stacking to 3
- Add font-heading to all page H1s (7 files)
- Add font-label (Outfit) to TagBadges component
- Fix focus ring tokens on analytics pages
- Replace deprecated glass-stat with design system tokens
- Standardize container padding on analytics pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/admin/PageHeader.tsx      | 2 +-
 frontend/src/components/common/TagBadges.tsx      | 4 ++--
 frontend/src/main.tsx                             | 3 ++-
 frontend/src/pages/AccountSettingsPage.tsx        | 4 ++--
 frontend/src/pages/FeedbackPage.tsx               | 2 +-
 frontend/src/pages/MyAnalyticsPage.tsx            | 6 +++---
 frontend/src/pages/MyTreesPage.tsx                | 2 +-
 frontend/src/pages/TeamAnalyticsPage.tsx          | 6 +++---
 frontend/src/pages/account/TeamCategoriesPage.tsx | 2 +-
 9 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/admin/PageHeader.tsx b/frontend/src/components/admin/PageHeader.tsx
index a388f00f..d282bcdc 100644
--- a/frontend/src/components/admin/PageHeader.tsx
+++ b/frontend/src/components/admin/PageHeader.tsx
@@ -12,7 +12,7 @@ export function PageHeader({ title, description, action, className }: PageHeader
   return (
     <div className={cn('flex items-start justify-between gap-4', className)}>
       <div>
-        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+        <h1 className="text-2xl font-bold font-heading text-foreground">{title}</h1>
         {description && (
           <p className="mt-1 text-sm text-muted-foreground">{description}</p>
         )}
diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index bd93cbc6..95d850b2 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -34,7 +34,7 @@ export function TagBadges({
           }}
           disabled={!onTagClick}
           className={cn(
-            'rounded-full transition-colors',
+            'rounded-full font-label transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
               ? 'bg-accent text-muted-foreground hover:bg-accent'
@@ -48,7 +48,7 @@ export function TagBadges({
       {hiddenCount > 0 && (
         <span
           className={cn(
-            'rounded-full',
+            'rounded-full font-label',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             'bg-accent/50 text-muted-foreground'
           )}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index b739ee18..e8bd2b5b 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -10,8 +10,9 @@ createRoot(document.getElementById('root')!).render(
     <Toaster
       position="top-right"
       expand={false}
-      richColors
       closeButton
+      visibleToasts={3}
+      gap={8}
     />
     <App />
   </StrictMode>,
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index e6b3c58a..6266f44c 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -156,7 +156,7 @@ export function AccountSettingsPage() {
       <div className="mb-8">
         <div className="flex items-center gap-3">
           <Building2 className="h-8 w-8 text-muted-foreground" />
-          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">Account Settings</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Account Settings</h1>
         </div>
         <p className="mt-2 text-muted-foreground">
           Manage your account, subscription, and team
@@ -586,7 +586,7 @@ function UsageStat({
   const isAtLimit = !isUnlimited && current >= max
 
   return (
-    <div className="glass-stat rounded-md p-3">
+    <div className="rounded-md border border-border bg-card p-3">
       <p className="text-xs font-medium text-muted-foreground">{label}</p>
       <p
         className={cn(
diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx
index 5812f4da..b1f1ff63 100644
--- a/frontend/src/pages/FeedbackPage.tsx
+++ b/frontend/src/pages/FeedbackPage.tsx
@@ -135,7 +135,7 @@ export function FeedbackPage() {
       <div className="mb-8">
         <div className="flex items-center gap-3">
           <MessageSquareText className="h-8 w-8 text-muted-foreground" />
-          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">Send Feedback</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Send Feedback</h1>
         </div>
         <p className="mt-2 text-muted-foreground">
           Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts.
diff --git a/frontend/src/pages/MyAnalyticsPage.tsx b/frontend/src/pages/MyAnalyticsPage.tsx
index 1ead480a..a7b7d88a 100644
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -63,14 +63,14 @@ export default function MyAnalyticsPage() {
   const outcomeBreakdown = summary.outcome_breakdown
 
   return (
-    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span title="My Analytics">
             <BarChart3 size={24} className="text-foreground" />
           </span>
-          <h1 className="text-2xl font-bold text-foreground">My Analytics</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground">My Analytics</h1>
         </div>
 
         <div className="flex items-center gap-3">
@@ -85,7 +85,7 @@ export default function MyAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index ce3446da..4591de17 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -116,7 +116,7 @@ export function MyTreesPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">My Flows</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">My Flows</h1>
           <p className="mt-2 text-muted-foreground">
             Your forked and custom flows
           </p>
diff --git a/frontend/src/pages/TeamAnalyticsPage.tsx b/frontend/src/pages/TeamAnalyticsPage.tsx
index 3676af03..f2a27342 100644
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -68,14 +68,14 @@ export default function TeamAnalyticsPage() {
   const { summary, time_series, top_flows, top_engineers } = data
 
   return (
-    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span title="Team Analytics">
             <BarChart3 size={24} className="text-foreground" />
           </span>
-          <h1 className="text-2xl font-bold text-foreground">Team Analytics</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground">Team Analytics</h1>
         </div>
 
         <div className="flex items-center gap-3">
@@ -88,7 +88,7 @@ export default function TeamAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index c4021317..dc47e24e 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -83,7 +83,7 @@ export function TeamCategoriesPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-foreground">Team Categories</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground">Team Categories</h1>
           <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
         </div>
         <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>