diff options
| -rw-r--r-- | package-lock.json | 8 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/Scoreboard/Scoreboard.js | 9 | ||||
| -rw-r--r-- | 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; |