groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update theme

Browse Source
This commit is contained in:
Ali BARIN
2021-11-24 23:15:22 +01:00
parent 3260bf8215
commit 232c224ccf
6 changed files with 138 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/public/index.html
View File

@@ -26,10 +26,9 @@
--> -->
<title>Automatisch</title> <title>Automatisch</title>
<link <link rel="preconnect" href="https://fonts.googleapis.com">
rel="stylesheet" <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
/>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

6
packages/web/src/components/AppBar/index.tsx
View File

@@ -17,7 +17,11 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
return ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<HideOnScroll> <HideOnScroll>
<MuiAppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}> <MuiAppBar
sx={{
background: (theme) => theme.palette.primary.dark,
zIndex: (theme) => theme.zIndex.drawer + 1
}}>
<Toolbar> <Toolbar>
<IconButton <IconButton
size="large" size="large"

2
packages/web/src/components/ListItemLink/index.tsx
View File

@@ -28,7 +28,7 @@ export default function ListItemLink(props: ListItemLinkProps) {
<li> <li>
<ListItem button component={CustomLink}> <ListItem button component={CustomLink}>
<ListItemIcon>{icon}</ListItemIcon> <ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={primary} /> <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body2' }} />
</ListItem> </ListItem>
</li> </li>
); );

2
packages/web/src/components/PageTitle/index.tsx
View File

@@ -8,7 +8,7 @@ export default function PageTitle(props: PageTitleProps) {
const { children } = props; const { children } = props;
return ( return (
<Typography variant="h4"> <Typography variant="h3">
{children} {children}
</Typography> </Typography>
); );

1
packages/web/src/components/SearchInput/style.ts
View File

@@ -30,6 +30,7 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
export const InputBase = styled(MuiInput)(({ theme }) => ({ export const InputBase = styled(MuiInput)(({ theme }) => ({
color: 'inherit', color: 'inherit',
width: '100%', width: '100%',
fontWeight: 400,
maxWidth: '100%', maxWidth: '100%',
'& .MuiInput-input': { '& .MuiInput-input': {
padding: theme.spacing(1, 1, 1, 0), padding: theme.spacing(1, 1, 1, 0),

129
packages/web/src/styles/theme.ts
View File

@@ -1,7 +1,132 @@
import { createTheme } from '@mui/material/styles'; 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: { components: {
MuiButton: {
styleOverrides: {
root: {
padding: '12px 16px'
}
}
},
MuiCssBaseline: { MuiCssBaseline: {
styleOverrides: { styleOverrides: {
a: { a: {
@@ -12,4 +137,4 @@ const theme = createTheme({
} }
}); });
export default theme; export default extendedTheme;