Update leaderboard styling

LinuzJ · Nov 11, 2023 · f8a9bb7 · f8a9bb7
1 parent d783187
commit f8a9bb7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 42 deletions.
diff --git a/dance-app/src/Leaderboard.css b/dance-app/src/Leaderboard.css
@@ -1,37 +1,16 @@
-.leaderboard-list {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 50px 40px;
-  gap: 10px;
+.list {
+  width: 100vw;
   overflow: scroll;
   max-height: 100vh;
 }
 
 .spacer {
+  padding-left: 20px;
   padding-top: 120px;
   width: 80vw;
 }
 
-.card {
-  border: 1px solid white;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  transition: 0.3s;
-  border-radius: 5px;
-}
-
 video {
   border-radius: 5px 5px 0 0;
   max-width: 100%;
 }
-
-.card:hover {
-  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-}
-
-
-.text-container {
-  border-top: 1px solid white;
-  padding: 2px 16px;
-}
diff --git a/dance-app/src/components/Leaderboard.tsx b/dance-app/src/components/Leaderboard.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Loader from "./Loader";
 import PocketBase from "pocketbase";
 import "../Leaderboard.css";
+import {Card, CardContent, CardMedia, Stack, Typography} from "@mui/material";
 
 interface VideoData {
   id: string;
@@ -49,25 +50,34 @@ function Leaderboard({ pb }: LeaderboardProps) {
     .sort((a, b) => b.score - a.score);
 
   return (
-    <div className="leaderboard-list">
-      <div className="spacer" />
-      {scoredVideos.map(({ id, collectionId, video, tier, score, expand }) => (
-        <div className="card" key={id}>
-          <video
-            src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
-            preload="metadata"
-            autoPlay
-            muted
-            loop
-          />
-          <div className="text-container">
-            <h4>{tier}</h4>
-            <p>
-              {expand?.user?.name}: {score}
-            </p>
-          </div>
+    <div className="list">
+      <Stack spacing={2} overflow="scroll">
+        <div className="spacer">
+          <Typography variant="h2" color="primary">
+            Todays high scores
+          </Typography>
         </div>
-      ))}
+        {scoredVideos.map(({ id, collectionId, video, tier, score, expand }) => (
+          <Card key={id} padding-top="10" >
+            <CardMedia
+              component="video"
+              src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
+              width={120}
+              autoPlay
+              muted
+              loop
+             />
+            <CardContent>
+              <Typography gutterBottom variant="h4">Tier {tier}</Typography>
+              <Typography variant="body2">
+                {expand?.user?.name}
+                {': '}
+                <b>{score}</b>
+              </Typography>
+            </CardContent>
+          </Card>
+        ))}
+      </Stack>
     </div>
   );
 }