feat: Update UI colors to use dynamic theme system and fix predictions
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

**Theme-Aware Colors Across App:**
- Updated track page cards to use theme.palette colors
- Updated analytics page icons to use theme colors
- Updated login/register gradient backgrounds to use theme colors
- All colors now respond to Standard/High Contrast theme toggle

**Fixed Next Predicted Activity Section:**
- Connected to real analytics API predictions endpoint
- Fetches sleep and feeding predictions based on actual data
- Shows "Nap time in X minutes" when prediction available
- Displays formatted time using formatDistanceToNow
- Falls back to "Not enough data available for now. Keep tracking :)" when no predictions

**Multi-Language Support:**
- Added "notEnoughData" translation key to all 7 languages:
  - English: "Not enough data available for now. Keep tracking :)"
  - Spanish: "No hay suficientes datos disponibles por ahora. ¡Sigue rastreando! :)"
  - French: "Pas assez de données disponibles pour le moment. Continuez à suivre :)"
  - Portuguese: "Dados insuficientes disponíveis no momento. Continue rastreando :)"
  - Chinese: "暂无足够数据。请继续记录 :)"
  - German: "Derzeit nicht genügend Daten verfügbar. Weiter verfolgen :)"
  - Italian: "Dati insufficienti al momento. Continua a monitorare :)"

**Color Mapping by Theme:**

*Purple Theme (Standard):*
- Feeding: Primary (#8b52ff)
- Sleep: Secondary (#ff7094)
- Diaper: Warning (amber)
- Medical: Error (red)
- Activity: Success (green)
- Growth: Primary Dark

*Peach Theme (High Contrast):*
- Feeding: Primary (#FFB6C1)
- Sleep: Secondary (#FFDAB9)
- Diaper: Warning (amber)
- Medical: Error (red)
- Activity: Success (green)
- Growth: Primary Dark

**Files Modified:**
- app/track/page.tsx - Dynamic theme colors
- app/analytics/page.tsx - Theme-aware icon colors
- app/(auth)/login/page.tsx - Gradient uses theme
- app/(auth)/register/page.tsx - Gradient uses theme
- app/page.tsx - Predictions integration
- locales/*/dashboard.json - All 7 languages

🎉 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-04 13:58:24 +00:00
parent 2a48dd24ff
commit f31addc471
13 changed files with 92 additions and 27 deletions

View File

@@ -20,6 +20,7 @@ import {
ListItem,
ListItemIcon,
ListItemText,
useTheme,
} from '@mui/material';
import {
TrendingUp,
@@ -63,6 +64,7 @@ function TabPanel(props: TabPanelProps) {
}
export default function AnalyticsPage() {
const theme = useTheme();
const [children, setChildren] = useState<Child[]>([]);
const [selectedChildId, setSelectedChildId] = useState<string>('');
const [tabValue, setTabValue] = useState(0);
@@ -224,7 +226,7 @@ export default function AnalyticsPage() {
<Card>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
<Hotel sx={{ mr: 1, color: '#1976D2' }} />
<Hotel sx={{ mr: 1, color: theme.palette.secondary.main }} />
<Typography variant="h6">Sleep Patterns</Typography>
<Chip
size="small"
@@ -289,7 +291,7 @@ export default function AnalyticsPage() {
<Card>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
<Restaurant sx={{ mr: 1, color: '#E91E63' }} />
<Restaurant sx={{ mr: 1, color: theme.palette.primary.main }} />
<Typography variant="h6">Feeding Patterns</Typography>
<Chip
size="small"
@@ -358,7 +360,7 @@ export default function AnalyticsPage() {
<Card>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
<BabyChangingStation sx={{ mr: 1, color: '#F57C00' }} />
<BabyChangingStation sx={{ mr: 1, color: theme.palette.warning.main }} />
<Typography variant="h6">Diaper Patterns</Typography>
<Chip
size="small"