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

@@ -22,6 +22,7 @@ import { motion } from 'framer-motion';
import * as z from 'zod';
import { useAuth } from '@/lib/auth/AuthContext';
import Link from 'next/link';
import { useTheme } from '@mui/material/styles';
const registerSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
@@ -70,6 +71,7 @@ const registerSchema = z.object({
type RegisterFormData = z.infer<typeof registerSchema>;
export default function RegisterPage() {
const theme = useTheme();
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -148,7 +150,7 @@ export default function RegisterPage() {
justifyContent: 'center',
px: 3,
py: 6,
background: 'linear-gradient(135deg, #FFE4E1 0%, #FFDAB9 100%)',
background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.secondary.light} 100%)`,
}}
>
<motion.div