From 1a0831212070ba42649a5bd1e2527925cfd1cbbc Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 18:21:27 +0300
Subject: Create initial theme

---
 src/index.js | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

(limited to 'src/index.js')

diff --git a/src/index.js b/src/index.js
index 38a79a6..3f9c97e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,11 @@ import {
   Paper,
   Container,
 } from "@material-ui/core";
-
 import styled from 'styled-components';
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
 
+import theme from "./theme";
 import Header from './components/Header/Header';
 import Scoreboard from "./components/Scoreboard/Scoreboard";
 
@@ -21,30 +22,30 @@ const App = () => {
   return (
     <Root>
       <CssBaseline/>
-      <Header setPage={setPage} />
-      <Container maxWidth="xl">
-        <Paper elevation={4} style={{backgroundColor: "bisque"}}>
-          <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 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>
   );
 };
 
 const Root = styled.div`
-  background: cornsilk;
-  padding-bottom: 25px;
 `;
 
 
-- 
cgit v1.2.3


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 +++++++++++++++++++++++++++-----------------------------
 1 file changed, 27 insertions(+), 29 deletions(-)

(limited to 'src/index.js')

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'));
-- 
cgit v1.2.3


From a7b17c6f460031c8caf0b3f6173b817b4a6cc8fa Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 22:48:18 +0300
Subject: Remove page name from blank pages.

---
 src/index.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/index.js')

diff --git a/src/index.js b/src/index.js
index a397310..e88b342 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,7 +48,6 @@ const App = () => {
       <CssBaseline/>
       <Header setPage={setPage}/>
       <Box className={classes.root}>
-        <Typography variant="h4"> This is the {page} page! </Typography>
         { getPageComponent(page) }
       </Box>
     </ThemeProvider>
-- 
cgit v1.2.3