Apply styles to the Scoreboard

2 files changed, 63 insertions, 22 deletions

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;