Skip to content

Commit 504cbe1

Browse files
kevinjosethomaskevinjosethomas
authored
Merge pull request #219 from CSSLab/redesign
Redesign to new glassmorphic design
2 parents 9306092 + 2f5b88c commit 504cbe1

43 files changed

Lines changed: 1160 additions & 714 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/Analysis/AnalysisGameList.tsx‎

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface AnalysisGameListProps {
4848
onCustomAnalysis?: () => void
4949
onGameSelected?: () => void // Called when a game is selected (for mobile popup closing)
5050
refreshTrigger?: number // Used to trigger refresh when custom analysis is added
51+
embedded?: boolean // Render without outer card container
5152
}
5253

5354
export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
@@ -56,6 +57,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
5657
onGameSelected,
5758
refreshTrigger,
5859
loadNewWorldChampionshipGame,
60+
embedded = false,
5961
}) => {
6062
const router = useRouter()
6163
const { analysisLichessList, analysisTournamentList } =
@@ -584,10 +586,14 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
584586
return analysisTournamentList ? (
585587
<div
586588
id="analysis-game-list"
587-
className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded"
589+
className={
590+
embedded
591+
? 'flex h-full flex-col items-start justify-start overflow-hidden border-b border-t border-glassBorder bg-transparent'
592+
: 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
593+
}
588594
>
589595
<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">
596+
<div className="flex select-none items-center border-b border-white/10">
591597
<Header
592598
label="★"
593599
name="favorites"
@@ -628,37 +634,53 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
628634
</div>
629635
</div>
630636

637+
{selected === 'custom' && onCustomAnalysis && (
638+
<div className="flex border-b border-white/10">
639+
<button
640+
onClick={onCustomAnalysis}
641+
className="flex w-full items-center gap-2 bg-white/5 px-3 py-1.5 text-white/80 transition duration-200 hover:bg-white/10"
642+
>
643+
<span className="material-symbols-outlined text-xs text-white/70">
644+
add
645+
</span>
646+
<span className="text-xs text-white/80">
647+
Analyze Custom PGN/FEN
648+
</span>
649+
</button>
650+
</div>
651+
)}
652+
631653
{/* H&B Subsections */}
632654
{selected === 'hb' && (
633-
<div className="flex border-b border-white border-opacity-10">
655+
<div className="flex border-b border-white/10">
634656
<button
635657
onClick={() => setHbSubsection('hand')}
636-
className={`flex-1 px-3 text-sm ${
658+
className={`flex-1 px-3 text-sm transition-colors ${
637659
hbSubsection === 'hand'
638-
? 'bg-background-2 text-primary'
639-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
660+
? 'bg-white/10 text-white'
661+
: 'bg-white/5 text-white/80 hover:bg-white/10'
640662
}`}
641663
>
642664
<div className="flex items-center justify-center gap-1">
643-
<span className="material-symbols-outlined !text-lg">
644-
hand_gesture
665+
<span className="material-symbols-outlined material-symbols-filled !text-base text-white/80">
666+
back_hand
645667
</span>
646-
<span className="text-xs">Hand</span>
668+
<span className="text-xs text-white/90">Hand</span>
647669
</div>
648670
</button>
649671
<button
650672
onClick={() => setHbSubsection('brain')}
651-
className={`flex-1 px-3 text-sm ${
673+
className={`flex-1 px-3 text-sm transition-colors ${
652674
hbSubsection === 'brain'
653-
? 'bg-background-2 text-primary'
654-
: 'bg-background-1/50 text-secondary hover:bg-background-2'
675+
? 'bg-white/10 text-white'
676+
: 'bg-white/5 text-white/80 hover:bg-white/10'
655677
}`}
656678
>
657679
<div className="flex items-center justify-center gap-1">
658-
<span className="material-symbols-outlined !text-lg">
680+
<span className="material-symbols-outlined !text-lg text-white/80">
659681
neurology
660682
</span>
661-
<span className="text-xs">Brain</span>
683+
<span className="text-xs text-white/90">Brain</span>
662684
</div>
663685
</button>
664686
</div>
@@ -703,12 +725,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
703725
return (
704726
<div
705727
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'}`}
728+
className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-glass-strong' : 'hover:bg-glass-hover'}`}
707729
>
708730
<div
709-
className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-background-3' : 'bg-background-2 group-hover:bg-white/5'}`}
731+
className={`flex h-full w-10 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
710732
>
711-
<p className="text-sm text-secondary">
733+
<p className="text-sm text-white/70">
712734
{selected === 'play' ||
713735
selected === 'hb' ||
714736
selected === 'favorites'
@@ -732,13 +754,13 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
732754
className="flex flex-1 cursor-pointer items-center justify-between overflow-hidden py-1"
733755
>
734756
<div className="flex items-center gap-2 overflow-hidden">
735-
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-primary">
757+
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm text-white/90">
736758
{displayName}
737759
</p>
738760
{selected === 'favorites' &&
739761
(game.type === 'hand' ||
740762
game.type === 'brain') && (
741-
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-secondary">
763+
<span className="material-symbols-outlined flex-shrink-0 !text-sm text-white/70">
742764
{game.type === 'hand'
743765
? 'hand_gesture'
744766
: 'neurology'}
@@ -753,7 +775,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
753775
e.stopPropagation()
754776
handleFavoriteGame(game)
755777
}}
756-
className="flex items-center justify-center text-secondary transition hover:text-primary"
778+
className="flex items-center justify-center text-white/70 transition hover:text-white"
757779
title="Edit favourite"
758780
>
759781
<span className="material-symbols-outlined !text-xs">
@@ -798,7 +820,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
798820
</span>
799821
</button>
800822
)}
801-
<p className="whitespace-nowrap text-sm font-light text-secondary">
823+
<p className="whitespace-nowrap text-sm font-light text-white/70">
802824
{game.result
803825
.replace('1/2', '½')
804826
.replace('1/2', '½')}
@@ -818,7 +840,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
818840
disabled={currentPage === 1}
819841
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
820842
>
821-
<span className="material-symbols-outlined">
843+
<span className="material-symbols-outlined !text-lg">
822844
first_page
823845
</span>
824846
</button>
@@ -827,19 +849,19 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
827849
disabled={currentPage === 1}
828850
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
829851
>
830-
<span className="material-symbols-outlined">
852+
<span className="material-symbols-outlined !text-xs">
831853
arrow_back_ios
832854
</span>
833855
</button>
834-
<span className="text-sm text-secondary">
856+
<span className="text-xs text-secondary">
835857
Page {currentPage} of {totalPages}
836858
</span>
837859
<button
838860
onClick={() => handlePageChange(currentPage + 1)}
839861
disabled={currentPage === totalPages}
840862
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
841863
>
842-
<span className="material-symbols-outlined">
864+
<span className="material-symbols-outlined !text-xs">
843865
arrow_forward_ios
844866
</span>
845867
</button>
@@ -848,7 +870,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
848870
disabled={currentPage === totalPages}
849871
className="flex items-center justify-center text-secondary hover:text-primary disabled:opacity-50"
850872
>
851-
<span className="material-symbols-outlined">
873+
<span className="material-symbols-outlined !text-lg">
852874
last_page
853875
</span>
854876
</button>
@@ -862,27 +884,15 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
862884
getCurrentGames().length === 0 &&
863885
!loading && (
864886
<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">
887+
<p className="text-center text-xs text-white/70">
866888
{selected === 'favorites'
867889
? ' ⭐ Hit the star to favourite games...'
868890
: 'Play more games... ^. .^₎⟆'}
869891
</p>
870892
</div>
871893
)}
872894
</div>
873-
{onCustomAnalysis && (
874-
<button
875-
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"
877-
>
878-
<span className="material-symbols-outlined text-xs text-secondary">
879-
add
880-
</span>
881-
<span className="text-xs text-secondary">
882-
Analyze Custom PGN/FEN
883-
</span>
884-
</button>
885-
)}
895+
{/* Removed bottom "Analyze Custom" button; now shown only under Custom tab */}
886896
</div>
887897
<FavoriteModal
888898
isOpen={favoriteModal.isOpen}
@@ -915,19 +925,19 @@ function Header({
915925
return (
916926
<button
917927
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' : ''}`}
928+
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' : ''}`}
919929
>
920930
<div className="flex items-center justify-start">
921931
<p
922-
className={`text-xs transition duration-200 ${selected === name ? 'text-human-2' : 'text-primary'}`}
932+
className={`text-xs transition duration-200 ${selected === name ? 'text-white' : 'text-white/90'}`}
923933
>
924934
{label}
925935
</p>
926936
</div>
927937
{selected === name && (
928938
<motion.div
929939
layoutId="underline"
930-
className="absolute -bottom-0.5 h-0.5 w-full bg-human-2/80"
940+
className="absolute -bottom-0.5 h-0.5 w-full bg-white/70"
931941
></motion.div>
932942
)}
933943
</button>

0 commit comments

Comments
 (0)