Skip to content

Commit 5c7b5d8

Browse files
kevinjosethomaskevinjosethomas
committed
style: attempt new glassmorphic analysis page design
1 parent 8be27be commit 5c7b5d8

16 files changed

Lines changed: 253 additions & 186 deletions

‎src/components/Analysis/AnalysisGameList.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -584,10 +584,10 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
584584
return analysisTournamentList ? (
585585
<div
586586
id="analysis-game-list"
587-
className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded"
587+
className="flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md"
588588
>
589589
<div className="flex h-full w-full flex-col">
590-
<div className="flex select-none items-center border-b-2 border-white border-opacity-10">
590+
<div className="flex select-none items-center border-b border-white/10">
591591
<Header
592592
label="★"
593593
name="favorites"
@@ -630,35 +630,35 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
630630

631631
{/* H&B Subsections */}
632632
{selected === 'hb' && (
633-
<div className="flex border-b border-white border-opacity-10">
633+
<div className="flex border-b border-white/10">
634634
<button
635635
onClick={() => setHbSubsection('hand')}
636-
className={`flex-1 px-3 text-sm ${
636+
className={`flex-1 px-3 text-sm transition-colors ${
637637
hbSubsection === 'hand'
638-
? 'bg-background-2 text-primary'
639-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
638+
? 'bg-white/10 text-white'
639+
: 'bg-white/5 text-white/80 hover:bg-white/10'
640640
}`}
641641
>
642642
<div className="flex items-center justify-center gap-1">
643-
<span className="material-symbols-outlined !text-lg">
643+
<span className="material-symbols-outlined !text-lg text-white/80">
644644
hand_gesture
645645
</span>
646-
<span className="text-xs">Hand</span>
646+
<span className="text-xs text-white/90">Hand</span>
647647
</div>
648648
</button>
649649
<button
650650
onClick={() => setHbSubsection('brain')}
651-
className={`flex-1 px-3 text-sm ${
651+
className={`flex-1 px-3 text-sm transition-colors ${
652652
hbSubsection === 'brain'
653-
? 'bg-background-2 text-primary'
654-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
653+
? 'bg-white/10 text-white'
654+
: 'bg-white/5 text-white/80 hover:bg-white/10'
655655
}`}
656656
>
657657
<div className="flex items-center justify-center gap-1">
658-
<span className="material-symbols-outlined !text-lg">
658+
<span className="material-symbols-outlined !text-lg text-white/80">
659659
neurology
660660
</span>
661-
<span className="text-xs">Brain</span>
661+
<span className="text-xs text-white/90">Brain</span>
662662
</div>
663663
</button>
664664
</div>
@@ -703,12 +703,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
703703
return (
704704
<div
705705
key={index}
706-
className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-background-2 font-bold' : index % 2 === 0 ? 'bg-background-1/30 hover:bg-background-2' : 'bg-background-1/10 hover:bg-background-2'}`}
706+
className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-glass-strong' : 'hover:bg-glass-hover'}`}
707707
>
708708
<div
709-
className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-background-3' : 'bg-background-2 group-hover:bg-white/5'}`}
709+
className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
710710
>
711-
<p className="text-sm text-secondary">
711+
<p className="text-sm text-white/70">
712712
{selected === 'play' ||
713713
selected === 'hb' ||
714714
selected === 'favorites'
@@ -732,13 +732,13 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
732732
className="flex flex-1 cursor-pointer items-center justify-between overflow-hidden py-1"
733733
>
734734
<div className="flex items-center gap-2 overflow-hidden">
735-
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-primary">
735+
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/90">
736736
{displayName}
737737
</p>
738738
{selected === 'favorites' &&
739739
(game.type === 'hand' ||
740740
game.type === 'brain') && (
741-
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-secondary">
741+
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-white/70">
742742
{game.type === 'hand'
743743
? 'hand_gesture'
744744
: 'neurology'}
@@ -753,7 +753,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
753753
e.stopPropagation()
754754
handleFavoriteGame(game)
755755
}}
756-
className="flex items-center justify-center text-secondary transition hover:text-primary"
756+
className="flex items-center justify-center text-white/70 transition hover:text-white"
757757
title="Edit favourite"
758758
>
759759
<span className="material-symbols-outlined !text-xs">
@@ -798,7 +798,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
798798
</span>
799799
</button>
800800
)}
801-
<p className="whitespace-nowrap text-sm font-light text-secondary">
801+
<p className="whitespace-nowrap text-sm font-light text-white/70">
802802
{game.result
803803
.replace('1/2', '½')
804804
.replace('1/2', '½')}
@@ -862,7 +862,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
862862
getCurrentGames().length === 0 &&
863863
!loading && (
864864
<div className="flex flex-1 items-start justify-center gap-1 py-2 md:items-center">
865-
<p className="text-center text-xs text-secondary">
865+
<p className="text-center text-xs text-white/70">
866866
{selected === 'favorites'
867867
? ' ⭐ Hit the star to favourite games...'
868868
: 'Play more games... ^. .^₎⟆'}
@@ -873,12 +873,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
873873
{onCustomAnalysis && (
874874
<button
875875
onClick={onCustomAnalysis}
876-
className="flex w-full items-center gap-2 bg-background-4/40 px-3 py-1.5 transition duration-200 hover:bg-background-4/80"
876+
className="flex w-full items-center gap-2 border-t border-white/10 bg-white/5 px-3 py-1.5 text-white/80 transition duration-200 hover:bg-white/10"
877877
>
878-
<span className="material-symbols-outlined text-xs text-secondary">
878+
<span className="material-symbols-outlined text-xs text-white/70">
879879
add
880880
</span>
881-
<span className="text-xs text-secondary">
881+
<span className="text-xs text-white/80">
882882
Analyze Custom PGN/FEN
883883
</span>
884884
</button>
@@ -915,19 +915,19 @@ function Header({
915915
return (
916916
<button
917917
onClick={() => setSelected(name)}
918-
className={`relative flex items-center justify-center md:py-1 ${selected === name ? 'bg-human-4/30' : 'bg-background-1/80 hover:bg-background-2'} ${name === 'favorites' ? 'px-3' : ''}`}
918+
className={`relative flex items-center justify-center md:py-1 ${selected === name ? 'bg-white/10' : 'bg-white/5 hover:bg-white/10'} ${name === 'favorites' ? 'px-3' : ''}`}
919919
>
920920
<div className="flex items-center justify-start">
921921
<p
922-
className={`text-xs transition duration-200 ${selected === name ? 'text-human-2' : 'text-primary'}`}
922+
className={`text-xs transition duration-200 ${selected === name ? 'text-white' : 'text-white/90'}`}
923923
>
924924
{label}
925925
</p>
926926
</div>
927927
{selected === name && (
928928
<motion.div
929929
layoutId="underline"
930-
className="absolute -bottom-0.5 h-0.5 w-full bg-human-2/80"
930+
className="absolute -bottom-0.5 h-0.5 w-full bg-white/70"
931931
></motion.div>
932932
)}
933933
</button>

0 commit comments

Comments
 (0)