docs: Add comprehensive development backlog
- Created BACKLOG.md with 20 organized tasks from localization plan - Categorized by priority: High (3), Medium (3), Low (14) - Added implementation details, file references, and effort estimates - Organized into 3 recommended sprints - Total remaining work: 40-60 hours (1-1.5 weeks) - Includes localization refinement, testing, documentation, and future features 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
463
docs/BACKLOG.md
Normal file
463
docs/BACKLOG.md
Normal file
@@ -0,0 +1,463 @@
|
||||
# Maternal App - Development Backlog
|
||||
|
||||
**Last Updated**: October 3, 2025
|
||||
**Status**: Active Development
|
||||
|
||||
This document tracks remaining tasks, future enhancements, and technical debt items for the Maternal App project.
|
||||
|
||||
---
|
||||
|
||||
## 🔴 High Priority (Pre-Launch)
|
||||
|
||||
### 1. Date/Time Localization Refinement
|
||||
**Status**: 70% Complete
|
||||
**Estimated Effort**: 1-2 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 10
|
||||
|
||||
**Completed**:
|
||||
- ✅ `useLocalizedDate` hook created and implemented
|
||||
- ✅ Activity timestamps use `formatDistanceToNow`
|
||||
|
||||
**Remaining**:
|
||||
- [ ] Apply date-fns locale to all remaining date displays
|
||||
- [ ] Child birth dates formatting with proper locale
|
||||
- [ ] Analytics date ranges with locale-specific formatting
|
||||
- [ ] Ensure consistent date formatting across all components
|
||||
|
||||
**Files to Update**:
|
||||
- `app/children/page.tsx` - Birth date display
|
||||
- `app/insights/page.tsx` - Date range selectors
|
||||
- `components/features/analytics/InsightsDashboard.tsx` - Chart date labels
|
||||
- Any remaining hardcoded date formats
|
||||
|
||||
---
|
||||
|
||||
### 2. Number Formatting Consistency
|
||||
**Status**: 70% Complete
|
||||
**Estimated Effort**: 1-2 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 11
|
||||
|
||||
**Completed**:
|
||||
- ✅ `useFormatting` hook created with Intl.NumberFormat
|
||||
|
||||
**Remaining**:
|
||||
- [ ] Apply number formatting throughout app
|
||||
- [ ] Weight/height values with locale-specific formatting
|
||||
- [ ] Activity counts and statistics with proper number separators
|
||||
- [ ] Decimal formatting consistency (1,000.50 vs 1.000,50)
|
||||
|
||||
**Files to Update**:
|
||||
- `app/children/page.tsx` - Weight/height display
|
||||
- `app/insights/page.tsx` - Statistics and counts
|
||||
- `components/features/analytics/InsightsDashboard.tsx` - Chart values
|
||||
- All tracking forms with numeric inputs
|
||||
|
||||
---
|
||||
|
||||
### 3. Comprehensive Testing Suite
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 2-4 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 14
|
||||
|
||||
**Test Coverage Needed**:
|
||||
- [ ] Translation coverage test (verify no missing keys)
|
||||
- [ ] Language switching test (all 7 languages)
|
||||
- [ ] Unit conversion test (ml↔oz, kg↔lb, cm↔in)
|
||||
- [ ] Date/time formatting test across locales
|
||||
- [ ] Layout stability test (ensure no UI breaks with long translations)
|
||||
- [ ] Number formatting test per locale
|
||||
- [ ] Measurement unit persistence test
|
||||
- [ ] Language persistence test across sessions
|
||||
|
||||
**Test Files to Create**:
|
||||
- `__tests__/i18n/translation-coverage.test.ts`
|
||||
- `__tests__/i18n/language-switching.test.ts`
|
||||
- `__tests__/utils/unit-conversion.test.ts`
|
||||
- `__tests__/utils/date-formatting.test.ts`
|
||||
- `__tests__/utils/number-formatting.test.ts`
|
||||
|
||||
---
|
||||
|
||||
## 🟡 Medium Priority (Post-Launch)
|
||||
|
||||
### 4. Dynamic HTML Lang Attribute
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 30 minutes
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 1.4
|
||||
|
||||
**Description**: Update `<html lang="">` attribute dynamically when language changes for better SEO and accessibility.
|
||||
|
||||
**Files to Update**:
|
||||
- `app/layout.tsx` - Add dynamic lang attribute based on i18n state
|
||||
|
||||
**Implementation**:
|
||||
```typescript
|
||||
// app/layout.tsx
|
||||
export default function RootLayout({ children }) {
|
||||
const { i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.lang = i18n.language;
|
||||
}, [i18n.language]);
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Redux State Integration for User Preferences
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 1-2 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 5.1
|
||||
|
||||
**Description**: Currently using localStorage and API calls. Should integrate with Redux for better state management.
|
||||
|
||||
**Files to Update**:
|
||||
- `store/slices/userSlice.ts` - Add language and measurementUnit to state
|
||||
|
||||
**Implementation**:
|
||||
```typescript
|
||||
interface UserState {
|
||||
// ... existing fields
|
||||
language: string;
|
||||
measurementUnit: 'metric' | 'imperial';
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. Component Localization Review
|
||||
**Status**: Partially Complete
|
||||
**Estimated Effort**: 2-3 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 9.2
|
||||
|
||||
**Components Completed**:
|
||||
- ✅ AppShell, MobileNav, TabBar
|
||||
- ✅ LanguageSelector, MeasurementUnitSelector
|
||||
- ✅ Main pages (dashboard, track, children, family, settings, ai-assistant, insights)
|
||||
|
||||
**Components to Review**:
|
||||
- [ ] `components/common/` - Common dialogs, buttons, alerts
|
||||
- [ ] `components/features/` - Activity cards, forms
|
||||
- [ ] `components/children/` - ChildDialog, DeleteConfirmDialog
|
||||
- [ ] `components/family/` - Family member components
|
||||
- [ ] Error boundaries and fallback UIs
|
||||
- [ ] Loading states and skeletons
|
||||
|
||||
---
|
||||
|
||||
## 🟢 Low Priority (Future Enhancements)
|
||||
|
||||
### 7. Professional Translation Review
|
||||
**Status**: All Translations Complete
|
||||
**Estimated Effort**: External service, 1-2 weeks
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 13.2
|
||||
|
||||
**Description**: All 7 languages have been machine-translated with cultural context. Native speaker review recommended before production launch.
|
||||
|
||||
**Languages to Review**:
|
||||
- [ ] Spanish (es-ES) - Native speaker validation
|
||||
- [ ] French (fr-FR) - Native speaker validation
|
||||
- [ ] Portuguese (pt-BR) - Native speaker validation
|
||||
- [ ] Simplified Chinese (zh-CN) - Native speaker validation
|
||||
- [ ] German (de-DE) - Native speaker validation
|
||||
- [ ] Italian (it-IT) - Native speaker validation
|
||||
|
||||
**Deliverables**:
|
||||
- Cultural appropriateness verification
|
||||
- Grammar and syntax corrections
|
||||
- Parenting terminology accuracy
|
||||
- Regional variations (if needed)
|
||||
|
||||
---
|
||||
|
||||
### 8. Developer Documentation
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 1-2 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 15
|
||||
|
||||
**Documents to Create**:
|
||||
- [ ] `docs/LOCALIZATION_GUIDE.md` - How to add translations, languages, best practices
|
||||
- [ ] Update `docs/implementation-gaps.md` - Mark localization as complete
|
||||
- [ ] `docs/UNIT_CONVERSION_GUIDE.md` - How unit conversions work
|
||||
|
||||
**Content Needed**:
|
||||
```markdown
|
||||
# LOCALIZATION_GUIDE.md
|
||||
- How to add new translation keys
|
||||
- How to add new languages
|
||||
- Translation file structure
|
||||
- Best practices (interpolation, pluralization)
|
||||
- How to test translations
|
||||
|
||||
# UNIT_CONVERSION_GUIDE.md
|
||||
- Storage strategy (always metric)
|
||||
- Display strategy (user preference)
|
||||
- How to use UnitInput component
|
||||
- How to add new unit types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. Additional Language Support
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 2-3 hours per language
|
||||
**Related**: Future enhancement
|
||||
|
||||
**Potential Languages**:
|
||||
- [ ] Arabic (ar-SA) - Requires RTL support
|
||||
- [ ] Hindi (hi-IN) - Large user base
|
||||
- [ ] Japanese (ja-JP) - Advanced market
|
||||
- [ ] Korean (ko-KR) - Advanced market
|
||||
- [ ] Russian (ru-RU) - Large user base
|
||||
|
||||
**Technical Requirements for RTL**:
|
||||
- RTL layout support in CSS
|
||||
- Mirror UI components
|
||||
- Text alignment adjustments
|
||||
- Icon direction handling
|
||||
|
||||
---
|
||||
|
||||
### 10. Additional Unit Types
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 2-3 hours
|
||||
**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md - Future Enhancements
|
||||
|
||||
**Unit Types to Add**:
|
||||
- [ ] Temperature (°C / °F) - For fever tracking
|
||||
- [ ] Time format preference (12h / 24h)
|
||||
- [ ] Date format preference (MM/DD/YYYY vs DD/MM/YYYY)
|
||||
- [ ] Regional variations (UK vs US imperial)
|
||||
|
||||
**Implementation**:
|
||||
- Update `lib/utils/unitConversion.ts`
|
||||
- Update `components/forms/UnitInput.tsx`
|
||||
- Add to user preferences schema
|
||||
- Add to onboarding flow
|
||||
|
||||
---
|
||||
|
||||
### 11. Translation Management System
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 4-6 hours
|
||||
**Priority**: Low (Nice to have)
|
||||
|
||||
**Description**: Implement a system for managing translations outside of JSON files for easier collaboration with translators.
|
||||
|
||||
**Options**:
|
||||
1. **Local Tool**: Custom admin panel for translation management
|
||||
2. **Third-Party**: Integration with services like Lokalise, Crowdin, or POEditor
|
||||
|
||||
**Benefits**:
|
||||
- Non-developers can update translations
|
||||
- Translation memory and consistency
|
||||
- Automatic missing key detection
|
||||
- Version control for translations
|
||||
- Collaboration with professional translators
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Technical Debt
|
||||
|
||||
### 12. Remove Unused MobileNav Component
|
||||
**Status**: Identified
|
||||
**Estimated Effort**: 15 minutes
|
||||
**Priority**: Low
|
||||
|
||||
**Description**: `components/layouts/MobileNav/MobileNav.tsx` is no longer used since we unified the header. Consider removing or archiving.
|
||||
|
||||
**Files to Update**:
|
||||
- Delete or archive `components/layouts/MobileNav/MobileNav.tsx`
|
||||
- Remove imports from AppShell if not already removed
|
||||
|
||||
---
|
||||
|
||||
### 13. Optimize Translation Bundle Size
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 2-3 hours
|
||||
**Priority**: Medium
|
||||
|
||||
**Description**: Currently loading all translations. Implement lazy loading per namespace and language.
|
||||
|
||||
**Implementation**:
|
||||
- Configure i18next backend plugin
|
||||
- Load translations on demand
|
||||
- Cache loaded translations
|
||||
- Preload critical namespaces (common, errors)
|
||||
|
||||
**Expected Impact**:
|
||||
- Reduce initial bundle size by ~60-70%
|
||||
- Faster initial page load
|
||||
- Better performance on slow connections
|
||||
|
||||
---
|
||||
|
||||
### 14. Accessibility (a11y) Audit
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 3-4 hours
|
||||
**Priority**: High (Pre-Launch)
|
||||
|
||||
**Areas to Review**:
|
||||
- [ ] Keyboard navigation throughout app
|
||||
- [ ] Screen reader compatibility (ARIA labels)
|
||||
- [ ] Color contrast ratios (WCAG AA compliance)
|
||||
- [ ] Focus management in dialogs
|
||||
- [ ] Form validation messages accessibility
|
||||
- [ ] Error messages accessibility
|
||||
- [ ] Language selector accessibility
|
||||
|
||||
**Tools to Use**:
|
||||
- axe DevTools
|
||||
- WAVE browser extension
|
||||
- Screen reader testing (NVDA/JAWS)
|
||||
|
||||
---
|
||||
|
||||
### 15. Performance Optimization
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 2-4 hours
|
||||
**Priority**: Medium
|
||||
|
||||
**Optimization Opportunities**:
|
||||
- [ ] Implement code splitting for routes
|
||||
- [ ] Lazy load heavy components (charts, analytics)
|
||||
- [ ] Optimize image loading (next/image)
|
||||
- [ ] Implement virtual scrolling for long lists
|
||||
- [ ] Reduce re-renders with React.memo
|
||||
- [ ] Optimize bundle size analysis
|
||||
|
||||
**Metrics to Track**:
|
||||
- First Contentful Paint (FCP) < 1.5s
|
||||
- Largest Contentful Paint (LCP) < 2.5s
|
||||
- Time to Interactive (TTI) < 3.5s
|
||||
- Cumulative Layout Shift (CLS) < 0.1
|
||||
|
||||
---
|
||||
|
||||
## 📋 Future Features
|
||||
|
||||
### 16. Offline Mode Enhancements
|
||||
**Status**: Basic offline support exists
|
||||
**Estimated Effort**: 6-8 hours
|
||||
**Priority**: Medium
|
||||
|
||||
**Enhancements Needed**:
|
||||
- [ ] Better offline indicator UI
|
||||
- [ ] Sync queue visualization
|
||||
- [ ] Conflict resolution UI
|
||||
- [ ] Offline data persistence improvements
|
||||
- [ ] Background sync when connection restored
|
||||
|
||||
---
|
||||
|
||||
### 17. Voice Input Multi-Language Support
|
||||
**Status**: Works with backend language detection
|
||||
**Estimated Effort**: 2-3 hours
|
||||
**Priority**: Low
|
||||
|
||||
**Enhancements Needed**:
|
||||
- [ ] Language-specific voice models
|
||||
- [ ] Accent/dialect support
|
||||
- [ ] Voice command examples per language
|
||||
- [ ] Improved transcription accuracy
|
||||
|
||||
---
|
||||
|
||||
### 18. Export/Import Data
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 4-6 hours
|
||||
**Priority**: Medium
|
||||
|
||||
**Features**:
|
||||
- [ ] Export activity data (CSV, PDF)
|
||||
- [ ] Export analytics reports
|
||||
- [ ] GDPR data export compliance
|
||||
- [ ] Import data from other baby tracking apps
|
||||
- [ ] Backup/restore functionality
|
||||
|
||||
---
|
||||
|
||||
### 19. Dark Mode
|
||||
**Status**: Not Started
|
||||
**Estimated Effort**: 3-4 hours
|
||||
**Priority**: Low
|
||||
|
||||
**Implementation**:
|
||||
- [ ] Add dark mode toggle in settings
|
||||
- [ ] Create dark theme palette
|
||||
- [ ] Test all components in dark mode
|
||||
- [ ] Persist preference
|
||||
- [ ] System preference detection
|
||||
|
||||
---
|
||||
|
||||
### 20. Push Notifications Localization
|
||||
**Status**: Backend supports multi-language
|
||||
**Estimated Effort**: 2-3 hours
|
||||
**Priority**: Medium
|
||||
|
||||
**Features**:
|
||||
- [ ] Send notifications in user's preferred language
|
||||
- [ ] Localized notification templates
|
||||
- [ ] Time zone awareness
|
||||
- [ ] Customizable notification preferences
|
||||
|
||||
---
|
||||
|
||||
## 📊 Progress Tracking
|
||||
|
||||
**Total Tasks**: 20
|
||||
**High Priority**: 3 tasks (15%)
|
||||
**Medium Priority**: 3 tasks (15%)
|
||||
**Low Priority**: 14 tasks (70%)
|
||||
|
||||
**Estimated Total Effort**: 40-60 hours (1-1.5 weeks)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Recommended Implementation Order
|
||||
|
||||
### Sprint 1 (Pre-Launch - Critical)
|
||||
1. Date/Time Localization Refinement (1-2h)
|
||||
2. Number Formatting Consistency (1-2h)
|
||||
3. Comprehensive Testing Suite (2-4h)
|
||||
4. Accessibility Audit (3-4h)
|
||||
|
||||
**Total**: 7-12 hours
|
||||
|
||||
### Sprint 2 (Post-Launch - Week 1)
|
||||
5. Dynamic HTML Lang Attribute (30m)
|
||||
6. Component Localization Review (2-3h)
|
||||
7. Performance Optimization (2-4h)
|
||||
8. Developer Documentation (1-2h)
|
||||
|
||||
**Total**: 6-10 hours
|
||||
|
||||
### Sprint 3 (Post-Launch - Week 2)
|
||||
9. Redux State Integration (1-2h)
|
||||
10. Professional Translation Review (External)
|
||||
11. Optimize Translation Bundle Size (2-3h)
|
||||
12. Remove Unused Components (15m)
|
||||
|
||||
**Total**: 3-5 hours
|
||||
|
||||
### Future Sprints
|
||||
13-20. Feature enhancements and nice-to-haves
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- This backlog should be reviewed and updated monthly
|
||||
- Priority levels may change based on user feedback
|
||||
- Effort estimates are rough and may vary
|
||||
- Consider user feedback for prioritization
|
||||
- Some tasks may become obsolete with new requirements
|
||||
|
||||
---
|
||||
|
||||
**Document Owner**: Development Team
|
||||
**Review Frequency**: Monthly
|
||||
**Next Review**: November 3, 2025
|
||||
@@ -1,882 +0,0 @@
|
||||
# Maternal App - UI Consistency & Alignment Guide
|
||||
|
||||
## Overview
|
||||
This document provides comprehensive instructions for fixing UI/UX inconsistencies across the Maternal app. The main dashboard screen serves as the design reference for all other screens.
|
||||
|
||||
## Reference Design Pattern (Main Dashboard)
|
||||
The main dashboard successfully implements:
|
||||
- **6 symmetric action cards** with consistent spacing
|
||||
- **Soft rounded corners** (borderRadius: 16-20px)
|
||||
- **Consistent color palette** with meaningful color associations
|
||||
- **Clear visual hierarchy** with proper typography scaling
|
||||
- **Adequate whitespace** between sections
|
||||
- **Mobile-first responsive design**
|
||||
|
||||
## Global Design Tokens to Apply
|
||||
|
||||
### Spacing System
|
||||
```javascript
|
||||
const spacing = {
|
||||
xs: 8, // 0.5rem
|
||||
sm: 12, // 0.75rem
|
||||
md: 16, // 1rem (base unit)
|
||||
lg: 24, // 1.5rem
|
||||
xl: 32, // 2rem
|
||||
xxl: 48, // 3rem
|
||||
xxxl: 64 // 4rem
|
||||
}
|
||||
```
|
||||
|
||||
### Color Palette
|
||||
```javascript
|
||||
const colors = {
|
||||
primary: {
|
||||
main: '#EC407A', // Pink (Feeding)
|
||||
light: '#FFB3C1',
|
||||
dark: '#C2185B'
|
||||
},
|
||||
secondary: {
|
||||
sleep: '#2196F3', // Blue
|
||||
diaper: '#FF9800', // Orange
|
||||
medicine: '#F44336', // Red
|
||||
activities: '#66BB6A', // Green
|
||||
assistant: '#FF7043' // Deep Orange
|
||||
},
|
||||
background: {
|
||||
default: '#FFF5F7', // Light pink background
|
||||
paper: '#FFFFFF',
|
||||
card: '#FFF0F3' // Slightly pink card background
|
||||
},
|
||||
text: {
|
||||
primary: '#2D3436',
|
||||
secondary: '#636E72',
|
||||
disabled: '#B2BEC3'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Typography Scale
|
||||
```javascript
|
||||
const typography = {
|
||||
h1: { fontSize: '2rem', fontWeight: 600, lineHeight: 1.2 },
|
||||
h2: { fontSize: '1.5rem', fontWeight: 600, lineHeight: 1.3 },
|
||||
h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: 1.4 },
|
||||
body1: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.5 },
|
||||
body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5 },
|
||||
caption: { fontSize: '0.75rem', fontWeight: 400, lineHeight: 1.4 }
|
||||
}
|
||||
```
|
||||
|
||||
## Screen-Specific Fixes
|
||||
|
||||
### 1. Track Activity Screen (`/track`)
|
||||
|
||||
**Current Issues:**
|
||||
- Icons and labels not properly centered
|
||||
- Inconsistent spacing between activity options
|
||||
- No visual feedback on hover/press
|
||||
|
||||
**Required Fixes:**
|
||||
```javascript
|
||||
// Container structure
|
||||
<Container maxWidth="sm" sx={{ px: 2, py: 3 }}>
|
||||
<Typography variant="h2" sx={{ mb: 1, fontWeight: 600 }}>
|
||||
Track Activity
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
Select an activity to track
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
{activities.map(activity => (
|
||||
<Grid item xs={4} sm={4} key={activity.id}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
backgroundColor: activity.bgColor,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
aspectRatio: '1/1',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)',
|
||||
boxShadow: 2
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 48, mb: 1 }}>{activity.icon}</Box>
|
||||
<Typography variant="body2" fontWeight={500}>
|
||||
{activity.label}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
```
|
||||
|
||||
### 2. AI Assistant Screen (`/ai-assistant`)
|
||||
|
||||
**Current Issues:**
|
||||
- Chat history sidebar has poor alignment
|
||||
- Suggested questions buttons inconsistent
|
||||
- Input field not properly styled
|
||||
- No proper container padding
|
||||
|
||||
**Required Fixes:**
|
||||
```javascript
|
||||
// Main layout structure
|
||||
<Box sx={{ display: 'flex', height: '100vh', bgcolor: 'background.default' }}>
|
||||
{/* Sidebar */}
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
sx={{
|
||||
width: { xs: 0, sm: 280 },
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
'& .MuiDrawer-paper': {
|
||||
width: 280,
|
||||
bgcolor: 'background.paper',
|
||||
borderRight: 'none',
|
||||
boxShadow: 1
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="h3" sx={{ mb: 3 }}>Chat History</Typography>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
sx={{
|
||||
mb: 3,
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
bgcolor: 'primary.light',
|
||||
color: 'primary.main',
|
||||
'&:hover': { bgcolor: 'primary.main', color: 'white' }
|
||||
}}
|
||||
>
|
||||
New Chat
|
||||
</Button>
|
||||
|
||||
{/* Chat list items */}
|
||||
<List sx={{ p: 0 }}>
|
||||
{chats.map(chat => (
|
||||
<ListItem
|
||||
button
|
||||
key={chat.id}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
'&:hover': { bgcolor: 'background.default' }
|
||||
}}
|
||||
>
|
||||
<ListItemText
|
||||
primary={chat.title}
|
||||
secondary={chat.date}
|
||||
primaryTypographyProps={{ fontSize: '0.875rem' }}
|
||||
secondaryTypographyProps={{ fontSize: '0.75rem' }}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
{/* Main content */}
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ p: 3, bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Avatar sx={{ bgcolor: 'primary.main', width: 48, height: 48 }}>
|
||||
<SmartToyIcon />
|
||||
</Avatar>
|
||||
<Box>
|
||||
<Typography variant="h3">AI Parenting Assistant</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Ask me anything about parenting and childcare
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Chat area */}
|
||||
<Box sx={{ flexGrow: 1, p: 3, overflowY: 'auto' }}>
|
||||
{/* Welcome message */}
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
<Typography variant="h2" sx={{ mb: 2 }}>
|
||||
Hi Andrei! How can I help you today?
|
||||
</Typography>
|
||||
|
||||
{/* Suggested questions */}
|
||||
<Grid container spacing={2} justifyContent="center" sx={{ mt: 3, maxWidth: 600, mx: 'auto' }}>
|
||||
{suggestions.map(suggestion => (
|
||||
<Grid item xs={12} sm={6} key={suggestion.id}>
|
||||
<Chip
|
||||
label={suggestion.text}
|
||||
onClick={() => {}}
|
||||
sx={{
|
||||
width: '100%',
|
||||
py: 2,
|
||||
borderRadius: 2,
|
||||
fontSize: '0.875rem',
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider',
|
||||
'&:hover': {
|
||||
bgcolor: 'primary.light',
|
||||
borderColor: 'primary.main'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Input area */}
|
||||
<Box sx={{ p: 3, bgcolor: 'background.paper', borderTop: 1, borderColor: 'divider' }}>
|
||||
<Box sx={{ maxWidth: 800, mx: 'auto' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Ask me anything..."
|
||||
variant="outlined"
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.default',
|
||||
'&:hover fieldset': { borderColor: 'primary.main' },
|
||||
'&.Mui-focused fieldset': { borderColor: 'primary.main' }
|
||||
}
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton color="primary">
|
||||
<SendIcon />
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block', textAlign: 'center' }}>
|
||||
This AI assistant provides general information. Always consult healthcare professionals for medical advice.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
```
|
||||
|
||||
### 3. Insights & Analytics Screen (`/insights`)
|
||||
|
||||
**Current Issues:**
|
||||
- Time period tabs not properly styled
|
||||
- Stats cards have inconsistent heights
|
||||
- Charts not properly aligned
|
||||
- Legend placement issues
|
||||
|
||||
**Required Fixes:**
|
||||
```javascript
|
||||
// Container and layout
|
||||
<Container maxWidth="lg" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Typography variant="h2" sx={{ mb: 1 }}>Insights & Analytics</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
Track patterns and get insights about your child's activities
|
||||
</Typography>
|
||||
|
||||
{/* Time period selector */}
|
||||
<Tabs
|
||||
value={selectedPeriod}
|
||||
onChange={handlePeriodChange}
|
||||
sx={{
|
||||
mb: 4,
|
||||
'& .MuiTabs-indicator': { backgroundColor: 'primary.main' },
|
||||
'& .MuiTab-root': {
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
minWidth: { xs: 80, sm: 120 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab label="7 DAYS" />
|
||||
<Tab label="30 DAYS" />
|
||||
<Tab label="3 MONTHS" />
|
||||
</Tabs>
|
||||
|
||||
{/* Stats cards */}
|
||||
<Grid container spacing={2} sx={{ mb: 4 }}>
|
||||
{stats.map(stat => (
|
||||
<Grid item xs={6} sm={3} key={stat.id}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 2.5,
|
||||
borderRadius: 3,
|
||||
bgcolor: stat.bgColor,
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ fontSize: 32, mb: 1 }}>{stat.icon}</Box>
|
||||
<Typography variant="h3" fontWeight={600}>{stat.value}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{stat.label}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Charts grid */}
|
||||
<Grid container spacing={3}>
|
||||
{charts.map(chart => (
|
||||
<Grid item xs={12} md={6} key={chart.id}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.paper',
|
||||
height: 400,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
{chart.icon} {chart.title}
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, position: 'relative' }}>
|
||||
{/* Chart component here */}
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
```
|
||||
|
||||
### 4. Children Management Screen (`/children`)
|
||||
|
||||
**Current Issues:**
|
||||
- Child card not properly structured
|
||||
- Age text alignment issues
|
||||
- Action buttons placement
|
||||
|
||||
**Required Fixes:**
|
||||
```javascript
|
||||
<Container maxWidth="md" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="h2">Children</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Manage your family's children profiles
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
px: 3
|
||||
}}
|
||||
>
|
||||
Add Child
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{children.map(child => (
|
||||
<Grid item xs={12} sm={6} key={child.id}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
bgcolor: 'primary.light',
|
||||
fontSize: 24
|
||||
}}
|
||||
>
|
||||
{child.name[0]}
|
||||
</Avatar>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h3">{child.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{child.gender}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
|
||||
<CalendarIcon fontSize="small" color="action" />
|
||||
<Typography variant="caption">{child.birthDate}</Typography>
|
||||
</Box>
|
||||
<Typography variant="caption" color="primary.main">
|
||||
Age: {child.age}
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
|
||||
<IconButton size="small" color="primary">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton size="small" color="error">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
```
|
||||
|
||||
### 5. Family Management Screen (`/family`)
|
||||
|
||||
**Current Issues:**
|
||||
- Share code styling inconsistent
|
||||
- Member list alignment
|
||||
- Proper spacing between sections
|
||||
|
||||
**Required Fixes:**
|
||||
```javascript
|
||||
<Container maxWidth="md" sx={{ px: { xs: 2, sm: 3 }, py: 3 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
||||
<Box>
|
||||
<Typography variant="h2">Family</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Manage your family members and share access
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<GroupAddIcon />}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
Join Family
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<PersonAddIcon />}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
Invite Member
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h3" sx={{ mb: 2 }}>Family Share Code</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
Share this code with family members to give them access to your family's data
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<Chip
|
||||
label="XXIG62"
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 600,
|
||||
bgcolor: 'primary.light',
|
||||
color: 'primary.main'
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopyIcon />}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
Copy Code
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h3" sx={{ mb: 3 }}>
|
||||
Family Members ({members.length})
|
||||
</Typography>
|
||||
<List sx={{ p: 0 }}>
|
||||
{members.map(member => (
|
||||
<ListItem
|
||||
key={member.id}
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
bgcolor: 'background.default'
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
{member.name[0]}
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={member.name}
|
||||
secondary={member.email}
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
<Chip
|
||||
label={member.role}
|
||||
size="small"
|
||||
color={member.role === 'Parent' ? 'primary' : 'default'}
|
||||
sx={{ borderRadius: 1 }}
|
||||
/>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
```
|
||||
|
||||
## Mobile-First Responsive Guidelines
|
||||
|
||||
### Breakpoint System
|
||||
```javascript
|
||||
const breakpoints = {
|
||||
xs: 0, // Mobile phones
|
||||
sm: 600, // Small tablets
|
||||
md: 900, // Tablets
|
||||
lg: 1200, // Desktop
|
||||
xl: 1536 // Large screens
|
||||
}
|
||||
```
|
||||
|
||||
### Mobile-Specific Rules
|
||||
1. **Touch targets**: Minimum 48x48px for all interactive elements
|
||||
2. **Padding**: Use `px: { xs: 2, sm: 3 }` for container padding
|
||||
3. **Font sizes**: Scale down by 10-15% on mobile
|
||||
4. **Grid columns**: Use `xs={12}` for single column on mobile, `sm={6}` for two columns on tablets
|
||||
5. **Navigation**: Hide sidebar on mobile, use bottom navigation or hamburger menu
|
||||
6. **Modals**: Full screen on mobile, centered dialog on desktop
|
||||
|
||||
### Component Responsiveness
|
||||
```javascript
|
||||
// Responsive spacing
|
||||
sx={{
|
||||
p: { xs: 2, sm: 3, md: 4 },
|
||||
m: { xs: 1, sm: 2, md: 3 }
|
||||
}}
|
||||
|
||||
// Responsive typography
|
||||
sx={{
|
||||
fontSize: { xs: '1rem', sm: '1.125rem', md: '1.25rem' }
|
||||
}}
|
||||
|
||||
// Responsive grid
|
||||
<Grid container spacing={{ xs: 2, sm: 3 }}>
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
```
|
||||
|
||||
## Common MUI Theme Overrides
|
||||
```javascript
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
primary: { main: '#EC407A' },
|
||||
background: {
|
||||
default: '#FFF5F7',
|
||||
paper: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 12
|
||||
},
|
||||
components: {
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 12,
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
padding: '10px 24px'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 16,
|
||||
boxShadow: 'none',
|
||||
border: '1px solid rgba(0,0,0,0.08)'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Implementation Checklist
|
||||
- [ ] Apply consistent spacing using the defined spacing system
|
||||
- [ ] Update all color values to use the defined palette
|
||||
- [ ] Ensure all interactive elements have proper hover/active states
|
||||
- [ ] Add proper transitions (0.2s ease) for all interactive elements
|
||||
- [ ] Verify mobile responsiveness for all screens
|
||||
- [ ] Test touch target sizes on mobile (minimum 48x48px)
|
||||
- [ ] Ensure consistent border radius (12-16px for cards, 8-12px for buttons)
|
||||
- [ ] Add proper loading states for async operations
|
||||
- [ ] Implement consistent error messaging styles
|
||||
- [ ] Verify text hierarchy and readability on all screen sizes
|
||||
|
||||
## Testing Requirements
|
||||
1. Test on iPhone SE (375px width) for minimum mobile size
|
||||
2. Test on iPad (768px width) for tablet view
|
||||
3. Test on desktop (1920px width) for full experience
|
||||
4. Verify touch interactions on actual mobile devices
|
||||
5. Check color contrast ratios for accessibility (WCAG AA compliance)
|
||||
6. Test with both light and dark system preferences
|
||||
|
||||
## Critical Accessibility Fixes (Console Errors)
|
||||
|
||||
### 1. Color Contrast Issues (WCAG AA Compliance)
|
||||
|
||||
**Problem**: Elements don't meet minimum color contrast ratio thresholds (4.5:1 for normal text, 3:1 for large text)
|
||||
|
||||
**Fix for the color palette**:
|
||||
```javascript
|
||||
const colors = {
|
||||
primary: {
|
||||
main: '#D81B60', // Darker pink for better contrast (was #EC407A)
|
||||
light: '#FFB3C1',
|
||||
dark: '#AD1457' // Even darker for text on light backgrounds
|
||||
},
|
||||
secondary: {
|
||||
sleep: '#1976D2', // Darker blue (was #2196F3)
|
||||
diaper: '#F57C00', // Darker orange (was #FF9800)
|
||||
medicine: '#D32F2F', // Darker red (was #F44336)
|
||||
activities: '#388E3C', // Darker green (was #66BB6A)
|
||||
assistant: '#E64A19' // Darker deep orange (was #FF7043)
|
||||
},
|
||||
background: {
|
||||
default: '#FFF5F7',
|
||||
paper: '#FFFFFF',
|
||||
card: '#FFF0F3'
|
||||
},
|
||||
text: {
|
||||
primary: 'rgba(0, 0, 0, 0.87)', // Higher opacity for better contrast
|
||||
secondary: 'rgba(0, 0, 0, 0.6)', // Darker secondary text
|
||||
disabled: 'rgba(0, 0, 0, 0.38)'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Fix for MUI TextField labels**:
|
||||
```javascript
|
||||
// Global theme override for input labels
|
||||
const theme = createTheme({
|
||||
components: {
|
||||
MuiInputLabel: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: 'rgba(0, 0, 0, 0.87)', // Darker label color
|
||||
'&.Mui-focused': {
|
||||
color: '#AD1457' // Dark pink when focused
|
||||
},
|
||||
'&.MuiFormLabel-filled': {
|
||||
color: 'rgba(0, 0, 0, 0.87)' // Ensure filled state has good contrast
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.38)' // Darker border
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.87)'
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#AD1457'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
containedPrimary: {
|
||||
backgroundColor: '#D81B60',
|
||||
'&:hover': {
|
||||
backgroundColor: '#AD1457'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Viewport Meta Tag Issue
|
||||
|
||||
**Problem**: Zooming and scaling must not be disabled (critical accessibility issue)
|
||||
|
||||
**Fix for viewport meta tag**:
|
||||
```html
|
||||
<!-- In your index.html or _document.js -->
|
||||
<!-- WRONG - Do not use this: -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<!-- CORRECT - Use this instead: -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
**For Next.js apps**:
|
||||
```javascript
|
||||
// In pages/_document.js or app/layout.js
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
```
|
||||
|
||||
### 3. Additional Accessibility Enhancements
|
||||
|
||||
**Form Input Enhancements**:
|
||||
```javascript
|
||||
<TextField
|
||||
id="email-input"
|
||||
label="Email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
inputProps={{
|
||||
'aria-label': 'Email address',
|
||||
'aria-required': true
|
||||
}}
|
||||
FormLabelProps={{
|
||||
sx: {
|
||||
color: 'rgba(0, 0, 0, 0.87)',
|
||||
'&.Mui-focused': {
|
||||
color: '#AD1457'
|
||||
}
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.38)'
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: 'rgba(0, 0, 0, 0.87)'
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#AD1457'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
**Button Accessibility**:
|
||||
```javascript
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: '#D81B60',
|
||||
color: '#FFFFFF',
|
||||
'&:hover': {
|
||||
backgroundColor: '#AD1457'
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: '2px solid #AD1457',
|
||||
outlineOffset: '2px'
|
||||
},
|
||||
// Ensure minimum touch target size
|
||||
minHeight: 48,
|
||||
minWidth: 48
|
||||
}}
|
||||
aria-label="Sign in to your account"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Focus Indicators**:
|
||||
```javascript
|
||||
// Global focus styles
|
||||
const theme = createTheme({
|
||||
components: {
|
||||
MuiButtonBase: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'&:focus-visible': {
|
||||
outline: '2px solid #AD1457',
|
||||
outlineOffset: '2px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Testing for Accessibility
|
||||
|
||||
**Use these tools to verify fixes**:
|
||||
1. **axe DevTools**: Browser extension for accessibility testing
|
||||
2. **Chrome DevTools Lighthouse**: Run accessibility audit
|
||||
3. **WAVE**: WebAIM's accessibility evaluation tool
|
||||
4. **Contrast Checker**: Use WebAIM's contrast checker to verify color combinations
|
||||
|
||||
**Minimum contrast ratios to maintain**:
|
||||
- Normal text: 4.5:1
|
||||
- Large text (18pt or 14pt bold): 3:1
|
||||
- UI components and graphics: 3:1
|
||||
|
||||
**Quick contrast check for main colors**:
|
||||
```javascript
|
||||
// Verified color combinations with good contrast
|
||||
const safeColorCombos = {
|
||||
// Text on backgrounds
|
||||
darkTextOnLight: '#000000 on #FFF5F7', // 20.3:1 ✓
|
||||
primaryTextOnWhite: '#D81B60 on #FFFFFF', // 4.7:1 ✓
|
||||
whiteOnPrimary: '#FFFFFF on #D81B60', // 4.7:1 ✓
|
||||
|
||||
// Labels and secondary text
|
||||
labelOnWhite: 'rgba(0,0,0,0.87) on #FFFFFF', // 16:1 ✓
|
||||
secondaryTextOnWhite: 'rgba(0,0,0,0.6) on #FFFFFF', // 7.4:1 ✓
|
||||
}
|
||||
```
|
||||
|
||||
## Additional Notes
|
||||
- Maintain the soft, nurturing aesthetic with accessible color choices
|
||||
- Keep interactions smooth and delightful with subtle animations
|
||||
- Prioritize clarity and ease of use for sleep-deprived parents
|
||||
- Ensure all text is easily readable at a glance
|
||||
- Use icons consistently from the same icon library (Material Icons)
|
||||
- Maintain visual hierarchy with proper use of whitespace
|
||||
- Always test with screen readers and keyboard navigation
|
||||
Reference in New Issue
Block a user