Skip to content

Commit 936737c

Browse files
aayu5hgitpriyankarpal
aayu5hgit
and
priyankarpal
authored
style: update leaderboard styles and UI (#1619)
* refactor: enhance PlayCard and Like components for improved UI and functionality - Updated Like component to use button type and improved styling. - Refactored PlayCard to include language badges, better avatar handling, and description truncation. - Adjusted CSS for play card hover effects and card header styling. - Added line clamp utility for text truncation in PlayCard description. - Enhanced PlayShare button with consistent sizing. * style: update playlist card width for improved layout * style: update leaderboard styles and UI --------- Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
1 parent d95438d commit 936737c

File tree

3 files changed

+276
-78
lines changed

3 files changed

+276
-78
lines changed

‎src/common/playleaderboard/LeaderBoard.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ const LeaderBoard = () => {
7878
<div className="flex flex-col m-4 items-center">
7979
{publishedPlays && top10Contributors && (
8080
<>
81-
<div className="leaderboard-heading">Top play creators of all time</div>
8281
<div>
8382
<TopPlayCreators topPlayCreators={top10Contributors} />
8483
</div>

‎src/common/playleaderboard/TopPlayCreators.jsx‎

Lines changed: 83 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,100 @@
1+
import React from 'react';
12
import Table from '@mui/material/Table';
23
import TableBody from '@mui/material/TableBody';
34
import TableCell from '@mui/material/TableCell';
45
import TableContainer from '@mui/material/TableContainer';
56
import TableHead from '@mui/material/TableHead';
67
import TableRow from '@mui/material/TableRow';
8+
import Paper from '@mui/material/Paper';
9+
import TagRoundedIcon from '@mui/icons-material/TagRounded';
710
import './leaderBoard.css';
811

912
const TopPlayCreators = ({ topPlayCreators }) => {
10-
const profilePicture = (name, avatarUrl) => {
11-
return (
12-
<div className="flex flex-row items-center gap-4">
13-
<img
14-
alt={name}
15-
className="rounded-full border-solid h-8 w-8"
16-
src={avatarUrl}
17-
title={name}
18-
/>
19-
<div className="leaderboard-table-cell">{name}</div>
20-
</div>
21-
);
13+
const firstPlace = topPlayCreators.length > 0 ? topPlayCreators[0] : null;
14+
const secondPlace = topPlayCreators.length > 1 ? topPlayCreators[1] : null;
15+
const thirdPlace = topPlayCreators.length > 2 ? topPlayCreators[2] : null;
16+
17+
const renderRankIcon = (rank) => {
18+
return <TagRoundedIcon className="rank-icon rank-same" />;
2219
};
2320

2421
return (
25-
<TableContainer className="leaderboard-container">
26-
<Table aria-label="leader board">
27-
<TableHead>
28-
<TableRow>
29-
<TableCell align="left" className="leaderboard-table-header">
30-
Name
31-
</TableCell>
32-
<TableCell align="center" className="leaderboard-table-header">
33-
Number of plays
34-
</TableCell>
35-
</TableRow>
36-
</TableHead>
37-
<TableBody>
38-
{topPlayCreators.map((creator) => (
39-
<TableRow
40-
key={creator.displayName}
41-
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
42-
>
43-
<TableCell align="left" className="leaderboard-table-cell" component="th" scope="row">
44-
{profilePicture(creator.displayName, creator.avatarUrl)}
45-
</TableCell>
46-
<TableCell align="center" className="leaderboard-table-cell">
47-
{creator.count}
22+
<div className="leaderboard-wrapper">
23+
<h2 className="leaderboard-title">Top Play Creators of All Time</h2>
24+
25+
<div className="podium-container">
26+
{secondPlace && (
27+
<div className="podium-card podium-second">
28+
<img
29+
alt={secondPlace.displayName}
30+
className="podium-avatar"
31+
src={secondPlace.avatarUrl}
32+
/>
33+
<div className="podium-name">{secondPlace.displayName}</div>
34+
<div className="podium-rank">2nd</div>
35+
</div>
36+
)}
37+
{firstPlace && (
38+
<div className="podium-card podium-first">
39+
<img
40+
alt={firstPlace.displayName}
41+
className="podium-avatar"
42+
src={firstPlace.avatarUrl}
43+
/>
44+
<div className="podium-name">{firstPlace.displayName}</div>
45+
<div className="podium-rank">1st</div>
46+
</div>
47+
)}
48+
{thirdPlace && (
49+
<div className="podium-card podium-third">
50+
<img
51+
alt={thirdPlace.displayName}
52+
className="podium-avatar"
53+
src={thirdPlace.avatarUrl}
54+
/>
55+
<div className="podium-name">{thirdPlace.displayName}</div>
56+
<div className="podium-rank">3rd</div>
57+
</div>
58+
)}
59+
</div>
60+
61+
<TableContainer className="leaderboard-table-container" component={Paper}>
62+
<Table aria-label="leaderboard table">
63+
<TableHead>
64+
<TableRow>
65+
<TableCell className="leaderboard-table-header">Place</TableCell>
66+
<TableCell className="leaderboard-table-header">Creator Name</TableCell>
67+
<TableCell align="right" className="leaderboard-table-header">
68+
Number of Plays
4869
</TableCell>
4970
</TableRow>
50-
))}
51-
</TableBody>
52-
</Table>
53-
</TableContainer>
71+
</TableHead>
72+
<TableBody>
73+
{topPlayCreators.map((creator, index) => (
74+
<TableRow key={creator.displayName}>
75+
<TableCell className="leaderboard-table-cell rank-cell">
76+
{renderRankIcon(index + 1)}
77+
{index + 1}
78+
</TableCell>
79+
<TableCell className="leaderboard-table-cell">
80+
<div className="user-profile">
81+
<img
82+
alt={creator.displayName}
83+
className="table-avatar"
84+
src={creator.avatarUrl}
85+
/>
86+
{creator.displayName}
87+
</div>
88+
</TableCell>
89+
<TableCell align="right" className="leaderboard-table-cell points-cell">
90+
{creator.count} Plays
91+
</TableCell>
92+
</TableRow>
93+
))}
94+
</TableBody>
95+
</Table>
96+
</TableContainer>
97+
</div>
5498
);
5599
};
56100

‎src/common/playleaderboard/leaderBoard.css‎

Lines changed: 193 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,194 @@
1-
.leaderboard-container {
2-
border: 0 solid black;
3-
border-radius: 5px;
4-
background-color: white;
5-
margin-top: 10px;
6-
margin-bottom: 20px;
7-
padding: 5px 2rem 1rem 2rem;
8-
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
9-
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
10-
0 8px 10px -6px var(--tw-shadow-color);
11-
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
12-
var(--tw-shadow);
13-
}
1+
/* .leaderboard-container {
2+
border: 0 solid black;
3+
border-radius: 5px;
4+
background-color: white;
5+
margin-top: 10px;
6+
margin-bottom: 20px;
7+
padding: 5px 2rem 1rem 2rem;
8+
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
9+
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
10+
0 8px 10px -6px var(--tw-shadow-color);
11+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
12+
var(--tw-shadow);
13+
}
14+
15+
.leaderboard-table-cell {
16+
padding: 6px !important;
17+
}
18+
19+
.leaderboard-table-header {
20+
font-weight: 700 !important;
21+
font-family: var(--ff-accent) !important;
22+
}
23+
24+
.leaderboard-heading {
25+
font-family: var(--ff-accent);
26+
font-size: 32px !important;
27+
}
28+
29+
.leaderboard-text {
30+
font-family: var(--ff-accent) !important;
31+
font-size: var(--fs-md) !important;
32+
}
33+
34+
.leaderboard-loader {
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
height: 100vh;
39+
} */
40+
41+
.leaderboard-wrapper {
42+
background-color: #ffffff;
43+
border-radius: 16px;
44+
padding: 24px;
45+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
46+
font-family: 'Inter', sans-serif;
47+
max-width: 800px;
48+
margin: 20px auto;
49+
}
50+
51+
.leaderboard-title {
52+
font-size: 24px;
53+
font-weight: 600;
54+
color: #1a202c;
55+
margin-bottom: 24px;
56+
}
57+
58+
.podium-container {
59+
display: flex;
60+
justify-content: center;
61+
align-items: flex-end;
62+
gap: 8px;
63+
margin-bottom: 16px;
64+
}
65+
66+
.podium-card {
67+
display: flex;
68+
flex-direction: column;
69+
align-items: center;
70+
text-align: center;
71+
padding: 16px;
72+
border-radius: 12px;
73+
width: 120px;
74+
color: #4a5568;
75+
border: 1px solid #e2e8f0;
76+
transition: transform 0.2s ease-in-out;
77+
}
78+
79+
.podium-card:hover {
80+
transform: translateY(-5px);
81+
}
82+
83+
.podium-avatar {
84+
width: 60px;
85+
height: 60px;
86+
border-radius: 50%;
87+
border: 3px solid #fff;
88+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
89+
margin-bottom: 8px;
90+
}
91+
92+
.podium-name {
93+
font-weight: 600;
94+
font-size: 14px;
95+
color: #2d3748;
96+
}
97+
98+
.podium-rank {
99+
font-size: 12px;
100+
font-weight: 500;
101+
margin-bottom: 4px;
102+
}
103+
104+
.podium-points {
105+
font-weight: 700;
106+
font-size: 14px;
107+
color: #1a202c;
108+
}
109+
110+
.podium-second {
111+
background-color: #f7fafc;
112+
height: 170px;
113+
order: 1;
114+
}
115+
116+
.podium-first {
117+
background-color: #fffbef;
118+
height: 200px;
119+
border-color: #f6e05e;
120+
order: 2;
121+
}
122+
123+
.podium-third {
124+
background-color: #fdf5f2;
125+
height: 150px;
126+
order: 3;
127+
}
128+
129+
.winner-announcement {
130+
text-align: center;
131+
color: #4a5568;
132+
font-size: 14px;
133+
margin-bottom: 32px;
134+
line-height: 1.5;
135+
}
136+
14137

15-
.leaderboard-table-cell {
16-
padding: 6px !important;
17-
}
18-
19-
.leaderboard-table-header {
20-
font-weight: 700 !important;
21-
font-family: var(--ff-accent) !important;
22-
}
23-
24-
.leaderboard-heading {
25-
font-family: var(--ff-accent);
26-
font-size: 32px !important;
27-
}
28-
29-
.leaderboard-text {
30-
font-family: var(--ff-accent) !important;
31-
font-size: var(--fs-md) !important;
32-
}
33-
34-
.leaderboard-loader {
35-
display: flex;
36-
align-items: center;
37-
justify-content: center;
38-
height: 100vh;
39-
}
138+
.leaderboard-table-container {
139+
box-shadow: none !important;
140+
border: 1px solid #e2e8f0;
141+
border-radius: 12px !important;
142+
}
143+
144+
.leaderboard-table-header {
145+
font-weight: 600 !important;
146+
font-size: 12px !important;
147+
color: #718096 !important;
148+
text-transform: uppercase;
149+
background-color: #f7fafc !important;
150+
border-bottom: 1px solid #e2e8f0 !important;
151+
}
152+
153+
.leaderboard-table-cell {
154+
font-size: 14px !important;
155+
color: #2d3748 !important;
156+
border-bottom: 1px solid #e2e8f0 !important;
157+
}
158+
159+
.user-profile {
160+
display: flex;
161+
align-items: center;
162+
gap: 12px;
163+
font-weight: 500;
164+
}
165+
166+
.table-avatar {
167+
width: 32px;
168+
height: 32px;
169+
border-radius: 50%;
170+
}
171+
172+
.rank-cell {
173+
display: flex;
174+
align-items: center;
175+
gap: 8px;
176+
font-weight: 600 !important;
177+
}
178+
179+
.points-cell {
180+
font-weight: 600 !important;
181+
}
182+
183+
.rank-icon {
184+
font-size: 16px !important;
185+
}
186+
.rank-up {
187+
color: #38a169;
188+
}
189+
.rank-down {
190+
color: #e53e3e;
191+
}
192+
.rank-same {
193+
color: #a0aec0;
194+
}

0 commit comments

Comments
 (0)