gridpilot.gg/apps/website/docs/PHASE_5_AUDIT_REPORT.md

Phase 5 Audit Report: Theme Consistency & Mobile Responsiveness

Executive Summary

This audit covers all new components implemented in Phases 2-4 of the League Pages Enhancement plan. The audit focused on two key areas:

1. Theme Consistency: Ensuring all components use the "Modern Precision" theme with proper color palette, UI primitives, spacing, and typography
2. Mobile Responsiveness: Ensuring all components work well on mobile breakpoints with appropriate touch targets and responsive layouts

Theme Consistency Issues

1. NextRaceCountdownWidget (apps/website/components/leagues/NextRaceCountdownWidget.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 77: background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))'
   • Line 78: borderColor: 'rgba(59, 130, 246, 0.3)'
   • Line 88: background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)'
   • Line 112: color="var(--text-gray-500)" (should use semantic intent)
   • Line 120: color="var(--text-gray-500)" (should use semantic intent)
   • Line 132: color="text-gray-500" (should use semantic variant)
   • Line 141: color="text-primary-blue" (should use semantic intent)
   • Line 144: color="text-gray-500" (should use semantic variant)
   • Line 146: color="text-gray-600" (should use semantic variant)
   • Line 148: color="text-primary-blue" (should use semantic intent)
   • Line 151: color="text-gray-500" (should use semantic variant)
   • Line 155: color="text-primary-blue" (should use semantic intent)
   • Line 158: color="text-gray-500" (should use semantic variant)
   • Line 162: color="text-primary-blue" (should use semantic intent)
   • Line 165: color="text-gray-500" (should use semantic variant)

2. Inconsistent Color Usage: Mixes semantic variants (text-white) with hardcoded colors (text-gray-400, text-gray-500, text-gray-600)

3. Missing Theme Variables: Uses custom CSS variables like --text-gray-500 instead of theme variables

Theme Compliance Score: 4/10

2. SeasonProgressWidget (apps/website/components/leagues/SeasonProgressWidget.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 27: background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))'
   • Line 28: borderColor: 'rgba(34, 197, 94, 0.3)'
   • Line 43: color="var(--performance-green)" (should use semantic intent)
   • Line 46: color="text-white" (should use semantic variant)
   • Line 49: color="text-gray-400" (should use semantic variant)
   • Line 63: color="text-gray-500" (should use semantic variant)
   • Line 66: color="text-performance-green" (should use semantic intent)
   • Line 80: color="text-performance-green" (should use semantic intent)

2. Inconsistent Color Usage: Mixes semantic variants with hardcoded colors

3. Missing Theme Variables: Uses custom CSS variables like --performance-green instead of theme variables

Theme Compliance Score: 5/10

3. AdminQuickViewWidgets (apps/website/components/leagues/AdminQuickViewWidgets.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 39: background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))'
   • Line 40: borderColor: 'rgba(59, 130, 246, 0.3)'
   • Line 54: color="var(--primary-blue)" (should use semantic intent)
   • Line 57: color="text-white" (should use semantic variant)
   • Line 60: color="text-primary-blue" (should use semantic intent)
   • Line 86: background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))'
   • Line 87: borderColor: 'rgba(239, 68, 68, 0.3)'
   • Line 101: color="var(--error-red)" (should use semantic intent)
   • Line 104: color="text-white" (should use semantic variant)
   • Line 107: color="text-error-red" (should use semantic intent)
   • Line 125: color="text-gray-500" (should use semantic variant)
   • Line 140: background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))'
   • Line 141: borderColor: 'rgba(251, 191, 36, 0.3)'
   • Line 155: color="var(--warning-amber)" (should use semantic intent)
   • Line 158: color="text-white" (should use semantic variant)
   • Line 161: color="text-warning-amber" (should use semantic intent)

2. Inconsistent Color Usage: Mixes semantic variants with hardcoded colors

3. Missing Theme Variables: Uses custom CSS variables like --primary-blue, --error-red, --warning-amber instead of theme variables

Theme Compliance Score: 4/10

4. EnhancedLeagueSchedulePanel (apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 119: borderColor="zinc-800" (should use theme variable)
   • Line 119: bg="zinc-900/30" (should use theme variable)
   • Line 120: color="text-zinc-500" (should use semantic variant)
   • Line 132: borderColor="border-outline-steel" (should use theme variable)
   • Line 139: bg="bg-surface-charcoal" (should use theme variable)
   • Line 141: borderColor="border-outline-steel" (should use theme variable)
   • Line 146: color="text-primary-blue" (should use semantic intent)
   • Line 147: color="text-white" (should use semantic variant)
   • Line 154: color="text-zinc-400" (should use semantic variant)
   • Line 165: borderColor="border-outline-steel" (should use theme variable)
   • Line 167: bg="bg-base-black" (should use theme variable)
   • Line 174: color="text-white" (should use semantic variant)
   • Line 180: color="text-zinc-400" (should use semantic variant)
   • Line 184: color="text-zinc-500" (should use semantic variant)
   • Line 189: color="text-zinc-500" (should use semantic variant)
   • Line 195: color="text-zinc-500" (should use semantic variant)
   • Line 196: color="text-zinc-400" (should use semantic variant)

2. Inconsistent Color Usage: Mixes semantic variants with hardcoded colors

3. Missing Theme Variables: Uses custom CSS variables like --border-outline-steel, --bg-surface-charcoal, --bg-base-black instead of theme variables

Theme Compliance Score: 3/10

5. RaceDetailModal (apps/website/components/leagues/RaceDetailModal.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 75: bg="bg-base-black/80" (should use theme variable)
   • Line 88: borderColor="border-outline-steel" (should use theme variable)
   • Line 95: bg="bg-surface-charcoal" (should use theme variable)
   • Line 97: borderColor="border-outline-steel" (should use theme variable)
   • Line 100: color="text-white" (should use semantic variant)
   • Line 119: borderColor="border-outline-steel" (should use theme variable)
   • Line 120: color="text-gray-500" (should use semantic variant)
   • Line 125: color="text-primary-blue" (should use semantic intent)
   • Line 126: color="text-white" (should use semantic variant)
   • Line 131: color="text-primary-blue" (should use semantic intent)
   • Line 132: color="text-white" (should use semantic variant)
   • Line 137: color="text-primary-blue" (should use semantic intent)
   • Line 138: color="text-white" (should use semantic variant)
   • Line 144: color="text-primary-blue" (should use semantic intent)
   • Line 145: color="text-white" (should use semantic variant)
   • Line 154: borderColor="border-outline-steel" (should use theme variable)
   • Line 155: color="text-gray-500" (should use semantic variant)
   • Line 160: color="text-primary-blue" (should use semantic intent)
   • Line 164: color="text-primary-blue" (should use semantic intent)
   • Line 168: color="text-primary-blue" (should use semantic intent)
   • Line 172: color="text-primary-blue" (should use semantic intent)
   • Line 176: color="text-primary-blue" (should use semantic intent)
   • Line 183: borderColor="border-outline-steel" (should use theme variable)
   • Line 184: color="text-gray-500" (should use semantic variant)
   • Line 196: borderColor="border-outline-steel" (should use theme variable)
   • Line 197: color="text-gray-500" (should use semantic variant)
   • Line 201: color="text-primary-blue" (should use semantic intent)

2. Inconsistent Color Usage: Mixes semantic variants with hardcoded colors

3. Missing Theme Variables: Uses custom CSS variables like --border-outline-steel, --bg-base-black, --bg-surface-charcoal instead of theme variables

Theme Compliance Score: 3/10

6. LeagueCard (apps/website/ui/LeagueCard.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 77: style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} (should use theme-aware filters)
   • Line 82: style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} (uses theme variable correctly)
   • Line 99: bg="var(--ui-color-bg-surface)" (uses theme variable correctly)
   • Line 102: borderColor="var(--ui-color-border-default)" (uses theme variable correctly)
   • Line 155: bg="var(--ui-color-bg-surface-muted)" (uses theme variable correctly)
   • Line 158: bg="var(--ui-color-intent-primary)" (uses theme variable correctly)
   • Line 161: boxShadow: '0 0 8px var(--ui-color-intent-primary)44' (uses theme variable correctly)
   • Line 192: style={{ borderTop: '1px solid var(--ui-color-border-muted)' }} (uses theme variable correctly)
   • Line 229: bg="var(--ui-color-bg-surface-muted)" (uses theme variable correctly)
   • Line 232: bg={intentColors[intent]} (uses theme variable correctly)
   • Line 235: boxShadow: '0 0 8px ${intentColors[intent]}44' (uses theme variable correctly)
   • Line 252: style={{ borderTop: '1px solid var(--ui-color-border-muted)' }} (uses theme variable correctly)

2. Inconsistent Color Usage: Uses theme variables correctly in most places, but has hardcoded opacity and filter on line 77

3. Theme Variables: Uses theme variables correctly in most places

Theme Compliance Score: 8/10

7. Featured Leagues Section (apps/website/templates/LeaguesTemplate.tsx)

Issues Found:

1. Hardcoded Colors: Uses hardcoded color values instead of theme variables

   • Line 106: borderColor="var(--ui-color-intent-warning-muted)" (uses theme variable correctly)

2. Theme Variables: Uses theme variables correctly

Theme Compliance Score: 9/10

Mobile Responsiveness Issues

1. NextRaceCountdownWidget

Issues Found:

1. Countdown Layout: Uses fixed-width elements that may overflow on small screens

   • The countdown timer uses multiple Stack components with fixed gap values
   • On very small screens (< 320px), the countdown may wrap or overflow

2. Button Layout: Single button with flex: 1 should be fine, but could benefit from responsive sizing

3. Text Sizes: Uses size="2xl" for countdown which might be too large on mobile

Mobile Responsiveness Score: 7/10

2. SeasonProgressWidget

Issues Found:

1. Progress Bar: Uses size="lg" which may be too large on mobile

   • The progress bar should be responsive to screen size

2. Text Sizes: Uses size="2xl" for percentage which might be too large on mobile

Mobile Responsiveness Score: 8/10

3. AdminQuickViewWidgets

Issues Found:

1. Widget Layout: Uses fixed-width elements that may overflow on small screens

   • The wallet balance display uses size="2xl" which might be too large on mobile
   • The stewarding queue display uses size="2xl" which might be too large on mobile

2. Button Layout: Uses flex: 1 which should be fine, but could benefit from responsive sizing

Mobile Responsiveness Score: 7/10

4. EnhancedLeagueSchedulePanel

Issues Found:

1. Action Buttons: Uses size="sm" for buttons which may be too small on mobile

   • Touch targets should be at least 44x44px for mobile accessibility

2. Race Info Layout: Uses fixed-width elements that may overflow on small screens

   • The race info section uses flex: 1 which should be fine, but could benefit from responsive sizing

3. Month Header: Uses p={4} which may be too small on mobile

Mobile Responsiveness Score: 6/10

5. RaceDetailModal

Issues Found:

1. Modal Layout: Uses maxWidth="lg" which may be too large on mobile

   • The modal should be responsive to screen size

2. Action Buttons: Uses size="md" for buttons which may be too small on mobile

   • Touch targets should be at least 44x44px for mobile accessibility

3. Content Layout: Uses p={4} which may be too small on mobile

Mobile Responsiveness Score: 7/10

6. LeagueCard

Issues Found:

1. Card Layout: Uses fixed-height elements that may overflow on small screens

   • The cover image uses height="8rem" which may be too large on mobile
   • The logo uses width="4rem" and height="4rem" which may be too large on mobile

2. Button Layout: Uses size="xs" for buttons which may be too small on mobile

   • Touch targets should be at least 44x44px for mobile accessibility

3. Text Sizes: Uses size="xs" for some text which may be too small on mobile

Mobile Responsiveness Score: 6/10

7. Featured Leagues Section

Issues Found:

1. Grid Layout: Uses columns={{ base: 1, md: 2 }} which is responsive

   • This is properly implemented for mobile responsiveness

2. Surface Padding: Uses padding={6} which may be too small on mobile

Mobile Responsiveness Score: 8/10

Summary of Issues

Theme Consistency Issues (Total: 48 issues)

Component	Issues	Theme Compliance Score
NextRaceCountdownWidget	18 issues	4/10
SeasonProgressWidget	8 issues	5/10
AdminQuickViewWidgets	16 issues	4/10
EnhancedLeagueSchedulePanel	18 issues	3/10
RaceDetailModal	22 issues	3/10
LeagueCard	1 issue	8/10
Featured Leagues Section	1 issue	9/10

Mobile Responsiveness Issues (Total: 15 issues)

Component	Issues	Mobile Responsiveness Score
NextRaceCountdownWidget	3 issues	7/10
SeasonProgressWidget	2 issues	8/10
AdminQuickViewWidgets	2 issues	7/10
EnhancedLeagueSchedulePanel	3 issues	6/10
RaceDetailModal	3 issues	7/10
LeagueCard	3 issues	6/10
Featured Leagues Section	1 issue	8/10

Recommendations

High Priority (Theme Consistency)

1. Replace all hardcoded colors with theme variables:

   • Use var(--ui-color-bg-surface) instead of #262626
   • Use var(--ui-color-intent-primary) instead of rgba(59, 130, 246, 0.3)
   • Use semantic variants (variant="high", variant="med", variant="low") instead of hardcoded colors

2. Use semantic intent props for icons:

   • Use intent="primary" instead of color="text-primary-blue"
   • Use intent="success" instead of color="text-performance-green"
   • Use intent="warning" instead of color="text-warning-amber"

3. Remove custom CSS variables:

   • Replace --text-gray-500, --performance-green, --primary-blue, etc. with theme variables

High Priority (Mobile Responsiveness)

1. Increase touch target sizes:

   • Ensure all buttons have minimum 44x44px touch targets
   • Use size="md" or larger for buttons on mobile

2. Make layouts responsive:

   • Use responsive spacing (e.g., padding={{ base: 2, md: 4 }})
   • Use responsive text sizes (e.g., size={{ base: 'sm', md: 'md' }})

3. Ensure content doesn't overflow:

   • Use flexWrap="wrap" where appropriate
   • Use maxWidth constraints on mobile

Medium Priority

1. Standardize gradient backgrounds:

   • Use theme-aware gradients instead of hardcoded colors
   • Consider using Surface component variants for consistent backgrounds

2. Improve spacing consistency:

   • Use theme spacing scale consistently
   • Ensure proper vertical rhythm

Next Steps

1. Apply fixes to all components with theme consistency issues
2. Apply fixes to all components with mobile responsiveness issues
3. Test all components on various screen sizes
4. Update documentation to reflect theme usage guidelines
5. Consider creating a theme compliance checklist for future development

Files to Update

1. apps/website/components/leagues/NextRaceCountdownWidget.tsx
2. apps/website/components/leagues/SeasonProgressWidget.tsx
3. apps/website/components/leagues/AdminQuickViewWidgets.tsx
4. apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx
5. apps/website/components/leagues/RaceDetailModal.tsx
6. apps/website/ui/LeagueCard.tsx (minor fixes)
7. apps/website/templates/LeaguesTemplate.tsx (minor fixes)

Audit Date

2026-01-21

Auditor

Roo (Senior Developer Mode)