feat: update leaderboard UI with top 3 highlights and trophy icons (#1617)

Author: arunava2018

src/common/playleaderboard/TopPlayCreators.jsx

@@ -4,23 +4,39 @@ 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 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 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, 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">
@@ -30,24 +46,34 @@ 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) => (
-            <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>
-          ))}
+          {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>
+            );
+          })}
         </TableBody>
       </Table>
     </TableContainer>

src/common/playleaderboard/leaderBoard.css

@@ -5,11 +5,12 @@
   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 {
@@ -24,6 +25,8 @@
 .leaderboard-heading {
   font-family: var(--ff-accent);
   font-size: 32px !important;
+  text-align: center;
+  margin-bottom: 12px;
 }
 
 .leaderboard-text {
@@ -37,3 +40,40 @@
   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;
+}