fix: Update home page cards to use theme colors and fix checkbox alignment
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

**Home Page Quick Actions:**
- Updated all 6 quick action cards to use dynamic theme colors
- Feeding: theme.palette.primary.main
- Sleep: theme.palette.secondary.main
- Diaper: theme.palette.warning.main
- Medical: theme.palette.error.main
- Activities: theme.palette.success.main
- AI Assistant: theme.palette.info.main
- Cards now change color when switching between Standard/High Contrast themes

**Registration Page UI Fix:**
- Fixed checkbox label alignment for Terms and Privacy checkboxes
- Added inline red asterisk (*) after labels for better visual indication
- Used alignItems: 'flex-start' for proper multi-line label alignment
- Added bottom margin (mb: 1) between checkboxes for better spacing
- Asterisk now appears inline with text instead of floating separately

**Files Modified:**
- app/page.tsx - Theme-aware quick action colors
- app/(auth)/register/page.tsx - Checkbox alignment fix

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-04 14:03:05 +00:00
parent f31addc471
commit 3e6efbce18
3 changed files with 15 additions and 9 deletions

View File

@@ -420,13 +420,15 @@ export default function RegisterPage() {
/> />
} }
label={ label={
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" component="span">
I agree to the{' '} I agree to the{' '}
<MuiLink href="/terms" target="_blank" underline="hover"> <MuiLink href="/terms" target="_blank" underline="hover">
Terms of Service Terms of Service
</MuiLink> </MuiLink>
{' '}<Typography component="span" color="error.main">*</Typography>
</Typography> </Typography>
} }
sx={{ alignItems: 'flex-start', mb: 1 }}
/> />
{errors.agreeToTerms && ( {errors.agreeToTerms && (
<Typography variant="caption" color="error" sx={{ display: 'block', mt: 0.5, ml: 4 }} id="terms-error" role="alert"> <Typography variant="caption" color="error" sx={{ display: 'block', mt: 0.5, ml: 4 }} id="terms-error" role="alert">
@@ -448,13 +450,15 @@ export default function RegisterPage() {
/> />
} }
label={ label={
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" component="span">
I agree to the{' '} I agree to the{' '}
<MuiLink href="/privacy" target="_blank" underline="hover"> <MuiLink href="/privacy" target="_blank" underline="hover">
Privacy Policy Privacy Policy
</MuiLink> </MuiLink>
{' '}<Typography component="span" color="error.main">*</Typography>
</Typography> </Typography>
} }
sx={{ alignItems: 'flex-start', mb: 1 }}
/> />
{errors.agreeToPrivacy && ( {errors.agreeToPrivacy && (
<Typography variant="caption" color="error" sx={{ display: 'block', mt: 0.5, ml: 4 }} id="privacy-error" role="alert"> <Typography variant="caption" color="error" sx={{ display: 'block', mt: 0.5, ml: 4 }} id="privacy-error" role="alert">

View File

@@ -27,9 +27,11 @@ import { format, formatDistanceToNow } from 'date-fns';
import { useRealTimeActivities } from '@/hooks/useWebSocket'; import { useRealTimeActivities } from '@/hooks/useWebSocket';
import { useTranslation } from '@/hooks/useTranslation'; import { useTranslation } from '@/hooks/useTranslation';
import { analyticsApi } from '@/lib/api/analytics'; import { analyticsApi } from '@/lib/api/analytics';
import { useTheme } from '@mui/material/styles';
export default function HomePage() { export default function HomePage() {
const { t } = useTranslation('dashboard'); const { t } = useTranslation('dashboard');
const theme = useTheme();
const { user, isLoading: authLoading } = useAuth(); const { user, isLoading: authLoading } = useAuth();
const router = useRouter(); const router = useRouter();
const [selectedChildId, setSelectedChildId] = useState<string | null>(null); const [selectedChildId, setSelectedChildId] = useState<string | null>(null);
@@ -118,12 +120,12 @@ export default function HomePage() {
}, [selectedChildId]); }, [selectedChildId]);
const quickActions = [ const quickActions = [
{ icon: <Restaurant />, label: t('quickActions.feeding'), color: '#E91E63', path: '/track/feeding' }, // Pink with 4.5:1 contrast { icon: <Restaurant />, label: t('quickActions.feeding'), color: theme.palette.primary.main, path: '/track/feeding' },
{ icon: <Hotel />, label: t('quickActions.sleep'), color: '#1976D2', path: '/track/sleep' }, // Blue with 4.5:1 contrast { icon: <Hotel />, label: t('quickActions.sleep'), color: theme.palette.secondary.main, path: '/track/sleep' },
{ icon: <BabyChangingStation />, label: t('quickActions.diaper'), color: '#F57C00', path: '/track/diaper' }, // Orange with 4.5:1 contrast { icon: <BabyChangingStation />, label: t('quickActions.diaper'), color: theme.palette.warning.main, path: '/track/diaper' },
{ icon: <MedicalServices />, label: t('quickActions.medical'), color: '#C62828', path: '/track/medicine' }, // Red with 4.5:1 contrast { icon: <MedicalServices />, label: t('quickActions.medical'), color: theme.palette.error.main, path: '/track/medicine' },
{ icon: <Insights />, label: t('quickActions.activities'), color: '#558B2F', path: '/activities' }, // Green with 4.5:1 contrast { icon: <Insights />, label: t('quickActions.activities'), color: theme.palette.success.main, path: '/activities' },
{ icon: <SmartToy />, label: t('quickActions.aiAssistant'), color: '#D84315', path: '/ai-assistant' }, // Deep orange with 4.5:1 contrast { icon: <SmartToy />, label: t('quickActions.aiAssistant'), color: theme.palette.info.main, path: '/ai-assistant' },
]; ];
const formatSleepHours = (minutes: number) => { const formatSleepHours = (minutes: number) => {

File diff suppressed because one or more lines are too long