feat(frontend): visual design overhaul — Inter font, softer cards/shadows, red-themed profile banner, modern typography hierarchy, and refreshed color palette
This commit is contained in:
Matthias Hochmeister
@@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user