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,8 +5,7 @@ import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Paper,
|
||||
Button,
|
||||
Avatar,
|
||||
Chip,
|
||||
@@ -15,6 +14,13 @@ import {
|
||||
IconButton,
|
||||
Divider,
|
||||
Snackbar,
|
||||
Container,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Card,
|
||||
CardContent,
|
||||
} from '@mui/material';
|
||||
import { PersonAdd, ContentCopy, People, Delete, GroupAdd } from '@mui/icons-material';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
@@ -162,22 +168,23 @@ export default function FamilyPage() {
|
||||
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('pageTitle')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('pageSubtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<GroupAdd />}
|
||||
onClick={() => setJoinDialogOpen(true)}
|
||||
disabled={loading}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.joinFamily')}
|
||||
</Button>
|
||||
@@ -186,6 +193,7 @@ export default function FamilyPage() {
|
||||
startIcon={<PersonAdd />}
|
||||
onClick={() => setInviteDialogOpen(true)}
|
||||
disabled={loading || !familyId}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.inviteMember')}
|
||||
</Button>
|
||||
@@ -203,49 +211,48 @@ export default function FamilyPage() {
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={4}>
|
||||
{/* Family Share Code */}
|
||||
{family && (
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ minHeight: '140px' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" component="h2" fontWeight="600" gutterBottom>
|
||||
{t('shareCode.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{t('shareCode.description')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Chip
|
||||
label={family.shareCode}
|
||||
sx={{
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 600,
|
||||
py: 2.5,
|
||||
px: 1,
|
||||
}}
|
||||
color="primary"
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopy />}
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
{t('buttons.copyCode')}
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
{t('shareCode.title')}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||||
{t('shareCode.description')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
|
||||
<Chip
|
||||
label={family.shareCode}
|
||||
sx={{
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 600,
|
||||
bgcolor: 'primary.light',
|
||||
color: 'primary.main'
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ContentCopy />}
|
||||
onClick={handleCopyCode}
|
||||
sx={{ borderRadius: 2, textTransform: 'none' }}
|
||||
>
|
||||
{t('buttons.copyCode')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* Family Members */}
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ minHeight: '200px' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" fontWeight="600" gutterBottom sx={{ mb: 3 }}>
|
||||
{t('members.title', { count: members.length })}
|
||||
</Typography>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={0} sx={{ p: 3, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
|
||||
{t('members.title', { count: members.length })}
|
||||
</Typography>
|
||||
|
||||
{members.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 4 }}>
|
||||
@@ -265,68 +272,71 @@ export default function FamilyPage() {
|
||||
</Button>
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<List sx={{ p: 0 }}>
|
||||
{members.map((member, index) => {
|
||||
const memberName = member.user?.name || t('placeholders.unknownUser');
|
||||
return (
|
||||
<Box key={member.id} component="div">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<ListItem
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
borderRadius: 2,
|
||||
mb: 1,
|
||||
bgcolor: 'background.default'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
{index > 0 && <Divider sx={{ mb: 2 }} />}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main',
|
||||
}}
|
||||
>
|
||||
{memberName.charAt(0).toUpperCase()}
|
||||
</Avatar>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1" fontWeight="600">
|
||||
{memberName}
|
||||
</Typography>
|
||||
{isCurrentUser(member.userId) && (
|
||||
<Chip label={t('members.youLabel')} size="small" color="success" />
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{member.user?.email || t('placeholders.noEmail')}
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: isCurrentUser(member.userId) ? 'primary.main' : 'secondary.main' }}>
|
||||
{memberName[0]}
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body1" fontWeight={500}>
|
||||
{memberName}
|
||||
</Typography>
|
||||
{isCurrentUser(member.userId) && (
|
||||
<Chip label={t('members.youLabel')} size="small" color="success" />
|
||||
)}
|
||||
</Box>
|
||||
<Chip
|
||||
label={t(`roles.${member.role}`)}
|
||||
color={getRoleColor(member.role)}
|
||||
size="small"
|
||||
/>
|
||||
{!isCurrentUser(member.userId) && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleRemoveClick(member)}
|
||||
color="error"
|
||||
aria-label={t('members.removeAriaLabel', { name: memberName })}
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
</Box>
|
||||
}
|
||||
secondary={member.user?.email || t('placeholders.noEmail')}
|
||||
primaryTypographyProps={{ fontWeight: 500 }}
|
||||
/>
|
||||
<Chip
|
||||
label={t(`roles.${member.role}`)}
|
||||
size="small"
|
||||
color={getRoleColor(member.role)}
|
||||
sx={{ borderRadius: 1, mr: 1 }}
|
||||
/>
|
||||
{!isCurrentUser(member.userId) && (
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleRemoveClick(member)}
|
||||
color="error"
|
||||
aria-label={t('members.removeAriaLabel', { name: memberName })}
|
||||
>
|
||||
<Delete fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</ListItem>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</List>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<InviteMemberDialog
|
||||
open={inviteDialogOpen}
|
||||
|
||||
Reference in New Issue
Block a user