Merge pull request #14 from Eug-VS/theme

Create theme and style existing components

6 files changed, 158 insertions, 84 deletions

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9bfe5c4..1c4e77d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -5,38 +5,38 @@ import {
   Tab,
   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/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1ebca90..1235f9a 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,5 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { Container, Typography } from "@material-ui/core";
 
 import { get } from "../../requests";
 import Solution from "./Solution";
@@ -19,10 +20,11 @@ const Scoreboard = () => {
 
 
   return (
-    <div>
-      { solutions.map(solution => <Solution solution={solution}/>) }
-    </div>
+    <Container maxWidth="sm">
+      <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
+      {solutions.map(solution => (<Solution solution={solution}/>))}
+    </Container>
   );
 };
 
-export default Scoreboard;
\ No newline at end of file
+export default Scoreboard;
diff --git a/src/components/Scoreboard/Solution.js b/src/components/Scoreboard/Solution.js
index 3f46eb5..6f87723 100644
--- a/src/components/Scoreboard/Solution.js
+++ b/src/components/Scoreboard/Solution.js
@@ -1,32 +1,72 @@
 import React from 'react';
 
 import {
-  Card,
-  CardContent,
   Typography,
-  Paper,
+  Card,
+  Container,
+  Box,
+  ExpansionPanelSummary,
+  ExpansionPanel,
+  ExpansionPanelDetails,
 } from "@material-ui/core";
 
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
+import TimerIcon from '@material-ui/icons/Timer';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+
+const useStyles = makeStyles(theme => ({
+  item: {
+    backgroundColor: theme.palette.secondary.dark,
+    margin: theme.spacing(3),
+    width: theme.spacing(60),
+
+    '& .MuiBox-root': {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    '& .MuiTypography-h2': {
+      color: theme.palette.orange.main,
+      margin: theme.spacing(2),
+    },
+  },
+
+}));
 
 const Solution = ({ solution }) => {
+  const classes = useStyles();
 
   const author = solution.author? solution.author : 'anonymous';
   return (
-    <PaperWrapper elevation={2} style={{backgroundColor: "#ddbea3"}}>
-      <Typography variant="h4" style={{fontWeight: "bold"}}>
-        { solution.result }
-      </Typography>
-      <Typography>
-        by {author}
-      </Typography>
-    </PaperWrapper>
+    <Card elevation={4} className={classes.item}>
+      <Container maxWidth="xs">
+        <Box>
+          <TimerIcon/>
+          <Typography variant="h2">
+            { solution.result }
+          </Typography>
+        </Box>
+      </Container>
+
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{color: 'white'}}/>}>
+          <Typography variant="h6">
+            By {author}
+          </Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </Card>
   )
 };
 
-const PaperWrapper = styled(Card)`
-  padding: 10px;
-  margin: 25px;
-`;
-
-export default Solution;
\ No newline at end of file
+export default Solution;
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 62924f0..f840429 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
 
-import styled from 'styled-components';
 import { post } from '../../requests';
 
+import { Typography } from '@material-ui/core';
+
 const Timer = () => {
   const SPACE = 32;
   const maxCountdown = 15000;
-  const [time, setTime] = useState("00:15:00");
+  const [time, setTime] = useState('00:15:00');
   const [isRunning, setIsRunning] = useState(false);
   const [timer, setTimer] = useState(0);
   const [isCountdown, setIsCountdown] = useState(false);
   let startingTime;
 
-
   const handleKeyPress = event => {
     if (event.keyCode === SPACE && !isRunning ) {
       if (!isCountdown) {
@@ -51,33 +51,24 @@ const Timer = () => {
   };
 
   useEffect(() => {
-    window.addEventListener("keyup", handleKeyUp);
-    window.addEventListener("keypress", handleKeyPress);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('keypress', handleKeyPress);
 
     return () => {
-      window.removeEventListener("keyup", handleKeyUp);
-      window.removeEventListener("keypress", handleKeyPress);
-
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('keypress', handleKeyPress);
     };
   });
 
   return (
-    <Root>
-      <span>{time}</ span>
-    </Root>
+    <Typography variant="h2"> {time} </Typography>
   );
 };
 
-const Root = styled.div`
-  background-color: skyblue;
-  padding: 8px;
-  display: inline-block;
-  font-size: 32px;
-  color: pink;
-`;
+
 
 const convertTimeToString = timeDiff => {
-  let resultTime = "";
+  let resultTime = '';
 
   const minute = Math.floor(timeDiff / 60000);
   if (minute < 10) resultTime += '0';
@@ -96,3 +87,4 @@ const convertTimeToString = timeDiff => {
 };
 
 export default Timer;
+
diff --git a/src/index.js b/src/index.js
index 725d270..e88b342 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,14 @@ 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}>
+        { 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;