style: update leaderboard styles and UI

src/common/playleaderboard/LeaderBoard.jsx

@@ -78,7 +78,6 @@ const LeaderBoard = () => {
           <div className="flex flex-col m-4 items-center">
             {publishedPlays && top10Contributors && (
               <>
-                <div className="leaderboard-heading">Top play creators of all time</div>
                 <div>
                   <TopPlayCreators topPlayCreators={top10Contributors} />
                 </div>

src/common/playleaderboard/TopPlayCreators.jsx

@@ -1,56 +1,100 @@
+import React from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 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 Paper from '@mui/material/Paper';
+import TagRoundedIcon from '@mui/icons-material/TagRounded';
 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 firstPlace = topPlayCreators.length > 0 ? topPlayCreators[0] : null;
+  const secondPlace = topPlayCreators.length > 1 ? topPlayCreators[1] : null;
+  const thirdPlace = topPlayCreators.length > 2 ? topPlayCreators[2] : null;
+
+  const renderRankIcon = (rank) => {
+    return <TagRoundedIcon className="rank-icon rank-same" />;
   };
 
   return (
-    <TableContainer className="leaderboard-container">
-      <Table aria-label="leader board">
-        <TableHead>
-          <TableRow>
-            <TableCell align="left" className="leaderboard-table-header">
-              Name
-            </TableCell>
-            <TableCell align="center" className="leaderboard-table-header">
-              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}
+    <div className="leaderboard-wrapper">
+      <h2 className="leaderboard-title">Top Play Creators of All Time</h2>
+
+      <div className="podium-container">
+        {secondPlace && (
+          <div className="podium-card podium-second">
+            <img
+              alt={secondPlace.displayName}
+              className="podium-avatar"
+              src={secondPlace.avatarUrl}
+            />
+            <div className="podium-name">{secondPlace.displayName}</div>
+            <div className="podium-rank">2nd</div>
+          </div>
+        )}
+        {firstPlace && (
+          <div className="podium-card podium-first">
+            <img
+              alt={firstPlace.displayName}
+              className="podium-avatar"
+              src={firstPlace.avatarUrl}
+            />
+            <div className="podium-name">{firstPlace.displayName}</div>
+            <div className="podium-rank">1st</div>
+          </div>
+        )}
+        {thirdPlace && (
+          <div className="podium-card podium-third">
+            <img
+              alt={thirdPlace.displayName}
+              className="podium-avatar"
+              src={thirdPlace.avatarUrl}
+            />
+            <div className="podium-name">{thirdPlace.displayName}</div>
+            <div className="podium-rank">3rd</div>
+          </div>
+        )}
+      </div>
+
+      <TableContainer className="leaderboard-table-container" component={Paper}>
+        <Table aria-label="leaderboard table">
+          <TableHead>
+            <TableRow>
+              <TableCell className="leaderboard-table-header">Place</TableCell>
+              <TableCell className="leaderboard-table-header">Creator Name</TableCell>
+              <TableCell align="right" className="leaderboard-table-header">
+                Number of Plays
               </TableCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+          </TableHead>
+          <TableBody>
+            {topPlayCreators.map((creator, index) => (
+              <TableRow key={creator.displayName}>
+                <TableCell className="leaderboard-table-cell rank-cell">
+                  {renderRankIcon(index + 1)}
+                  {index + 1}
+                </TableCell>
+                <TableCell className="leaderboard-table-cell">
+                  <div className="user-profile">
+                    <img
+                      alt={creator.displayName}
+                      className="table-avatar"
+                      src={creator.avatarUrl}
+                    />
+                    {creator.displayName}
+                  </div>
+                </TableCell>
+                <TableCell align="right" className="leaderboard-table-cell points-cell">
+                  {creator.count} Plays
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
   );
 };
 

src/common/playleaderboard/leaderBoard.css

@@ -1,39 +1,194 @@
-.leaderboard-container {
-  border: 0 solid black;
-  border-radius: 5px;
-  background-color: white;
-  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-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);
-}
+/* .leaderboard-container {
+    border: 0 solid black;
+    border-radius: 5px;
+    background-color: white;
+    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-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);
+  }
+
+  .leaderboard-table-cell {
+    padding: 6px !important;
+  }
+
+  .leaderboard-table-header {
+    font-weight: 700 !important;
+    font-family: var(--ff-accent) !important;
+  }
+
+  .leaderboard-heading {
+    font-family: var(--ff-accent);
+    font-size: 32px !important;
+  }
+
+  .leaderboard-text {
+    font-family: var(--ff-accent) !important;
+    font-size: var(--fs-md) !important;
+  }
+
+  .leaderboard-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  } */
+
+.leaderboard-wrapper {
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    font-family: 'Inter', sans-serif;
+    max-width: 800px;
+    margin: 20px auto;
+  }
+
+  .leaderboard-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1a202c;
+    margin-bottom: 24px;
+  }
+
+  .podium-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .podium-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    border-radius: 12px;
+    width: 120px;
+    color: #4a5568;
+    border: 1px solid #e2e8f0;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .podium-card:hover {
+      transform: translateY(-5px);
+  }
+
+  .podium-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 8px;
+  }
+
+  .podium-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #2d3748;
+  }
+
+  .podium-rank {
+      font-size: 12px;
+      font-weight: 500;
+      margin-bottom: 4px;
+  }
+
+  .podium-points {
+    font-weight: 700;
+    font-size: 14px;
+    color: #1a202c;
+  }
+
+  .podium-second {
+    background-color: #f7fafc;
+    height: 170px;
+    order: 1;
+  }
+
+  .podium-first {
+    background-color: #fffbef; 
+    height: 200px;
+    border-color: #f6e05e; 
+    order: 2;
+  }
+
+  .podium-third {
+    background-color: #fdf5f2;
+    height: 150px;
+    order: 3;
+  }
+
+  .winner-announcement {
+    text-align: center;
+    color: #4a5568;
+    font-size: 14px;
+    margin-bottom: 32px;
+    line-height: 1.5;
+  }
+
 
-.leaderboard-table-cell {
-  padding: 6px !important;
-}
-
-.leaderboard-table-header {
-  font-weight: 700 !important;
-  font-family: var(--ff-accent) !important;
-}
-
-.leaderboard-heading {
-  font-family: var(--ff-accent);
-  font-size: 32px !important;
-}
-
-.leaderboard-text {
-  font-family: var(--ff-accent) !important;
-  font-size: var(--fs-md) !important;
-}
-
-.leaderboard-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
+  .leaderboard-table-container {
+    box-shadow: none !important;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px !important;
+  }
+
+  .leaderboard-table-header {
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: #718096 !important;
+    text-transform: uppercase;
+    background-color: #f7fafc !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+  }
+
+  .leaderboard-table-cell {
+    font-size: 14px !important;
+    color: #2d3748 !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+  }
+
+  .user-profile {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 500;
+  }
+
+  .table-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+
+  .rank-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600 !important;
+  }
+
+  .points-cell {
+    font-weight: 600 !important;
+  }
+
+  .rank-icon {
+    font-size: 16px !important;
+  }
+  .rank-up {
+    color: #38a169; 
+  }
+  .rank-down {
+    color: #e53e3e; 
+  }
+  .rank-same {
+    color: #a0aec0; 
+  }