mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
c22e26d14c7d0f6355b22ddc6a109cf00a71c50e
gridpilot.gg/apps/website/docs/PHASE_5_AUDIT_REPORT.md
Marc Mintel ea58909070 website refactor
2026-01-21 18:40:49 +01:00

375 lines
17 KiB
Markdown
Raw Blame History

# 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)
Reference in New Issue View Git Blame Copy Permalink