Benjamin Sutter
da50f3b5ea
- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent), flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography - Card components: white-background cards, DM Serif score numbers, max-2 badge chips with +N overflow tooltip, editorial score badge positioning - Layout shell: gold left-accent nav active state, 64px top bar, outlined workspace chip, DM Serif page titles - Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar (simplified chip styles), DecisionContextPanel (dot metrics, no left accent) - Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4, #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { Box, Typography } from '@mui/material'
|
|
import type { ReminderActivity } from '../../domain/reminder'
|
|
|
|
export const SHADOW_RISK_COLOR: Record<string, string> = {
|
|
NONE: '#64748b',
|
|
LOW: '#16a34a',
|
|
MEDIUM: '#ca8a04',
|
|
HIGH: '#dc2626',
|
|
}
|
|
|
|
export const SHADOW_RISK_LABEL: Record<string, string> = {
|
|
NONE: 'Kein Risiko',
|
|
LOW: 'Niedrig',
|
|
MEDIUM: 'Mittel',
|
|
HIGH: 'Hoch',
|
|
}
|
|
|
|
export const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
|
|
ACTIVE: 'info',
|
|
SNOOZED: 'warning',
|
|
COMPLETED: 'success',
|
|
DISMISSED: 'default',
|
|
}
|
|
|
|
export const STATUS_LABEL: Record<string, string> = {
|
|
ACTIVE: 'Aktiv',
|
|
SNOOZED: 'Schlummernd',
|
|
COMPLETED: 'Erledigt',
|
|
DISMISSED: 'Verworfen',
|
|
}
|
|
|
|
export const ACTION_LABEL: Record<string, string> = {
|
|
CREATED: 'Erstellt',
|
|
SNOOZED: 'Zurückgestellt',
|
|
COMPLETED: 'Erledigt',
|
|
DISMISSED: 'Verworfen',
|
|
NOTED: 'Notiz',
|
|
}
|
|
|
|
export function SectionTitle({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
|
{icon}
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#1e293b', fontSize: '0.8125rem' }}>
|
|
{children}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export function DateRow({ label, value }: { label: string; value?: string }) {
|
|
if (!value) return null
|
|
return (
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 1, alignItems: 'baseline' }}>
|
|
<Typography variant="caption" color="text.secondary">{label}</Typography>
|
|
<Typography variant="body2" sx={{ fontWeight: 500 }}>{new Date(value).toLocaleDateString('de-CH')}</Typography>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export function ActivityEntry({ entry }: { entry: ReminderActivity }) {
|
|
return (
|
|
<Box sx={{ display: 'flex', gap: 1.5 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
|
|
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: '#94a3b8', mt: '4px' }} />
|
|
<Box sx={{ width: 1, flex: 1, bgcolor: '#e8e7e4', mt: 0.5 }} />
|
|
</Box>
|
|
<Box sx={{ pb: 1.5, minWidth: 0 }}>
|
|
<Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
|
|
<Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b' }}>
|
|
{ACTION_LABEL[entry.action]}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{entry.by} · {new Date(entry.at).toLocaleDateString('de-CH')}
|
|
</Typography>
|
|
</Box>
|
|
{entry.note && (
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
|
|
{entry.note}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|