From fbc937657512b6d42e36cc24686a1d861bba106f Mon Sep 17 00:00:00 2001
From: Christoph Lienhard <christoph-lienhard@gmx.de>
Date: Fri, 28 May 2021 23:58:13 +0200
Subject: [PATCH] =?UTF-8?q?#20=20Use=20Gr=C3=BCne=20theme=20for=20everythi?=
 =?UTF-8?q?ng=20not=20just=20CustomAppBar.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moved theme into index.tsx to apply color scheme to all components
in the app.
---
 .../src/components/CustomAppBar.tsx           | 49 +++++++++----------
 redaktions-app/src/components/MUITheme.tsx    | 14 ------
 redaktions-app/src/index.tsx                  | 20 ++++++--
 3 files changed, 40 insertions(+), 43 deletions(-)
 delete mode 100644 redaktions-app/src/components/MUITheme.tsx

diff --git a/redaktions-app/src/components/CustomAppBar.tsx b/redaktions-app/src/components/CustomAppBar.tsx
index 82cc1b8..ae9ca7b 100644
--- a/redaktions-app/src/components/CustomAppBar.tsx
+++ b/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>
   );
 }
 
diff --git a/redaktions-app/src/components/MUITheme.tsx b/redaktions-app/src/components/MUITheme.tsx
deleted file mode 100644
index 3dd31d9..0000000
--- a/redaktions-app/src/components/MUITheme.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createMuiTheme } from "@material-ui/core/styles";
-
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: "#59ae2e",
-    },
-    secondary: {
-      main: "#e6007e",
-    },
-  },
-});
-
-export default theme;
diff --git a/redaktions-app/src/index.tsx b/redaktions-app/src/index.tsx
index 3ddff26..5bd223f 100644
--- a/redaktions-app/src/index.tsx
+++ b/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")