#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.

redaktions-app/src/components/CustomAppBar.tsx

@@ -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>
   );
 }
 

redaktions-app/src/components/MUITheme.tsx

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

redaktions-app/src/index.tsx

@@ -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")