Skip to content

Commit 8be27be

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve leaderboard page
1 parent 32f20cd commit 8be27be

2 files changed

Lines changed: 52 additions & 50 deletions

File tree

‎src/components/Leaderboard/LeaderboardColumn.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const LeaderboardColumn: React.FC<Props> = ({
3333
ranking,
3434
}: Props) => {
3535
return (
36-
<div className="from-white/8 to-white/4 group relative flex flex-col rounded-md border border-white/10 bg-gradient-to-br backdrop-blur-md">
36+
<div className="from-white/8 to-white/4 relative flex flex-col rounded-md border border-white/10 bg-gradient-to-br backdrop-blur-md">
3737
<div className="flex h-12 flex-row items-center justify-start gap-2 border-b border-white/10 bg-white/5 px-3">
3838
<span className="material-symbols-outlined material-symbols-filled text-2xl text-white/70">
3939
{getIconForType(id)}

‎src/components/Leaderboard/LeaderboardEntry.tsx‎

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -133,60 +133,62 @@ export const LeaderboardEntry = ({
133133
}, [hover, setActivePopup, entryKey, fetchStats])
134134

135135
return (
136-
<div
137-
className={`group relative flex w-full items-center justify-between px-3 py-1 text-sm transition-colors duration-200 hover:bg-white/[3%] ${
138-
isCurrentUser ? 'bg-yellow-500/10 hover:bg-yellow-500/15' : ''
139-
}`}
140-
onMouseEnter={() => setHover(true)}
141-
onMouseLeave={() => setHover(false)}
136+
<Link
137+
href={`/profile/${display_name}`}
138+
className="flex items-center gap-1.5 text-white/90 transition-colors duration-200 hover:text-white"
142139
>
143-
<div className="flex items-center gap-1.5">
144-
<p className="w-4 text-xs text-white/60">{index + 1}</p>
145-
<Link
146-
href={`/profile/${display_name}`}
147-
className="flex items-center gap-1.5 text-white/90 transition-colors duration-200 hover:text-white hover:underline"
148-
>
149-
<p>
140+
<div
141+
className={`group relative flex w-full items-center justify-between px-3 py-1 text-sm transition-colors duration-200 hover:bg-white/[3%] ${
142+
isCurrentUser ? 'bg-yellow-400/5 hover:bg-yellow-400/10' : ''
143+
}`}
144+
onMouseEnter={() => setHover(true)}
145+
onMouseLeave={() => setHover(false)}
146+
>
147+
<div className="flex items-center gap-1.5">
148+
<p className="w-4 text-xs text-white/60">{index + 1}</p>
149+
<p className="group-hover:underline">
150150
{display_name} {index == 0 && '👑'}
151151
</p>
152-
</Link>
153-
</div>
154-
<p className="text-sm font-medium text-white/95">{elo}</p>
155-
{isPopupVisible && stats && (
156-
<div className="absolute left-0 top-[100%] z-50 flex w-full max-w-[24rem] flex-col overflow-hidden rounded border border-white/20 bg-[#171214]">
157-
<div className="flex w-full justify-between border-b border-white/10 bg-[#171214] px-3 py-2">
158-
<p className="text-sm text-white/95">
159-
<span className="font-bold">{display_name}</span>&apos;s {type}{' '}
160-
Statistics
161-
</p>
162-
<Link href={`/profile/${display_name}`}>
163-
<i className="material-symbols-outlined select-none text-base text-white/70 transition-colors hover:text-white">
164-
open_in_new
165-
</i>
166-
</Link>
167-
</div>
168-
<div className="flex items-center justify-between px-3 py-3">
169-
<div className="flex flex-col items-center justify-center gap-0.5">
170-
<p className="text-xs text-white/70">Rating</p>
171-
<b className="text-xl text-white/95">{stats[ratingKey]}</b>
172-
</div>
173-
<div className="flex flex-col items-center justify-center gap-0.5">
174-
<p className="text-xs text-white/70">Highest</p>
175-
<b className="text-xl text-white/95">{stats[highestRatingKey]}</b>
176-
</div>
177-
<div className="flex flex-col items-center justify-center gap-0.5">
178-
<p className="text-xs text-white/70">Games</p>
179-
<b className="text-xl text-white/95">{stats[gamesKey]}</b>
152+
</div>
153+
<p className="text-sm font-medium text-white/95">{elo}</p>
154+
{isPopupVisible && stats && (
155+
<div className="absolute left-0 top-[100%] z-50 flex w-full max-w-[24rem] flex-col overflow-hidden rounded border border-white/20 bg-[#171214]">
156+
<div className="flex w-full justify-between border-b border-white/10 bg-[#171214] px-3 py-2">
157+
<p className="text-sm text-white/95">
158+
<span className="font-bold">{display_name}</span>&apos;s {type}{' '}
159+
Statistics
160+
</p>
161+
<Link href={`/profile/${display_name}`}>
162+
<i className="material-symbols-outlined select-none text-base text-white/70 transition-colors hover:text-white">
163+
open_in_new
164+
</i>
165+
</Link>
180166
</div>
181-
<div className="flex flex-col items-center justify-center gap-0.5">
182-
<p className="text-xs text-white/70">Win %</p>
183-
<b className="text-xl text-white/95">
184-
{((stats[gamesWonKey] / stats[gamesKey]) * 100).toFixed(0)}%
185-
</b>
167+
<div className="flex items-center justify-between px-3 py-3">
168+
<div className="flex flex-col items-center justify-center gap-0.5">
169+
<p className="text-xs text-white/70">Rating</p>
170+
<b className="text-xl text-white/95">{stats[ratingKey]}</b>
171+
</div>
172+
<div className="flex flex-col items-center justify-center gap-0.5">
173+
<p className="text-xs text-white/70">Highest</p>
174+
<b className="text-xl text-white/95">
175+
{stats[highestRatingKey]}
176+
</b>
177+
</div>
178+
<div className="flex flex-col items-center justify-center gap-0.5">
179+
<p className="text-xs text-white/70">Games</p>
180+
<b className="text-xl text-white/95">{stats[gamesKey]}</b>
181+
</div>
182+
<div className="flex flex-col items-center justify-center gap-0.5">
183+
<p className="text-xs text-white/70">Win %</p>
184+
<b className="text-xl text-white/95">
185+
{((stats[gamesWonKey] / stats[gamesKey]) * 100).toFixed(0)}%
186+
</b>
187+
</div>
186188
</div>
187189
</div>
188-
</div>
189-
)}
190-
</div>
190+
)}
191+
</div>
192+
</Link>
191193
)
192194
}

0 commit comments

Comments
 (0)