diff --git a/packages/web/public/index.html b/packages/web/public/index.html
index a81fbaf6..33f20d72 100644
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -26,10 +26,9 @@
-->
Automatisch
-
+
+
+
diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx
index 5891ee58..a3f5cc0c 100644
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -17,7 +17,11 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
return (
- theme.zIndex.drawer + 1 }}>
+ theme.palette.primary.dark,
+ zIndex: (theme) => theme.zIndex.drawer + 1
+ }}>
{icon}
-
+
);
diff --git a/packages/web/src/components/PageTitle/index.tsx b/packages/web/src/components/PageTitle/index.tsx
index 61c9c985..febf0109 100644
--- a/packages/web/src/components/PageTitle/index.tsx
+++ b/packages/web/src/components/PageTitle/index.tsx
@@ -8,7 +8,7 @@ export default function PageTitle(props: PageTitleProps) {
const { children } = props;
return (
-
+
{children}
);
diff --git a/packages/web/src/components/SearchInput/style.ts b/packages/web/src/components/SearchInput/style.ts
index e39ba2ae..2a548b77 100644
--- a/packages/web/src/components/SearchInput/style.ts
+++ b/packages/web/src/components/SearchInput/style.ts
@@ -30,6 +30,7 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
export const InputBase = styled(MuiInput)(({ theme }) => ({
color: 'inherit',
width: '100%',
+ fontWeight: 400,
maxWidth: '100%',
'& .MuiInput-input': {
padding: theme.spacing(1, 1, 1, 0),
diff --git a/packages/web/src/styles/theme.ts b/packages/web/src/styles/theme.ts
index 320f433e..4c7f51cb 100644
--- a/packages/web/src/styles/theme.ts
+++ b/packages/web/src/styles/theme.ts
@@ -1,7 +1,132 @@
import { createTheme } from '@mui/material/styles';
-const theme = createTheme({
+const theme = createTheme();
+
+const extendedTheme = createTheme({
+ palette: {
+ primary: {
+ main: '#0059F7',
+ light: '#4286FF',
+ dark: '#001F52',
+ contrastText: '#fff'
+ },
+ divider: '#0000001F',
+ common: {
+ black: '#1D1D1D',
+ white: '#fff'
+ },
+ text: {
+ primary: '#001F52',
+ secondary: '#5C5C5C',
+ disabled: '#C2C2C2'
+ },
+ error: {
+ main: '#F44336',
+ light: '#F88078',
+ dark: '#E31B0C',
+ contrastText: '#fff'
+ },
+ success: {
+ main: '#4CAF50',
+ light: '#7BC67E',
+ dark: '#3B873E',
+ contrastText: '#fff'
+ },
+ warning: {
+ main: '#ED6C02',
+ light: '#FFB547',
+ dark: '#C77700',
+ contrastText: 'rgba(0, 0, 0, 0.87)'
+ },
+ secondary: {
+ main: '#F50057',
+ light: '#FF4081',
+ dark: '#C51162',
+ contrastText: '#fff'
+ },
+ info: {
+ main: '#6B6F8D',
+ light: '#CED0E4',
+ dark: '#484B6C',
+ contrastText: '#fff'
+ },
+ background: {
+ paper: '#fff',
+ default: '#F3F7FD'
+ }
+ },
+ typography: {
+ fontFamily: [
+ 'Inter',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ ].join(','),
+ h1: {
+ fontSize: theme.typography.pxToRem(72),
+ lineHeight: 1.11,
+ fontWeight: 700,
+ },
+ h2: {
+ fontSize: theme.typography.pxToRem(48),
+ lineHeight: 1.16,
+ fontWeight: 700,
+ },
+ h3: {
+ fontSize: theme.typography.pxToRem(32),
+ lineHeight: 1.16,
+ fontWeight: 700,
+ },
+ h4: {
+ fontSize: theme.typography.pxToRem(24),
+ lineHeight: 1.3,
+ fontWeight: 700,
+ },
+ h5: {
+ fontSize: theme.typography.pxToRem(24),
+ lineHeight: 1.3,
+ fontWeight: 400,
+ },
+ h6: {
+ fontSize: theme.typography.pxToRem(20),
+ lineHeight: 1.2,
+ fontWeight: 500,
+ },
+ subtitle1: {
+ fontSize: theme.typography.pxToRem(14),
+ lineHeight: 1.71,
+ fontWeight: 400,
+ textTransform: 'uppercase',
+ },
+ subtitle2: {
+ fontSize: theme.typography.pxToRem(14),
+ lineHeight: 1.14,
+ fontWeight: 400,
+ },
+ body1: {
+ fontSize: theme.typography.pxToRem(16),
+ lineHeight: 1.5,
+ fontWeight: 700,
+ },
+ body2: {
+ fontSize: theme.typography.pxToRem(16),
+ lineHeight: 1.5,
+ fontWeight: 400,
+ },
+ button: {
+ fontWeight: 700,
+ }
+ },
components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ padding: '12px 16px'
+ }
+ }
+ },
MuiCssBaseline: {
styleOverrides: {
a: {
@@ -12,4 +137,4 @@ const theme = createTheme({
}
});
-export default theme;
+export default extendedTheme;