use theme hook

electron-react/src/App.js

@@ -16,16 +16,18 @@ import {
 import { CircularProgress } from "@material-ui/core";
 import { ModalDialog, Spinner } from "./pages/ModalDialog";
 import { RestoreBackup } from "./pages/backup/restoreBackup";
+import { useTheme } from '@material-ui/core/styles';
 
 import theme from "./muiTheme";
 
 const LoadingScreen = props => {
-  const classes = theme;
+  const theme = useTheme();
+  debugger
   return (
-    <div className={classes.div}>
-      <div className={classes.center}>
-        <h3 className={classes.h3}>{props.children}</h3>
-        <CircularProgress className={classes.h3} />
+    <div style={theme.div}>
+      <div style={theme.center}>
+        <h3 style={theme.h3}>{props.children}</h3>
+        <CircularProgress style={theme.h3} />
       </div>
     </div>
   );

electron-react/src/muiTheme.js

@@ -62,6 +62,25 @@ const theme = createMuiTheme({
     marginLeft: defaultTheme.spacing(4),
     fontSize: 35,
   },
+  div: {
+    height: "100%",
+    background: "linear-gradient(45deg, #222222 30%, #333333 90%)",
+    fontFamily: "Open Sans, sans-serif"
+  },
+  center: {
+    textAlign: "center",
+    height: "200px",
+    width: "300px",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: "auto"
+  },
+  h3: {
+    color: "white"
+  }
 });
 
 export default theme;