3 files changed, 83 insertions, 41 deletions

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9bfe5c4..caa30a0 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -6,37 +6,38 @@ import {
   Typography
 } from "@material-ui/core";
 import styled from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    backgroundColor: theme.palette.primary.dark,
+  },
+  logo: {
+    color: theme.palette.orange.main,
+    margin: theme.spacing(2, 3, 2, 2)
+  },
+}));
+
 
 const Header = ({ setPage }) => {
+  const classes = useStyles();
 
   const handleChange = (event, newPage) => {
     setPage(newPage);
   };
 
+  const menuItems = ['app', 'profile', 'scoreboard', 'news'];
+
   return (
-  <AppBar position="static">
-    <TabsWrapper onChange={handleChange}>
-      <Typography variant="h4" id="logo"> ChronoCube </Typography>
-      <Tab label="App" value="app"/>
-      <Tab label="Profile" value="profile"/>
-      <Tab label="Scoreboard" value="scoreboard"/>
-      <Tab label="News" value="news"/>
-    </TabsWrapper>
+  <AppBar position="sticky" className={classes.header}>
+    <Tabs onChange={handleChange}>
+      <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
+      { menuItems.map(menuItem => (
+        <Tab label={menuItem} value={menuItem}/>
+      ))}
+    </Tabs>
   </AppBar>
   );
 };
 
-const TabsWrapper = styled(Tabs)`
-  border-bottom: 1px solid black;
-  & .MuiTab-wrapper {
-    padding: 10px;
-  }
-  & .MuiTypography-root {
-    font-weight: bold;
-    padding: 10px;
-    margin-right: 50px;
-    margin-left: 30px;
-  }
-`;
-
 export default Header;
diff --git a/src/index.js b/src/index.js
index 725d270..a397310 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,22 +3,30 @@ import ReactDOM from 'react-dom';
 
 import {
   Typography,
-  Paper,
-  Container,
+  Box,
 } from "@material-ui/core";
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 
-import styled from 'styled-components';
-import CssBaseline from '@material-ui/core/CssBaseline'
-
+import theme from "./theme";
 import Header from './components/Header/Header';
 import Timer from './components/Timer/Timer';
 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();
+
   const getPageComponent = page => {
     switch (page) {
       case 'app':
@@ -36,22 +44,15 @@ const App = () => {
   };
 
   return (
-    <Root>
+    <ThemeProvider theme={theme}>
       <CssBaseline/>
-      <Header setPage={setPage} />
-      <Container maxWidth="xl">
-        <Paper elevation={4} style={{backgroundColor: "bisque"}}>
-          <Typography variant="h4"> This is the {page} page! </Typography>
-          { getPageComponent(page) }
-        </Paper>
-      </Container>
-    </Root>
-);
+      <Header setPage={setPage}/>
+      <Box className={classes.root}>
+        <Typography variant="h4"> This is the {page} page! </Typography>
+        { getPageComponent(page) }
+      </Box>
+    </ThemeProvider>
+  );
 };
-const Root = styled.div`
-  background: cornsilk;
-  padding-bottom: 25px;
-`;
-
 
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..350fc49
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,40 @@
+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 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;