From 4b39b512a63134c9882b356e9f641f967e870482 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 21:46:24 +0300
Subject: Improve theme and use makeStyles hook

---
 src/index.js | 56 +++++++++++++++++++++++++++-----------------------------
 src/theme.js | 44 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 40 deletions(-)

(limited to 'src')

diff --git a/src/index.js b/src/index.js
index 3f9c97e..bacf937 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,50 +3,48 @@ import ReactDOM from 'react-dom';
 
 import {
   Typography,
-  Paper,
-  Container,
+  Box,
 } from "@material-ui/core";
-import styled from 'styled-components';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
 import theme from "./theme";
 import Header from './components/Header/Header';
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}));
+
+
 const App = () => {
 
   const [page, setPage] = useState('app');
 
+  const classes = useStyles();
   return (
-    <Root>
+    <ThemeProvider theme={theme}>
       <CssBaseline/>
-      <ThemeProvider theme={theme}>
-        <Header setPage={setPage} />
-        <Container maxWidth="xl">
-          <Paper elevation={4} >
-            <Typography variant="h4"> This is the {page} page! </Typography>
-            {
-              (page === 'scoreboard')?
-                (<Scoreboard/>)
-                :
-                (
-                  <p>
-                    This text is rendered outside of <code>Header</code> component, but
-                    interacting with <code>Header</code> can influence content of this page!
-                  </p>
-                )
-            }
-          </Paper>
-        </Container>
-      </ThemeProvider>
-    </Root>
+      <Header setPage={setPage}/>
+      <Box className={classes.root}>
+        <Typography variant="h4"> This is the {page} page! </Typography>
+        {
+          (page === 'scoreboard')?
+          (<Scoreboard/>)
+          :
+          (
+            <p>
+              This text is rendered outside of <code>Header</code> component, but
+              interacting with <code>Header</code> can influence content of this page!
+            </p>
+          )
+        }
+      </Box>
+    </ThemeProvider>
   );
 };
 
-const Root = styled.div`
-`;
-
-
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/theme.js b/src/theme.js
index 54b289d..350fc49 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,18 +1,40 @@
-import React from 'react';
 import { createMuiTheme } from '@material-ui/core/styles'
+import createPalette from "@material-ui/core/styles/createPalette";
 
+const colorScheme = {
+  dark: '#232020',
+  grey: '#3a3535',
+  white: '#f4f4f4',
+  orange: '#ff7315',
+};
 
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      light: '#3a3535',
-      main: '#232020',
-    },
-    secondary: {
-      main: '#f4f4f4',
-      dark: '#ff7315',
-    },
+const palette = createPalette({
+  primary: {
+    main: colorScheme.dark,
+  },
+  secondary: {
+    main: colorScheme.grey,
+  },
+  white: {
+    main: colorScheme.white,
   },
+  orange: {
+    main: colorScheme.orange,
+  },
+});
+
+palette.background = {
+  default: palette.secondary.main,
+  paper: palette.secondary.dark,
+};
+
+palette.text = {
+  primary: palette.white.main,
+  secondary: palette.orange.main,
+};
+
+const theme = createMuiTheme({
+  palette
 });
 
 export default theme;
-- 
cgit v1.2.3