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 ++++++++++++++++++++++---------------------
 src/theme.js | 18 ++++++++++++++++++
 2 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 src/theme.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;
 `;
 
 
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..54b289d
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles'
+
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: '#3a3535',
+      main: '#232020',
+    },
+    secondary: {
+      main: '#f4f4f4',
+      dark: '#ff7315',
+    },
+  },
+});
+
+export default theme;
-- 
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 +++++++++++++++++++++++++++-----------------------------
 src/theme.js | 44 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 40 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'));
diff --git a/src/theme.js b/src/theme.js
index 54b289d..350fc49 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,18 +1,40 @@
-import React from 'react';
 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 theme = createMuiTheme({
-  palette: {
-    primary: {
-      light: '#3a3535',
-      main: '#232020',
-    },
-    secondary: {
-      main: '#f4f4f4',
-      dark: '#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;
-- 
cgit v1.2.3


From 73eae8e0b49ebe4d85efdc7e6913d7c03e7d543c Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 22:01:49 +0300
Subject: Style Header component

---
 src/components/Header/Header.js | 43 +++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 21 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;
-- 
cgit v1.2.3


From 15cf186e8b5ef25188df92be18d421a486033ee2 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 02:21:54 +0300
Subject: Apply styles to the Scoreboard

---
 package-lock.json                       |  8 ++++
 package.json                            |  1 +
 src/components/Scoreboard/Scoreboard.js |  9 ++--
 src/components/Scoreboard/Solution.js   | 76 +++++++++++++++++++++++++--------
 4 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 647c38b..08b138a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1269,6 +1269,14 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
+      "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.8.2.tgz",
diff --git a/package.json b/package.json
index 185f490..ae85ac9 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.8.2",
+    "@material-ui/icons": "^4.5.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1ebca90..5545d19 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
+import { Container } from "@material-ui/core";
 
 import { get } from "../../requests";
 import Solution from "./Solution";
@@ -19,10 +20,10 @@ const Scoreboard = () => {
 
 
   return (
-    <div>
-      { solutions.map(solution => <Solution solution={solution}/>) }
-    </div>
+    <Container maxWidth="sm">
+      {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;
-- 
cgit v1.2.3


From 747503569130a6ac93be89ca72acd0e9a4d3a26c Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 22:04:00 +0300
Subject: Uninstall styled-components

---
 package-lock.json               | 109 ----------------------------------------
 package.json                    |   3 +-
 src/components/Header/Header.js |   1 -
 src/components/Timer/Timer.js   |  14 ++----
 4 files changed, 4 insertions(+), 123 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08b138a..df69def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1005,24 +1005,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
       "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
     },
-    "@emotion/is-prop-valid": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz",
-      "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==",
-      "requires": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2463,22 +2445,6 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz",
       "integrity": "sha512-sGhfINU+AuMw9oFAdIn/nD5sem3pn/WgxAfDZ//Q3CnF+5uaho7C7shh2rKLk6sKE/XkfmyibghocwKdVjLIKg=="
     },
-    "babel-plugin-styled-components": {
-      "version": "1.10.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
-      "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.0.0",
-        "@babel/helper-module-imports": "^7.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "lodash": "^4.17.11"
-      }
-    },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3070,11 +3036,6 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
     },
-    "camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4180,11 +4141,6 @@
         "postcss": "^7.0.5"
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4275,23 +4231,6 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
-    "css-to-react-native": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-      "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
-      "requires": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-        }
-      }
-    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7126,11 +7065,6 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
-    "is-what": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.5.0.tgz",
-      "integrity": "sha512-00pwt/Jf7IaRh5m2Dp93Iw8LG2cd3OpDj3NrD1XPNUpAWVxPvBP296p4IiGmIU4Ur0f3f56IoIM+fS2pFYF+tQ=="
-    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -8775,11 +8709,6 @@
         "p-is-promise": "^2.0.0"
       }
     },
-    "memoize-one": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
-    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8813,14 +8742,6 @@
         }
       }
     },
-    "merge-anything": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
-      "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
-      "requires": {
-        "is-what": "^3.3.1"
-      }
-    },
     "merge-deep": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -12849,26 +12770,6 @@
         "schema-utils": "^2.0.1"
       }
     },
-    "styled-components": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
-      "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@emotion/is-prop-valid": "^0.8.1",
-        "@emotion/unitless": "^0.7.0",
-        "babel-plugin-styled-components": ">= 1",
-        "css-to-react-native": "^2.2.2",
-        "memoize-one": "^5.0.0",
-        "merge-anything": "^2.2.4",
-        "prop-types": "^15.5.4",
-        "react-is": "^16.6.0",
-        "stylis": "^3.5.0",
-        "stylis-rule-sheet": "^0.0.10",
-        "supports-color": "^5.5.0"
-      }
-    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12891,16 +12792,6 @@
         }
       }
     },
-    "stylis": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
-    },
-    "stylis-rule-sheet": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index ae85ac9..de99244 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,7 @@
     "axios": "^0.19.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0",
-    "styled-components": "^4.4.1"
+    "react-scripts": "3.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index caa30a0..1c4e77d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -5,7 +5,6 @@ import {
   Tab,
   Typography
 } from "@material-ui/core";
-import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 367cce5..1b7dec4 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
-import styled from 'styled-components';
+import { Typography } from "@material-ui/core";
+
 import {post} from '../../requests';
 
 const Timer = () => {
@@ -56,19 +57,10 @@ const Timer = () => {
 
 
     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;
-`;
 
 export default Timer;
-- 
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/components/Scoreboard/Scoreboard.js | 5 +++--
 src/index.js                            | 1 -
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 5545d19..1235f9a 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Container } from "@material-ui/core";
+import { Container, Typography } from "@material-ui/core";
 
 import { get } from "../../requests";
 import Solution from "./Solution";
@@ -21,6 +21,7 @@ const Scoreboard = () => {
 
   return (
     <Container maxWidth="sm">
+      <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
       {solutions.map(solution => (<Solution solution={solution}/>))}
     </Container>
   );
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