Skip to content

Commit 338b685

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve analysis left sidebar
1 parent aef7403 commit 338b685

3 files changed

Lines changed: 33 additions & 28 deletions

File tree

‎src/components/Analysis/AnalysisGameList.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -588,7 +588,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
588588
id="analysis-game-list"
589589
className={
590590
embedded
591-
? 'flex h-full flex-col items-start justify-start overflow-hidden border-t border-b border-glassBorder bg-transparent'
591+
? 'flex h-full flex-col items-start justify-start overflow-hidden border-b border-t border-glassBorder bg-transparent'
592592
: 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
593593
}
594594
>
@@ -634,6 +634,22 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
634634
</div>
635635
</div>
636636

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+
637653
{/* H&B Subsections */}
638654
{selected === 'hb' && (
639655
<div className="flex border-b border-white/10">
@@ -712,7 +728,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
712728
className={`group flex w-full items-center gap-2 ${selectedGame ? 'bg-glass-strong' : 'hover:bg-glass-hover'}`}
713729
>
714730
<div
715-
className={`flex h-full w-9 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
731+
className={`flex h-full w-10 items-center justify-center ${selectedGame ? 'bg-glass-strong' : 'group-hover:bg-glass-hover'}`}
716732
>
717733
<p className="text-sm text-white/70">
718734
{selected === 'play' ||
@@ -876,19 +892,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
876892
</div>
877893
)}
878894
</div>
879-
{onCustomAnalysis && (
880-
<button
881-
onClick={onCustomAnalysis}
882-
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"
883-
>
884-
<span className="material-symbols-outlined text-xs text-white/70">
885-
add
886-
</span>
887-
<span className="text-xs text-white/80">
888-
Analyze Custom PGN/FEN
889-
</span>
890-
</button>
891-
)}
895+
{/* Removed bottom "Analyze Custom" button; now shown only under Custom tab */}
892896
</div>
893897
<FavoriteModal
894898
isOpen={favoriteModal.isOpen}

‎src/components/Board/BoardController.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface Props {
1818
disablePrevious?: boolean
1919
disableKeyboardNavigation?: boolean
2020
disableNavigation?: boolean
21+
embedded?: boolean
2122
}
2223

2324
export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
@@ -134,35 +135,35 @@ export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
134135
<button
135136
onClick={disableFlip ? undefined : toggleBoardOrientation}
136137
disabled={disableFlip}
137-
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
138+
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
138139
>
139140
{FlipIcon}
140141
</button>
141142
<button
142143
onClick={disableNavigation ? undefined : getFirst}
143144
disabled={!hasPrevious || disablePrevious || disableNavigation}
144-
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
145+
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
145146
>
146147
&#8249;&#8249;&#8249;
147148
</button>
148149
<button
149150
onClick={disableNavigation ? undefined : getPrevious}
150151
disabled={!hasPrevious || disablePrevious || disableNavigation}
151-
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
152+
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
152153
>
153154
&#8249;
154155
</button>
155156
<button
156157
onClick={disableNavigation ? undefined : getNext}
157158
disabled={!hasNext || disableNavigation}
158-
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:opacity-40"
159+
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
159160
>
160161
&#8250;
161162
</button>
162163
<button
163164
onClick={disableNavigation ? undefined : getLast}
164165
disabled={!hasNext || disableNavigation}
165-
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-[rgb(var(--color-surface-2))] transition duration-200 hover:opacity-90 disabled:opacity-40"
166+
className="flex h-7 flex-1 items-center justify-center rounded-sm bg-glass transition duration-200 hover:bg-glass-hover disabled:bg-black/5"
166167
>
167168
&#8250;&#8250;&#8250;
168169
</button>

‎src/components/Board/MovesContainer.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ export const MovesContainer: React.FC<
349349
))}
350350
{termination && (
351351
<div
352-
className="min-w-fit cursor-pointer rounded-md border border-white/10 bg-[rgb(var(--color-surface-2))] px-4 py-1 text-sm text-white/90"
352+
className="min-w-fit cursor-pointer border-b border-t border-white/10 bg-[rgb(var(--color-surface-2))] px-4 py-1 text-sm text-white/90"
353353
onClick={() => {
354354
if (!disableMoveClicking) {
355355
controller.goToNode(mainLineNodes[mainLineNodes.length - 1])
@@ -371,16 +371,16 @@ export const MovesContainer: React.FC<
371371
return (
372372
<div
373373
ref={containerRef}
374-
className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
374+
className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-[2.5rem_1fr_1fr_1fr_1fr] overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
375375
embedded
376-
? 'border-glassBorder border-b bg-transparent'
377-
: 'border-glassBorder bg-glass rounded-md border backdrop-blur-md'
376+
? 'border-b border-glassBorder bg-transparent'
377+
: 'rounded-md border border-glassBorder bg-glass backdrop-blur-md'
378378
}`}
379379
>
380380
{moves.map(([whiteNode, blackNode], index) => {
381381
return (
382382
<>
383-
<span className="bg-glass-strong flex h-7 items-center justify-center text-sm text-white/70">
383+
<span className="flex h-7 items-center justify-center bg-glass-strong text-sm text-white/70">
384384
{(whiteNode || blackNode)?.moveNumber}
385385
</span>
386386
<div
@@ -391,7 +391,7 @@ export const MovesContainer: React.FC<
391391
}
392392
}}
393393
data-index={index * 2 + 1}
394-
className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
394+
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
395395
>
396396
<span
397397
style={{
@@ -432,7 +432,7 @@ export const MovesContainer: React.FC<
432432
}
433433
}}
434434
data-index={index * 2 + 2}
435-
className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
435+
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
436436
>
437437
<span
438438
style={{
@@ -470,7 +470,7 @@ export const MovesContainer: React.FC<
470470
})}
471471
{termination && !isMobile && (
472472
<div
473-
className="border-glassBorder bg-glass col-span-5 cursor-pointer rounded-md border p-5 text-center text-white/90 backdrop-blur-md"
473+
className="col-span-5 cursor-pointer border-b border-t border-glassBorder bg-glass p-5 text-center text-white/90 backdrop-blur-md"
474474
onClick={() => {
475475
if (!disableMoveClicking) {
476476
controller.goToNode(mainLineNodes[mainLineNodes.length - 1])

0 commit comments

Comments
 (0)