diff --git a/frontend/index.html b/frontend/index.html
index 2d6e58b..2d00903 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,9 @@
+
+
+
Feuerwehr Dashboard
diff --git a/frontend/src/components/dashboard/UserProfile.tsx b/frontend/src/components/dashboard/UserProfile.tsx
index 468089d..5799bec 100644
--- a/frontend/src/components/dashboard/UserProfile.tsx
+++ b/frontend/src/components/dashboard/UserProfile.tsx
@@ -23,28 +23,34 @@ const UserProfile: React.FC = ({ user }) => {
{initials.toUpperCase()}
-
- {getGreeting()}, {firstName}!
-
+
+
+ {getGreeting()}, {firstName}!
+
+
+ {new Date().toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })}
+
+
);
diff --git a/frontend/src/components/dashboard/WidgetGroup.tsx b/frontend/src/components/dashboard/WidgetGroup.tsx
index e735f9b..82bedf6 100644
--- a/frontend/src/components/dashboard/WidgetGroup.tsx
+++ b/frontend/src/components/dashboard/WidgetGroup.tsx
@@ -17,24 +17,28 @@ function WidgetGroup({ title, children, gridColumn }: WidgetGroupProps) {
{title}
diff --git a/frontend/src/components/templates/DataTable.tsx b/frontend/src/components/templates/DataTable.tsx
index 215351c..523dbfe 100644
--- a/frontend/src/components/templates/DataTable.tsx
+++ b/frontend/src/components/templates/DataTable.tsx
@@ -129,8 +129,8 @@ export function DataTable({
return (
{showToolbar && (
-
- {title && {title}}
+
+ {title && {title}}
{searchEnabled && (
({
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: (
-
+
),
}}
diff --git a/frontend/src/components/templates/StatCard.tsx b/frontend/src/components/templates/StatCard.tsx
index 90cec9e..1e89772 100644
--- a/frontend/src/components/templates/StatCard.tsx
+++ b/frontend/src/components/templates/StatCard.tsx
@@ -30,29 +30,32 @@ export const StatCard: React.FC = ({
) : (
-
+
{title}
-
+
{value}
{trend && (
- = 0 ? 'success.main' : 'error.main'}
- >
- {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
- {trend.label && ` ${trend.label}`}
-
+ = 0 ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)' }}>
+ = 0 ? 'success.main' : 'error.main'}
+ >
+ {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
+ {trend.label && ` ${trend.label}`}
+
+
)}
= ({
-
-
- {icon}
-
+
+
+ {icon && (
+ *': { fontSize: '1.1rem' } }}>
+ {icon}
+
+ )}
+
{title}
{action}
-
);
@@ -113,8 +120,7 @@ export const WidgetCard: React.FC = ({
{footer && (
<>
-
-
+
{footer}
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 723f9e1..5619f52 100644
--- 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',
},
},
};