diff --git a/src/common/playleaderboard/TopPlayCreators.jsx b/src/common/playleaderboard/TopPlayCreators.jsx index 1d439fd9cf..c2151b1f71 100644 --- a/src/common/playleaderboard/TopPlayCreators.jsx +++ b/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 ; - } - - if (rank === 2) { - return ; - } - - if (rank === 3) { - return ; - } - - return null; + const profilePicture = (name, avatarUrl) => { + return ( +
+ {name} +
{name}
+
+ ); }; - const profilePicture = (name, avatarUrl, rank) => ( -
- {getRankIcon(rank)} - {name} -
{name}
-
- ); - return ( @@ -46,34 +30,24 @@ const TopPlayCreators = ({ topPlayCreators }) => { Name - Number of Plays + Number of plays - {topPlayCreators.map((creator, index) => { - const rank = index + 1; - - return ( - - - {profilePicture(creator.displayName, creator.avatarUrl, rank)} - - - {creator.count} - - - ); - })} + {topPlayCreators.map((creator) => ( + + + {profilePicture(creator.displayName, creator.avatarUrl)} + + + {creator.count} + + + ))}
diff --git a/src/common/playleaderboard/leaderBoard.css b/src/common/playleaderboard/leaderBoard.css index edb2a2df66..0af9bc10e9 100644 --- a/src/common/playleaderboard/leaderBoard.css +++ b/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; -}