From cc047c9222be0b3d24b43f86f02d30b4bb0a58f2 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sun, 5 Jan 2020 02:18:17 +0300
Subject: Use Grid in Scoreboard

---
 src/components/Scoreboard/Scoreboard.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

(limited to 'src/components/Scoreboard')

diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 399a017..48d3c8a 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,12 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
-import { Container, Typography } from "@material-ui/core";
+import {
+  Container,
+  Typography,
+  Grid,
+} from "@material-ui/core";
 
 import { get } from "../../requests";
 import SolutionCard from "../SolutionCard/SolutionCard";
+import { makeStyles } from "@material-ui/core/styles";
 
 
+const useStyles = makeStyles(theme => ({
+  pageHeader: {
+    textAlign: 'center',
+    margin: theme.spacing(2),
+  }
+}));
+
 const Scoreboard = () => {
+  const classes = useStyles();
   const [solutions, setSolutions] = useState([]);
 
   const updateSolutions = async () => {
@@ -18,11 +31,18 @@ const Scoreboard = () => {
     updateSolutions();
   }, []);
 
-
   return (
-    <Container maxWidth="sm">
-      <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
-      {solutions.map(solution => (<SolutionCard solution={solution}/>))}
+    <Container maxWidth="xs">
+      <Typography variant="h3" className={classes.pageHeader}>
+        Scoreboard
+      </Typography>
+      <Grid container justify="center" direction="column" spacing={3}>
+        {solutions.map(solution => (
+          <Grid item>
+            <SolutionCard solution={solution}/>
+          </Grid>
+        ))}
+      </Grid>
     </Container>
   );
 };
-- 
cgit v1.2.3