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

---
 src/components/Scoreboard/Scoreboard.js |  9 ++--
 src/components/Scoreboard/Solution.js   | 76 +++++++++++++++++++++++++--------
 2 files changed, 63 insertions(+), 22 deletions(-)

(limited to 'src/components/Scoreboard')

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 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 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/Scoreboard')

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>
   );
-- 
cgit v1.2.3