Skip to content

Commit 66e6c2a

Browse files
kevinjosethomaskevinjosethomas
committed
feat: improved ui of profile page
1 parent 2082a82 commit 66e6c2a

5 files changed

Lines changed: 220 additions & 144 deletions

File tree

‎src/components/Profile/GameList.tsx‎

Lines changed: 80 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -431,13 +431,16 @@ export const GameList = ({
431431
}
432432

433433
return (
434-
<div className="flex w-full flex-col overflow-hidden rounded border border-white border-opacity-10 md:w-[600px]">
435-
<div className="flex flex-row items-center justify-start gap-4 border-b border-white border-opacity-10 bg-background-1 px-2 py-3 md:px-4">
436-
<p className="text-xl font-bold md:text-xl">
434+
<div className="from-white/8 to-white/4 flex w-full flex-col overflow-hidden rounded-lg border border-white/20 bg-gradient-to-br backdrop-blur-md md:w-[600px]">
435+
<div className="flex flex-row items-center justify-start gap-4 border-b border-white/10 bg-white/5 px-2 py-2 md:px-4">
436+
<span className="material-symbols-outlined !text-2xl text-red-500">
437+
sports_esports
438+
</span>
439+
<p className="text-xl font-bold text-white/95 md:text-xl">
437440
{userName ? `${userName}'s Games` : 'Your Games'}
438441
</p>
439442
</div>
440-
<div className="flex select-none items-center border-b-2 border-white border-opacity-10">
443+
<div className="flex select-none items-center border-b border-white/10">
441444
{showCustom && (
442445
<Header
443446
label="★"
@@ -490,33 +493,33 @@ export const GameList = ({
490493

491494
{/* H&B Subsections */}
492495
{selected === 'hb' && (
493-
<div className="flex border-b border-white border-opacity-10">
496+
<div className="flex h-6 items-center overflow-hidden border-b border-white/10">
494497
<button
495498
onClick={() => setHbSubsection('hand')}
496-
className={`flex-1 px-3 text-sm ${
499+
className={`flex-1 px-3 text-sm transition-all duration-200 ${
497500
hbSubsection === 'hand'
498-
? 'bg-background-2 text-primary'
499-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
501+
? 'bg-white/10 text-white/95'
502+
: 'hover:bg-white/8 bg-white/5 text-white/70 hover:text-white/90'
500503
}`}
501504
>
502505
<div className="flex items-center justify-center gap-1">
503-
<span className="material-symbols-outlined !text-lg">
504-
hand_gesture
506+
<span className="material-symbols-outlined material-symbols-filled !text-base">
507+
back_hand
505508
</span>
506509
<span className="text-xs">Hand</span>
507510
</div>
508511
</button>
509512
<button
510513
onClick={() => setHbSubsection('brain')}
511-
className={`flex-1 px-3 text-sm ${
514+
className={`flex-1 px-3 py-1 text-sm transition-all duration-200 ${
512515
hbSubsection === 'brain'
513-
? 'bg-background-2 text-primary'
514-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
516+
? 'bg-white/10 text-white/95'
517+
: 'hover:bg-white/8 bg-white/5 text-white/70 hover:text-white/90'
515518
}`}
516519
>
517520
<div className="flex items-center justify-center gap-1">
518-
<span className="material-symbols-outlined !text-lg">
519-
neurology
521+
<span className="material-symbols-outlined !text-base">
522+
network_intelligence
520523
</span>
521524
<span className="text-xs">Brain</span>
522525
</div>
@@ -527,7 +530,7 @@ export const GameList = ({
527530
<div className="red-scrollbar flex max-h-64 flex-col overflow-y-scroll md:max-h-96">
528531
{loading ? (
529532
<div className="flex h-full items-center justify-center py-8">
530-
<div className="h-8 w-8 animate-spin rounded-full border-b-2 border-white"></div>
533+
<div className="h-8 w-8 animate-spin rounded-full border-b-2 border-white/80"></div>
531534
</div>
532535
) : (
533536
<>
@@ -537,14 +540,14 @@ export const GameList = ({
537540
return (
538541
<div
539542
key={index}
540-
className={`group flex w-full items-center gap-2 ${
543+
className={`group flex w-full items-center gap-2 transition-colors duration-200 ${
541544
index % 2 === 0
542-
? 'bg-background-1/30 hover:bg-background-2'
543-
: 'bg-background-1/10 hover:bg-background-2'
545+
? 'bg-white/2 hover:bg-white/5'
546+
: 'bg-transparent hover:bg-white/5'
544547
}`}
545548
>
546-
<div className="flex h-full w-10 items-center justify-center bg-background-2 py-1 group-hover:bg-white/5">
547-
<p className="text-sm text-secondary">
549+
<div className="flex h-full w-8 items-center justify-center py-1.5">
550+
<p className="text-xs font-medium text-white/50">
548551
{selected === 'play' ||
549552
selected === 'hb' ||
550553
selected === 'favorites'
@@ -554,15 +557,15 @@ export const GameList = ({
554557
</div>
555558
<a
556559
href={`/analysis/${game.id}/${game.type}`}
557-
className="flex flex-1 cursor-pointer items-center justify-between overflow-hidden py-1"
560+
className="flex flex-1 cursor-pointer items-center justify-between overflow-hidden py-1.5"
558561
>
559562
<div className="flex items-center gap-2 overflow-hidden">
560-
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-primary">
563+
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/90">
561564
{displayName}
562565
</p>
563566
{selected === 'favorites' &&
564567
(game.type === 'hand' || game.type === 'brain') && (
565-
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-secondary">
568+
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-white/60">
566569
{game.type === 'hand'
567570
? 'hand_gesture'
568571
: 'neurology'}
@@ -576,7 +579,7 @@ export const GameList = ({
576579
e.stopPropagation()
577580
handleFavoriteGame(game)
578581
}}
579-
className="flex items-center justify-center text-secondary transition hover:text-primary"
582+
className="flex items-center justify-center text-white/60 transition-colors duration-200 hover:text-white/90"
580583
title="Edit favourite"
581584
>
582585
<span className="material-symbols-outlined !text-xs">
@@ -590,10 +593,10 @@ export const GameList = ({
590593
e.stopPropagation()
591594
handleFavoriteGame(game)
592595
}}
593-
className={`flex items-center justify-center transition ${
596+
className={`flex items-center justify-center transition-colors duration-200 ${
594597
isFavorited
595598
? 'text-yellow-400 hover:text-yellow-300'
596-
: 'text-secondary hover:text-primary'
599+
: 'text-white/60 hover:text-white/90'
597600
}`}
598601
title={
599602
isFavorited ? 'Edit favourite' : 'Add to favourites'
@@ -606,7 +609,7 @@ export const GameList = ({
606609
</span>
607610
</button>
608611
)}
609-
<p className="whitespace-nowrap text-sm text-secondary">
612+
<p className="whitespace-nowrap text-sm text-white/70">
610613
{game.result.replace('1/2', '½').replace('1/2', '½')}
611614
</p>
612615
</div>
@@ -619,44 +622,51 @@ export const GameList = ({
619622
</div>
620623

621624
{/* Pagination */}
622-
{(selected === 'play' || selected === 'hb' || selected === 'favorites') &&
623-
totalPages > 1 && (
624-
<div className="flex items-center justify-center gap-2 border-t border-white border-opacity-10 bg-background-1 py-2">
625-
<button
626-
onClick={() => handlePageChange(1)}
627-
disabled={currentPage === 1}
628-
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
629-
>
630-
<span className="material-symbols-outlined">first_page</span>
631-
</button>
632-
<button
633-
onClick={() => handlePageChange(currentPage - 1)}
634-
disabled={currentPage === 1}
635-
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
636-
>
637-
<span className="material-symbols-outlined">arrow_back_ios</span>
638-
</button>
639-
<span className="text-sm text-secondary">
640-
Page {currentPage} of {totalPages}
625+
{(selected === 'play' ||
626+
selected === 'hb' ||
627+
selected === 'favorites') && (
628+
<div className="flex items-center justify-center gap-2 border-t border-white/10 bg-white/5 py-1">
629+
<button
630+
onClick={() => handlePageChange(1)}
631+
disabled={currentPage === 1}
632+
className="flex items-center justify-center text-white/60 transition-colors duration-200 hover:text-white/90 disabled:opacity-50"
633+
>
634+
<span className="material-symbols-outlined !text-lg">
635+
first_page
641636
</span>
642-
<button
643-
onClick={() => handlePageChange(currentPage + 1)}
644-
disabled={currentPage === totalPages}
645-
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
646-
>
647-
<span className="material-symbols-outlined">
648-
arrow_forward_ios
649-
</span>
650-
</button>
651-
<button
652-
onClick={() => handlePageChange(totalPages)}
653-
disabled={currentPage === totalPages}
654-
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
655-
>
656-
<span className="material-symbols-outlined">last_page</span>
657-
</button>
658-
</div>
659-
)}
637+
</button>
638+
<button
639+
onClick={() => handlePageChange(currentPage - 1)}
640+
disabled={currentPage === 1}
641+
className="flex items-center justify-center text-white/60 transition-colors duration-200 hover:text-white/90 disabled:opacity-50"
642+
>
643+
<span className="material-symbols-outlined !text-xs">
644+
arrow_back_ios
645+
</span>
646+
</button>
647+
<span className="text-xs text-white/70">
648+
Page {currentPage} of {totalPages}
649+
</span>
650+
<button
651+
onClick={() => handlePageChange(currentPage + 1)}
652+
disabled={currentPage === totalPages}
653+
className="flex items-center justify-center text-white/60 transition-colors duration-200 hover:text-white/90 disabled:opacity-50"
654+
>
655+
<span className="material-symbols-outlined !text-xs">
656+
arrow_forward_ios
657+
</span>
658+
</button>
659+
<button
660+
onClick={() => handlePageChange(totalPages)}
661+
disabled={currentPage === totalPages}
662+
className="flex items-center justify-center text-white/60 transition-colors duration-200 hover:text-white/90 disabled:opacity-50"
663+
>
664+
<span className="material-symbols-outlined !text-lg">
665+
last_page
666+
</span>
667+
</button>
668+
</div>
669+
)}
660670
<FavoriteModal
661671
isOpen={favoriteModal.isOpen}
662672
currentName={getModalCurrentName()}
@@ -688,16 +698,14 @@ function Header({
688698
return (
689699
<button
690700
onClick={() => setSelected(name)}
691-
className={`relative flex items-center justify-center py-1 transition duration-200 ${
692-
selected === name
693-
? 'bg-human-4/30'
694-
: 'bg-background-1/80 hover:bg-background-2'
701+
className={`relative flex items-center justify-center py-1 transition-all duration-200 ${
702+
selected === name ? 'bg-white/10' : 'hover:bg-white/8 bg-white/5'
695703
} ${name === 'favorites' ? 'px-3' : ''}`}
696704
>
697705
<div className="flex items-center justify-start gap-1">
698706
<p
699-
className={`text-xs transition duration-200 ${
700-
selected === name ? 'text-human-2' : 'text-primary'
707+
className={`text-xs transition-colors duration-200 ${
708+
selected === name ? 'text-white/95' : 'text-white/70'
701709
}`}
702710
>
703711
{label}
@@ -706,7 +714,7 @@ function Header({
706714
{selected === name && (
707715
<motion.div
708716
layoutId="underline"
709-
className="absolute -bottom-0.5 h-0.5 w-full bg-human-2/80"
717+
className="absolute -bottom-0.5 h-0.5 w-full bg-primary/40"
710718
></motion.div>
711719
)}
712720
</button>

‎src/components/Profile/ProfileColumn.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

33
interface Props {
4-
icon: React.JSX.Element
4+
icon: string
55
name: string
66
data: {
77
rating: number
@@ -20,24 +20,26 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
2020
const losses = data.losses ?? data.games - data.wins - (data?.draws || 0)
2121

2222
return (
23-
<div className="flex w-full flex-col overflow-hidden rounded border border-white border-opacity-10">
24-
<div className="flex flex-row items-center justify-start gap-3 bg-background-1 px-4 py-3">
25-
<div className="h-[20px] w-[20px] md:h-[24px] md:w-[24px]">{icon}</div>
26-
<p className="text-xl font-bold md:text-2xl">{name}</p>
23+
<div className="from-white/8 to-white/4 flex w-full flex-col gap-3 overflow-hidden rounded-lg border border-white/20 bg-white/5 bg-gradient-to-br backdrop-blur-md">
24+
<div className="flex flex-row items-center justify-start gap-2 px-4 pt-3">
25+
<span className="material-symbols-outlined material-symbols-filled text-xl text-primary/80 md:!text-3xl">
26+
{icon}
27+
</span>
28+
<p className="text-xl font-bold text-white/95 md:text-2xl">{name}</p>
2729
</div>
28-
<div className="flex flex-col gap-4 bg-background-1/40 p-4">
30+
<div className="flex flex-col gap-3 px-4 pb-4">
2931
<div className="flex items-center justify-between">
30-
<div className="flex flex-col items-center justify-center gap-1 text-human-1">
31-
<p className="text-sm xl:text-base">Rating</p>
32-
<b className="text-xl xl:text-2xl">{data.rating}</b>
32+
<div className="flex flex-col items-center justify-center gap-1">
33+
<p className="text-sm text-white/70 xl:text-base">Rating</p>
34+
<b className="text-xl text-white/95 xl:text-2xl">{data.rating}</b>
3335
</div>
3436
<div className="flex flex-col items-center justify-center gap-1">
35-
<p className="text-sm xl:text-base">Highest</p>
36-
<b className="text-xl xl:text-2xl">{data.highest}</b>
37+
<p className="text-sm text-white/70 xl:text-base">Highest</p>
38+
<b className="text-xl text-white/95 xl:text-2xl">{data.highest}</b>
3739
</div>
3840
<div className="flex flex-col items-center justify-center gap-1">
39-
<p className="text-sm xl:text-base">Games</p>
40-
<b className="text-xl xl:text-2xl">{data.games}</b>
41+
<p className="text-sm text-white/70 xl:text-base">Games</p>
42+
<b className="text-xl text-white/95 xl:text-2xl">{data.games}</b>
4143
</div>
4244
{/* <div className="flex flex-col items-center justify-center gap-1">
4345
<p className="text-sm xl:text-base">Hours</p>
@@ -47,20 +49,20 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
4749
<div className="flex flex-col items-center gap-2">
4850
<div className="flex w-full items-center justify-between">
4951
<div className="flex items-center gap-1">
50-
<div className="h-3 w-3 border border-black bg-green-500/70" />
51-
<p className="text-xs">
52+
<div className="h-3 w-3 rounded border border-white/20 bg-green-500/80" />
53+
<p className="text-xs text-white/80">
5254
Wins: {wins}{' '}
53-
<span className="text-secondary">
55+
<span className="text-white/60">
5456
({Math.round((wins * 100) / data.games) || 0}%)
5557
</span>
5658
</p>
5759
</div>
5860
{draws > 0 ? (
5961
<div className="flex items-center gap-1">
60-
<div className="h-3 w-3 border border-black bg-yellow-500/70" />
61-
<p className="text-xs">
62+
<div className="h-3 w-3 rounded border border-white/20 bg-yellow-500/80" />
63+
<p className="text-xs text-white/80">
6264
Draws: {draws}{' '}
63-
<span className="text-secondary">
65+
<span className="text-white/60">
6466
({Math.round((draws * 100) / data.games) || 0}%)
6567
</span>
6668
</p>
@@ -69,32 +71,32 @@ export const ProfileColumn: React.FC<Props> = ({ icon, name, data }: Props) => {
6971
<></>
7072
)}
7173
<div className="flex items-center gap-1">
72-
<div className="h-3 w-3 border border-black bg-red-500/70" />
73-
<p className="text-xs">
74+
<div className="h-3 w-3 rounded border border-white/20 bg-red-500/80" />
75+
<p className="text-xs text-white/80">
7476
Losses: {losses}{' '}
75-
<span className="text-secondary">
77+
<span className="text-white/60">
7678
({Math.round((losses * 100) / data.games) || 0}%)
7779
</span>
7880
</p>
7981
</div>
8082
</div>
81-
<div className="flex h-6 w-full border border-black">
83+
<div className="flex h-6 w-full overflow-hidden rounded border border-white/20">
8284
{wins > 0 && (
8385
<div
84-
className="h-full border-r border-black bg-green-500/70"
86+
className="h-full border-r border-white/20 bg-green-500/80"
8587
style={{ width: `${(wins / data.games) * 100}%` }}
8688
/>
8789
)}
8890

8991
{draws > 0 && (
9092
<div
91-
className="h-full border-r border-black bg-yellow-500/70"
93+
className="h-full border-r border-white/20 bg-yellow-500/80"
9294
style={{ width: `${(draws / data.games) * 100}%` }}
9395
/>
9496
)}
9597
{losses > 0 && (
9698
<div
97-
className="h-full bg-red-500/70"
99+
className="h-full bg-red-500/80"
98100
style={{ width: `${(losses / data.games) * 100}%` }}
99101
/>
100102
)}

0 commit comments

Comments
 (0)