feat(frontend): visual design overhaul — Inter font, softer cards/shadows, red-themed profile banner, modern typography hierarchy, and refreshed color palette

2026-04-13 11:07:28 +02:00
parent 43ce1f930c
commit f4690cf185
7 changed files with 186 additions and 86 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,9 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <title>Feuerwehr Dashboard</title>
  </head>
  <body>
--- a/frontend/src/components/dashboard/UserProfile.tsx
+++ b/frontend/src/components/dashboard/UserProfile.tsx
@@ -23,28 +23,34 @@ const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
    <Paper
      elevation={0}
      sx={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'linear-gradient(135deg, #d32f2f 0%, #9a0007 100%)',
        color: 'white',
-        borderRadius: 2,
-        px: 3,
-        py: 1.5,
+        borderRadius: 3,
+        px: 3.5,
+        py: 2,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Avatar
          sx={{
-            width: 40,
-            height: 40,
+            width: 44,
+            height: 44,
            bgcolor: 'rgba(255,255,255,0.2)',
            fontSize: '1rem',
            fontWeight: 'bold',
+            border: '2px solid rgba(255,255,255,0.3)',
          }}
        >
          {initials.toUpperCase()}
        </Avatar>
-        <Typography variant="h6" sx={{ fontWeight: 500 }}>
-          {getGreeting()}, {firstName}!
-        </Typography>
+        <Box>
+          <Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
+            {getGreeting()}, {firstName}!
+          </Typography>
+          <Typography variant="body2" sx={{ opacity: 0.8, fontSize: '0.75rem' }}>
+            {new Date().toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })}
+          </Typography>
+        </Box>
      </Box>
    </Paper>
  );
--- a/frontend/src/components/dashboard/WidgetGroup.tsx
+++ b/frontend/src/components/dashboard/WidgetGroup.tsx
@@ -17,24 +17,28 @@ function WidgetGroup({ title, children, gridColumn }: WidgetGroupProps) {
    <Box
      sx={{
        position: 'relative',
-        border: '1px solid',
-        borderColor: 'divider',
-        borderRadius: 1,
-        p: 2,
-        pt: 3,
+        borderRadius: 2,
+        p: 2.5,
+        pt: 3.5,
        gridColumn,
+        bgcolor: 'rgba(0, 0, 0, 0.02)',
+        border: '1px solid rgba(0, 0, 0, 0.04)',
      }}
    >
      <Typography
        sx={{
          position: 'absolute',
-          top: -10,
-          left: 16,
-          px: 1,
+          top: -9,
+          left: 20,
+          px: 1.5,
+          py: 0.25,
          backgroundColor: 'background.default',
-          fontSize: '0.75rem',
+          fontSize: '0.6875rem',
          color: 'text.secondary',
-          fontWeight: 500,
+          fontWeight: 600,
+          letterSpacing: '0.06em',
+          textTransform: 'uppercase',
+          borderRadius: 1,
        }}
      >
        {title}
--- a/frontend/src/components/templates/DataTable.tsx
+++ b/frontend/src/components/templates/DataTable.tsx
@@ -129,8 +129,8 @@ export function DataTable<T>({
  return (
    <Paper>
      {showToolbar && (
-        <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
-          {title && <Typography variant="h6">{title}</Typography>}
+        <Box sx={{ px: 2.5, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+          {title && <Typography variant="h6" fontWeight={700}>{title}</Typography>}
          <Box sx={{ flex: 1 }} />
          {searchEnabled && (
            <TextField
@@ -138,11 +138,11 @@ export function DataTable<T>({
              placeholder={searchPlaceholder}
              value={search}
              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-              sx={{ maxWidth: 300 }}
+              sx={{ maxWidth: 280, '& .MuiOutlinedInput-root': { bgcolor: 'rgba(0,0,0,0.02)' } }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
-                    <SearchIcon fontSize="small" />
+                    <SearchIcon fontSize="small" sx={{ color: 'text.disabled' }} />
                  </InputAdornment>
                ),
              }}
--- a/frontend/src/components/templates/StatCard.tsx
+++ b/frontend/src/components/templates/StatCard.tsx
@@ -30,29 +30,32 @@ export const StatCard: React.FC<StatCardProps> = ({
      ) : (
        <Box display="flex" alignItems="center">
          <Box sx={{ flex: GOLDEN_RATIO }}>
-            <Typography variant="caption" textTransform="uppercase" color="text.secondary">
+            <Typography variant="caption" textTransform="uppercase" color="text.secondary" sx={{ letterSpacing: '0.06em', fontWeight: 600 }}>
              {title}
            </Typography>
-            <Typography variant="h4" fontWeight={700}>
+            <Typography variant="h3" fontWeight={800} sx={{ lineHeight: 1.1, mt: 0.5, letterSpacing: '-0.02em' }}>
              {value}
            </Typography>
            {trend && (
-              <Typography
-                variant="caption"
-                color={trend.value >= 0 ? 'success.main' : 'error.main'}
-              >
-                {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
-                {trend.label && ` ${trend.label}`}
-              </Typography>
+              <Box sx={{ display: 'inline-flex', alignItems: 'center', mt: 1, px: 1, py: 0.25, borderRadius: 1, bgcolor: trend.value >= 0 ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)' }}>
+                <Typography
+                  variant="caption"
+                  fontWeight={600}
+                  color={trend.value >= 0 ? 'success.main' : 'error.main'}
+                >
+                  {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
+                  {trend.label && ` ${trend.label}`}
+                </Typography>
+              </Box>
            )}
          </Box>
          <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
            <Box
              sx={{
-                width: 56,
-                height: 56,
-                borderRadius: '50%',
-                bgcolor: `${color}15`,
+                width: 52,
+                height: 52,
+                borderRadius: 3,
+                bgcolor: `${color}12`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
--- a/frontend/src/components/templates/WidgetCard.tsx
+++ b/frontend/src/components/templates/WidgetCard.tsx
@@ -4,7 +4,6 @@ import {
  Card,
  CardActionArea,
  CardContent,
-  Divider,
  Skeleton,
  Typography,
  Alert,
@@ -52,16 +51,24 @@ export const WidgetCard: React.FC<WidgetCardProps> = ({
    <Box
      sx={noPadding ? { px: 2.5, pt: 2.5 } : undefined}
    >
-      <Box display="flex" alignItems="center" justifyContent="space-between" mb={2}>
-        <Box display="flex" alignItems="center" gap={1}>
-          {icon}
-          <Typography variant="subtitle1" fontWeight={600}>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        mb={1.5}
+      >
+        <Box display="flex" alignItems="center" gap={0.75}>
+          {icon && (
+            <Box sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', '& > *': { fontSize: '1.1rem' } }}>
+              {icon}
+            </Box>
+          )}
+          <Typography variant="subtitle2" fontWeight={600} color="text.secondary" sx={{ textTransform: 'uppercase', fontSize: '0.6875rem', letterSpacing: '0.06em' }}>
            {title}
          </Typography>
        </Box>
        {action}
      </Box>
-      <Divider sx={{ mb: 2 }} />
    </Box>
  );

@@ -113,8 +120,7 @@ export const WidgetCard: React.FC<WidgetCardProps> = ({
      </Box>
      {footer && (
        <>
-          <Divider sx={{ mt: 2 }} />
-          <Box sx={{ pt: 1.5, ...(noPadding ? { px: 2.5, pb: 2.5 } : {}) }}>
+          <Box sx={{ mt: 2, pt: 1.5, borderTop: '1px solid', borderColor: 'divider', ...(noPadding ? { mx: 2.5, pb: 2.5 } : {}) }}>
            {footer}
          </Box>
        </>
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -24,24 +24,26 @@ const lightThemeOptions: ThemeOptions = {
    primary: primaryRed,
    secondary: secondaryBlue,
    background: {
-      default: '#f5f5f5',
+      default: '#f0f2f5',
      paper: '#ffffff',
    },
+    divider: 'rgba(0, 0, 0, 0.08)',
    error: {
-      main: '#f44336',
+      main: '#ef4444',
    },
    warning: {
-      main: '#ff9800',
+      main: '#f59e0b',
    },
    info: {
-      main: '#2196f3',
+      main: '#3b82f6',
    },
    success: {
-      main: '#4caf50',
+      main: '#22c55e',
    },
  },
  typography: {
    fontFamily: [
+      'Inter',
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
@@ -51,28 +53,30 @@ const lightThemeOptions: ThemeOptions = {
      'sans-serif',
    ].join(','),
    h1: {
-      fontSize: '2.5rem',
-      fontWeight: 600,
+      fontSize: '2.25rem',
+      fontWeight: 700,
      lineHeight: 1.2,
+      letterSpacing: '-0.02em',
    },
    h2: {
-      fontSize: '2rem',
-      fontWeight: 600,
+      fontSize: '1.875rem',
+      fontWeight: 700,
      lineHeight: 1.3,
+      letterSpacing: '-0.01em',
    },
    h3: {
-      fontSize: '1.75rem',
-      fontWeight: 600,
+      fontSize: '1.5rem',
+      fontWeight: 700,
      lineHeight: 1.4,
    },
    h4: {
-      fontSize: '1.5rem',
-      fontWeight: 600,
+      fontSize: '1.25rem',
+      fontWeight: 700,
      lineHeight: 1.4,
    },
    h5: {
-      fontSize: '1.25rem',
-      fontWeight: 600,
+      fontSize: '1.125rem',
+      fontWeight: 700,
      lineHeight: 1.5,
    },
    h6: {
@@ -80,34 +84,61 @@ const lightThemeOptions: ThemeOptions = {
      fontWeight: 600,
      lineHeight: 1.6,
    },
-    body1: {
-      fontSize: '1rem',
+    subtitle1: {
+      fontSize: '0.9375rem',
+      fontWeight: 600,
      lineHeight: 1.5,
    },
+    body1: {
+      fontSize: '0.9375rem',
+      lineHeight: 1.6,
+    },
    body2: {
-      fontSize: '0.875rem',
-      lineHeight: 1.43,
+      fontSize: '0.8125rem',
+      lineHeight: 1.5,
+    },
+    caption: {
+      fontSize: '0.6875rem',
+      fontWeight: 500,
+      lineHeight: 1.5,
+      letterSpacing: '0.04em',
    },
    button: {
      textTransform: 'none',
-      fontWeight: 500,
+      fontWeight: 600,
+      fontSize: '0.8125rem',
    },
  },
  spacing: 8,
  shape: {
-    borderRadius: 8,
+    borderRadius: 10,
  },
  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          WebkitFontSmoothing: 'antialiased',
+          MozOsxFontSmoothing: 'grayscale',
+        },
+      },
+    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
-          padding: '8px 16px',
+          padding: '8px 18px',
+          fontWeight: 600,
        },
        contained: {
          boxShadow: 'none',
          '&:hover': {
-            boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+          },
+        },
+        outlined: {
+          borderWidth: 1.5,
+          '&:hover': {
+            borderWidth: 1.5,
          },
        },
      },
@@ -115,11 +146,13 @@ const lightThemeOptions: ThemeOptions = {
    MuiCard: {
      styleOverrides: {
        root: {
-          borderRadius: 12,
-          boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-          transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
+          borderRadius: 14,
+          border: '1px solid rgba(0, 0, 0, 0.06)',
+          boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
+          transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
          '&:hover': {
-            boxShadow: '0 4px 8px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+            borderColor: 'rgba(0, 0, 0, 0.12)',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
          },
        },
      },
@@ -127,23 +160,39 @@ const lightThemeOptions: ThemeOptions = {
    MuiPaper: {
      styleOverrides: {
        root: {
-          borderRadius: 8,
+          borderRadius: 10,
+        },
+        elevation0: {
+          boxShadow: 'none',
        },
        elevation1: {
-          boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+          border: '1px solid rgba(0, 0, 0, 0.06)',
+          boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
        },
        elevation2: {
-          boxShadow: '0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
        },
        elevation3: {
-          boxShadow: '0 4px 8px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+          boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          boxShadow: '0 1px 0 rgba(0,0,0,0.06)',
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          borderRadius: 6,
+        },
+        sizeSmall: {
+          height: 22,
+          fontSize: '0.6875rem',
        },
      },
    },
@@ -157,6 +206,10 @@ const lightThemeOptions: ThemeOptions = {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
+          borderRadius: 8,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'rgba(0, 0, 0, 0.12)',
+          },
          '& .MuiOutlinedInput-notchedOutline legend': {
            fontSize: '0.75em',
          },
@@ -168,9 +221,11 @@ const lightThemeOptions: ThemeOptions = {
        root: {
          '& .MuiTableCell-head': {
            textTransform: 'uppercase',
-            fontSize: '0.75rem',
+            fontSize: '0.6875rem',
            fontWeight: 600,
-            letterSpacing: '0.05em',
+            letterSpacing: '0.06em',
+            color: 'rgba(0, 0, 0, 0.5)',
+            borderBottom: '2px solid rgba(0, 0, 0, 0.06)',
          },
        },
      },
@@ -179,15 +234,37 @@ const lightThemeOptions: ThemeOptions = {
      styleOverrides: {
        root: {
          '&.MuiTableRow-hover:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            backgroundColor: 'rgba(0, 0, 0, 0.02)',
          },
        },
      },
    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid rgba(0, 0, 0, 0.04)',
+        },
+      },
+    },
    MuiDialog: {
      styleOverrides: {
        paper: {
-          borderRadius: 12,
+          borderRadius: 14,
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: 'rgba(0, 0, 0, 0.06)',
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          borderRadius: 6,
+          fontSize: '0.75rem',
        },
      },
    },
@@ -201,20 +278,21 @@ const darkThemeOptions: ThemeOptions = {
    primary: primaryRed,
    secondary: secondaryBlue,
    background: {
-      default: '#121212',
-      paper: '#1e1e1e',
+      default: '#0f1117',
+      paper: '#1a1d27',
    },
+    divider: 'rgba(255, 255, 255, 0.08)',
    error: {
-      main: '#f44336',
+      main: '#ef4444',
    },
    warning: {
-      main: '#ff9800',
+      main: '#f59e0b',
    },
    info: {
-      main: '#2196f3',
+      main: '#3b82f6',
    },
    success: {
-      main: '#4caf50',
+      main: '#22c55e',
    },
  },
 };