Revert "feat: update leaderboard UI with top 3 highlights and trophy icons"

src/common/playleaderboard/TopPlayCreators.jsx

@@ -4,39 +4,23 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import './leaderBoard.css';
 
 const TopPlayCreators = ({ topPlayCreators }) => {
-  const getRankIcon = (rank) => {
-    if (rank === 1) {
-      return <EmojiEventsIcon className="gold-trophy" fontSize="small" />;
-    }
-
-    if (rank === 2) {
-      return <EmojiEventsIcon className="silver-trophy" fontSize="small" />;
-    }
-
-    if (rank === 3) {
-      return <EmojiEventsIcon className="bronze-trophy" fontSize="small" />;
-    }
-
-    return null;
+  const profilePicture = (name, avatarUrl) => {
+    return (
+      <div className="flex flex-row items-center gap-4">
+        <img
+          alt={name}
+          className="rounded-full border-solid h-8 w-8"
+          src={avatarUrl}
+          title={name}
+        />
+        <div className="leaderboard-table-cell">{name}</div>
+      </div>
+    );
   };
 
-  const profilePicture = (name, avatarUrl, rank) => (
-    <div className="flex flex-row items-center gap-3">
-      {getRankIcon(rank)}
-      <img
-        alt={name}
-        className="h-8 w-8 rounded-full border-solid rank-avatar"
-        src={avatarUrl}
-        title={name}
-      />
-      <div className="leaderboard-table-cell">{name}</div>
-    </div>
-  );
-
   return (
     <TableContainer className="leaderboard-container">
       <Table aria-label="leader board">
@@ -46,34 +30,24 @@ const TopPlayCreators = ({ topPlayCreators }) => {
               Name
             </TableCell>
             <TableCell align="center" className="leaderboard-table-header">
-              Number of Plays
+              Number of plays
             </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {topPlayCreators.map((creator, index) => {
-            const rank = index + 1;
-
-            return (
-              <TableRow
-                className={`rank-${rank}`}
-                key={creator.displayName}
-                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-              >
-                <TableCell
-                  align="left"
-                  className="leaderboard-table-cell"
-                  component="th"
-                  scope="row"
-                >
-                  {profilePicture(creator.displayName, creator.avatarUrl, rank)}
-                </TableCell>
-                <TableCell align="center" className="leaderboard-table-cell">
-                  {creator.count}
-                </TableCell>
-              </TableRow>
-            );
-          })}
+          {topPlayCreators.map((creator) => (
+            <TableRow
+              key={creator.displayName}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell align="left" className="leaderboard-table-cell" component="th" scope="row">
+                {profilePicture(creator.displayName, creator.avatarUrl)}
+              </TableCell>
+              <TableCell align="center" className="leaderboard-table-cell">
+                {creator.count}
+              </TableCell>
+            </TableRow>
+          ))}
         </TableBody>
       </Table>
     </TableContainer>

src/common/playleaderboard/leaderBoard.css

@@ -5,12 +5,11 @@
   margin-top: 10px;
   margin-bottom: 20px;
   padding: 5px 2rem 1rem 2rem;
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
     0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 
 .leaderboard-table-cell {
@@ -25,8 +24,6 @@
 .leaderboard-heading {
   font-family: var(--ff-accent);
   font-size: 32px !important;
-  text-align: center;
-  margin-bottom: 12px;
 }
 
 .leaderboard-text {
@@ -40,40 +37,3 @@
   justify-content: center;
   height: 100vh;
 }
-
-/* Trophy colors */
-.gold-trophy {
-  color: #ffd700;
-}
-.silver-trophy {
-  color: #c0c0c0;
-}
-.bronze-trophy {
-  color: #cd7f32;
-}
-
-/* Highlight top 3 rows */
-.rank-1 {
-  background: rgba(255, 215, 0, 0.15);
-  font-weight: bold;
-}
-.rank-2 {
-  background: rgba(192, 192, 192, 0.15);
-}
-.rank-3 {
-  background: rgba(205, 127, 50, 0.15);
-}
-
-/* Avatar borders */
-.rank-avatar {
-  border: 2px solid transparent;
-}
-.rank-1 .rank-avatar {
-  border-color: #ffd700;
-}
-.rank-2 .rank-avatar {
-  border-color: #c0c0c0;
-}
-.rank-3 .rank-avatar {
-  border-color: #cd7f32;
-}