#20 Use Grüne theme for everything not just CustomAppBar.tsx
Moved theme into index.tsx to apply color scheme to all components in the app.
This commit is contained in:
parent
4a2ba8406d
commit
fbc9376575
|
@ -6,13 +6,12 @@ import {
|
|||
Toolbar,
|
||||
Typography,
|
||||
} 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 { mainMenuOpen, mainMenuWidth } from "./MainMenu";
|
||||
import MenuIcon from "@material-ui/icons/Menu";
|
||||
import { useReactiveVar } from "@apollo/client";
|
||||
import clsx from "clsx";
|
||||
import theme from "./MUITheme";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
|
@ -47,30 +46,28 @@ function CustomAppBar(): React.ReactElement {
|
|||
const open = useReactiveVar(mainMenuOpen);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: open,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
className={clsx(classes.menuButton, open && classes.hide)}
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={() => mainMenuOpen(true)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" className={classes.title}>
|
||||
Candymat
|
||||
</Typography>
|
||||
<ProfileMenu />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</ThemeProvider>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
className={clsx(classes.appBar, {
|
||||
[classes.appBarShift]: open,
|
||||
})}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
className={clsx(classes.menuButton, open && classes.hide)}
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={() => mainMenuOpen(true)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" className={classes.title}>
|
||||
Candymat
|
||||
</Typography>
|
||||
<ProfileMenu />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
import { createMuiTheme } from "@material-ui/core/styles";
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: "#59ae2e",
|
||||
},
|
||||
secondary: {
|
||||
main: "#e6007e",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
|
@ -7,13 +7,27 @@ import { ApolloProvider } from "@apollo/client";
|
|||
import { client } from "./backend/helper";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
import { SnackbarProvider } from "notistack";
|
||||
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: "#59ae2e",
|
||||
},
|
||||
secondary: {
|
||||
main: "#e6007e",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<ApolloProvider client={client}>
|
||||
<Router>
|
||||
<SnackbarProvider maxSnack={3}>
|
||||
<App />
|
||||
</SnackbarProvider>
|
||||
<ThemeProvider theme={theme}>
|
||||
<SnackbarProvider maxSnack={3}>
|
||||
<App />
|
||||
</SnackbarProvider>
|
||||
</ThemeProvider>
|
||||
</Router>
|
||||
</ApolloProvider>,
|
||||
document.getElementById("root")
|
||||
|
|
Loading…
Reference in a new issue