Create initial theme

1 files changed, 22 insertions, 21 deletions

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;
 `;