Improve theme and use makeStyles hook

1 files changed, 27 insertions, 29 deletions

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'));