NB-Public/kandimat
13
0
Fork 0
Code Issues 15 Pull requests Projects Releases 1 Wiki Activity

#20 Use Grüne theme for everything not just CustomAppBar.tsx

Browse source 
Moved theme into index.tsx to apply color scheme to all components
in the app.
This commit is contained in:
Christoph Lienhard 2021-05-28 23:58:13 +02:00
parent 4a2ba8406d
commit fbc9376575
Signed by: christoph.lienhard
GPG key ID: 6B98870DDC270884
3 changed files with 40 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
redaktions-app/src/components/CustomAppBar.tsx
View file

@ -6,13 +6,12 @@ import {
Toolbar, Toolbar,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { makeStyles, Theme, ThemeProvider } from "@material-ui/core/styles"; import { makeStyles, Theme } from "@material-ui/core/styles";
import { ProfileMenu } from "./ProfileMenu"; import { ProfileMenu } from "./ProfileMenu";
import { mainMenuOpen, mainMenuWidth } from "./MainMenu"; import { mainMenuOpen, mainMenuWidth } from "./MainMenu";
import MenuIcon from "@material-ui/icons/Menu"; import MenuIcon from "@material-ui/icons/Menu";
import { useReactiveVar } from "@apollo/client"; import { useReactiveVar } from "@apollo/client";
import clsx from "clsx"; import clsx from "clsx";
import theme from "./MUITheme";
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
@ -47,30 +46,28 @@ function CustomAppBar(): React.ReactElement {
const open = useReactiveVar(mainMenuOpen); const open = useReactiveVar(mainMenuOpen);
return ( return (
<ThemeProvider theme={theme}> <AppBar
<AppBar position="fixed"
position="fixed" className={clsx(classes.appBar, {
className={clsx(classes.appBar, { [classes.appBarShift]: open,
[classes.appBarShift]: open, })}
})} >
> <Toolbar>
<Toolbar> <IconButton
<IconButton edge="start"
edge="start" className={clsx(classes.menuButton, open && classes.hide)}
className={clsx(classes.menuButton, open && classes.hide)} color="inherit"
color="inherit" aria-label="menu"
aria-label="menu" onClick={() => mainMenuOpen(true)}
onClick={() => mainMenuOpen(true)} >
> <MenuIcon />
<MenuIcon /> </IconButton>
</IconButton> <Typography variant="h6" className={classes.title}>
<Typography variant="h6" className={classes.title}> Candymat
Candymat </Typography>
</Typography> <ProfileMenu />
<ProfileMenu /> </Toolbar>
</Toolbar> </AppBar>
</AppBar>
</ThemeProvider>
); );
} }

14
redaktions-app/src/components/MUITheme.tsx
View file

@ -1,14 +0,0 @@
import { createMuiTheme } from "@material-ui/core/styles";
const theme = createMuiTheme({
palette: {
primary: {
main: "#59ae2e",
},
secondary: {
main: "#e6007e",
},
},
});
export default theme;

20
redaktions-app/src/index.tsx
View file

@ -7,13 +7,27 @@ import { ApolloProvider } from "@apollo/client";
import { client } from "./backend/helper"; import { client } from "./backend/helper";
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import { SnackbarProvider } from "notistack"; import { SnackbarProvider } from "notistack";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
palette: {
primary: {
main: "#59ae2e",
},
secondary: {
main: "#e6007e",
},
},
});
ReactDOM.render( ReactDOM.render(
<ApolloProvider client={client}> <ApolloProvider client={client}>
<Router> <Router>
<SnackbarProvider maxSnack={3}> <ThemeProvider theme={theme}>
<App /> <SnackbarProvider maxSnack={3}>
</SnackbarProvider> <App />
</SnackbarProvider>
</ThemeProvider>
</Router> </Router>
</ApolloProvider>, </ApolloProvider>,
document.getElementById("root") document.getElementById("root")