feat: Redesign UI with consistent card styling and mobile header
- Updated track page cards to match home page styling with vibrant colors - Applied consistent 140px height cards across track and insights pages - Added mobile header bar with connection status and user menu - Moved user menu from floating top-left to fixed header top-right - Updated insights dashboard with home page color palette (#E91E63, #1976D2, etc.) - Centered cards with minWidth constraints (200px for stats, 400px for charts) - Fixed hydration mismatch by replacing JS media queries with CSS breakpoints - Improved accessibility with viewport settings (removed zoom restrictions) - Added UI improvements documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -5,17 +5,18 @@ import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Paper,
|
||||
Button,
|
||||
Avatar,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Chip,
|
||||
CardActions,
|
||||
Container,
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@mui/material';
|
||||
import { Add, ChildCare, Edit, Delete, Cake } from '@mui/icons-material';
|
||||
import { Add, ChildCare, Edit, Delete, CalendarToday } from '@mui/icons-material';
|
||||
import { AppShell } from '@/components/layouts/AppShell/AppShell';
|
||||
import { ProtectedRoute } from '@/components/common/ProtectedRoute';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
@@ -151,13 +152,13 @@ export default function ChildrenPage() {
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<Box>
|
||||
<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="h4" component="h1" fontWeight="600" gutterBottom>
|
||||
<Typography variant="h4" component="h1" fontWeight="600">
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
@@ -166,6 +167,11 @@ export default function ChildrenPage() {
|
||||
startIcon={<Add />}
|
||||
onClick={handleAddChild}
|
||||
disabled={loading || !familyId}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
px: 3
|
||||
}}
|
||||
>
|
||||
{t('addChild')}
|
||||
</Button>
|
||||
@@ -208,86 +214,66 @@ export default function ChildrenPage() {
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
{children.map((child, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={child.id}>
|
||||
<Grid item xs={12} sm={6} key={child.id}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.1 }}
|
||||
>
|
||||
<Card
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
height: '280px', // Fixed height for consistency
|
||||
minHeight: '280px',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.paper',
|
||||
border: 1,
|
||||
borderColor: 'divider'
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<Avatar
|
||||
src={child.photoUrl}
|
||||
sx={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
bgcolor: child.gender === 'male' ? '#B6D7FF' : '#FFB6C1',
|
||||
mr: 2,
|
||||
}}
|
||||
>
|
||||
<ChildCare sx={{ fontSize: 32 }} />
|
||||
</Avatar>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h6" fontWeight="600">
|
||||
{child.name}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={t(`gender.${child.gender}`)}
|
||||
size="small"
|
||||
sx={{ textTransform: 'capitalize', mt: 0.5 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Cake sx={{ fontSize: 20, color: 'text.secondary' }} />
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Avatar
|
||||
src={child.photoUrl}
|
||||
sx={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
bgcolor: 'primary.light',
|
||||
fontSize: 24
|
||||
}}
|
||||
>
|
||||
{child.name[0]}
|
||||
</Avatar>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h6" fontWeight="600">{child.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{new Date(child.birthDate).toLocaleDateString()}
|
||||
{t(`gender.${child.gender}`)}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1 }}>
|
||||
<CalendarToday fontSize="small" color="action" />
|
||||
<Typography variant="caption">
|
||||
{new Date(child.birthDate).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="caption" color="primary.main">
|
||||
{t('age')}: {calculateAge(child.birthDate)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="primary"
|
||||
fontWeight="600"
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
{t('age')}: {calculateAge(child.birthDate)}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
<CardActions sx={{ justifyContent: 'flex-end', pt: 0 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleEditChild(child)}
|
||||
color="primary"
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
|
||||
<IconButton size="small" color="primary" onClick={() => handleEditChild(child)}>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleDeleteClick(child)}
|
||||
color="error"
|
||||
>
|
||||
<IconButton size="small" color="error" onClick={() => handleDeleteClick(child)}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Box>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<ChildDialog
|
||||
open={dialogOpen}
|
||||
|
||||
Reference in New Issue
Block a user