1 files changed, 34 insertions, 24 deletions
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index f231f55..5c83735 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,23 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
-import {
-  Container,
-  Typography,
-  Grid,
-} from "@material-ui/core";
-
 import { makeStyles } from "@material-ui/core/styles";
 
 import { get } from "../../requests";
+
+import SmartList from "../SmartList/SmartList";
 import SolutionCard from "../SolutionCard/SolutionCard";
 import Loading from "../Loading/Loading";
+import Window from "../Window/Window";
 
 
 const useStyles = makeStyles(theme => ({
-  pageHeader: {
-    textAlign: 'center',
-    margin: theme.spacing(2),
-  },
+  cell: {
+    display: 'flex',
+    justifyContent: 'center',
+    padding: theme.spacing(4),
+
+    '& .MuiCard-root': {
+      width: '30%',
+    }
+  }
 }));
 
 const Scoreboard = () => {
@@ -38,21 +40,29 @@ const Scoreboard = () => {
     setTimeout(updateSolutions, 300);
   }, []);
 
+  const renderItem = ({ index, style }) => {
+    return (
+      <div style={style} className={classes.cell}>
+        <SolutionCard data={solutions[index]} removeThisCard={removeSolution}/>
+      </div>
+    )
+  };
+
   return (
-    <Container maxWidth="xs">
-      <Typography variant="h3" className={classes.pageHeader}>
-        Scoreboard
-      </Typography>
-      {(solutions.length === 0) && <Loading />}
-      <Grid container justify="center" direction="column" spacing={3}>
-        {solutions.slice(0, 30).map(solution => (
-          <Grid item key={solution.id}>
-            <SolutionCard data={solution} removeThisCard={removeSolution}/>
-          </Grid>
-        ))}
-      </Grid>
-    </Container>
-  );
+    <Window type="mono">
+      { solutions.length === 0 &&
+      <div className={classes.cell}>
+        <Loading/>
+      </div>
+      }
+      <SmartList
+        itemSize={300}
+        itemCount={solutions.length}
+        renderItem={renderItem}
+      />
+    </Window>
+  )
 };
 
+
 export default Scoreboard;