Skip to content

Commit b07a180

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign opening page
1 parent d654447 commit b07a180

3 files changed

Lines changed: 135 additions & 105 deletions

File tree

‎src/components/Openings/OpeningDrillSidebar.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface Props {
1313
onChangeSelections?: () => void
1414
onLoadCompletedDrill?: (drill: CompletedDrill) => void
1515
onNavigateToDrill?: (drillIndex: number) => void
16+
embedded?: boolean
1617
}
1718

1819
export const OpeningDrillSidebar: React.FC<Props> = ({
@@ -26,25 +27,38 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
2627
onChangeSelections,
2728
onLoadCompletedDrill,
2829
onNavigateToDrill,
30+
embedded = false,
2931
}) => {
32+
const containerClass = embedded
33+
? 'flex h-full w-full flex-col 2xl:min-w-72'
34+
: 'flex h-full w-full flex-col border-r border-white/10 bg-background-1 2xl:min-w-72'
35+
36+
const sectionHeaderClass = embedded
37+
? 'px-4 pt-4'
38+
: 'border-b border-white/10 p-4'
39+
40+
const listHeaderClass = embedded
41+
? 'px-4 pb-2'
42+
: 'border-b border-white/10 px-3 py-2'
43+
3044
return (
31-
<div className="flex h-full w-full flex-col border-r border-white/10 bg-background-1 2xl:min-w-72">
45+
<div className={containerClass}>
3246
{/* Current Drill Info */}
33-
<div className="border-b border-white/10 p-4">
34-
<h2 className="mb-2 text-lg font-bold text-primary">Current Drill</h2>
47+
<div className={sectionHeaderClass}>
48+
<h2 className="mb-2 text-base font-semibold text-white/95">Current Drill</h2>
3549
{currentDrill ? (
3650
<div className="space-y-2">
3751
<div>
38-
<p className="text-sm font-medium text-primary">
52+
<p className="text-sm font-medium text-white/95">
3953
{currentDrill.opening.name}
4054
</p>
4155
{currentDrill.variation && (
42-
<p className="text-xs text-secondary">
56+
<p className="text-xs text-white/70">
4357
{currentDrill.variation.name}
4458
</p>
4559
)}
4660
</div>
47-
<div className="flex items-center gap-2 text-xs text-secondary">
61+
<div className="flex items-center gap-2 text-xs text-white/70">
4862
<div className="relative h-4 w-4">
4963
<Image
5064
src={
@@ -80,21 +94,21 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
8094
</div> */}
8195
</div>
8296
) : (
83-
<p className="text-sm text-secondary">No drill selected</p>
97+
<p className="text-sm text-white/70">No drill selected</p>
8498
)}
8599
</div>
86100

87101
{/* All Drills List */}
88102
<div className="flex h-96 flex-col overflow-hidden">
89-
<div className="border-b border-white/10 px-3 py-2">
90-
<h3 className="text-sm font-medium text-primary">
103+
<div className={listHeaderClass}>
104+
<h3 className="text-sm font-medium text-white/90">
91105
Drill Progress ({currentDrillIndex + 1} of {totalDrills})
92106
</h3>
93107
</div>
94108
<div className="red-scrollbar flex h-full flex-col overflow-y-auto">
95109
{drillSequence.length === 0 ? (
96110
<div className="flex h-full items-center justify-center">
97-
<p className="max-w-[12rem] text-center text-xs text-secondary">
111+
<p className="max-w-[12rem] text-center text-xs text-white/70">
98112
No drills selected
99113
</p>
100114
</div>
@@ -159,7 +173,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
159173
<div className="flex items-start justify-between">
160174
<div className="min-w-0 flex-1">
161175
<div className="flex items-center justify-between">
162-
<p className="text-xs font-medium text-primary">
176+
<p className="text-xs font-medium text-white/90">
163177
Drill #{drillNumber}
164178
</p>
165179
<span
@@ -170,11 +184,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
170184
</div>
171185
{!shouldHide && (
172186
<>
173-
<p className="text-xs text-primary">
187+
<p className="text-xs text-white/90">
174188
{drill.opening.name}
175189
</p>
176190
{drill.variation && (
177-
<p className="text-xs text-secondary">
191+
<p className="text-xs text-white/70">
178192
{drill.variation.name}
179193
</p>
180194
)}
@@ -193,11 +207,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
193207
alt={`${drill.playerColor} king`}
194208
/>
195209
</div>
196-
<span className="text-secondary">
210+
<span className="text-white/70">
197211
vs Maia{' '}
198212
{drill.maiaVersion.replace('maia_kdd_', '')}
199213
</span>
200-
<span className="text-secondary">
214+
<span className="text-white/70">
201215
• {drill.targetMoveNumber} moves
202216
</span>
203217
</div>

‎src/components/Openings/OpeningSelectionModal.tsx‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
6161

6262
return (
6363
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
64-
<div className="mx-4 w-full max-w-sm rounded-lg bg-background-1 p-4">
64+
<div className="from-white/8 to-white/4 mx-4 w-full max-w-sm rounded-lg border border-white/10 bg-gradient-to-br p-4 backdrop-blur-md">
6565
<div className="mb-4">
6666
<h3 className="text-lg font-bold">{opening.name}</h3>
6767
{variation && (
@@ -90,10 +90,10 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
9090
<div className="flex gap-2">
9191
<button
9292
onClick={() => setSelectedColor('white')}
93-
className={`flex items-center gap-2 rounded px-3 py-2 text-sm transition-colors ${
93+
className={`flex items-center gap-2 rounded border px-3 py-2 text-sm transition-colors ${
9494
selectedColor === 'white'
95-
? 'bg-human-4 text-white'
96-
: 'bg-background-2 hover:bg-background-3'
95+
? 'border-white/20 bg-white/10 text-white'
96+
: 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
9797
}`}
9898
>
9999
<div className="relative h-4 w-4">
@@ -107,10 +107,10 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
107107
</button>
108108
<button
109109
onClick={() => setSelectedColor('black')}
110-
className={`flex items-center gap-2 rounded px-3 py-2 text-sm transition-colors ${
110+
className={`flex items-center gap-2 rounded border px-3 py-2 text-sm transition-colors ${
111111
selectedColor === 'black'
112-
? 'bg-human-4 text-white'
113-
: 'bg-background-2 hover:bg-background-3'
112+
? 'border-white/20 bg-white/10 text-white'
113+
: 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
114114
}`}
115115
>
116116
<div className="relative h-4 w-4">
@@ -129,21 +129,21 @@ const MobileOpeningPopup: React.FC<MobileOpeningPopupProps> = ({
129129
<div className="flex gap-2">
130130
<button
131131
onClick={onClose}
132-
className="flex-1 rounded bg-background-2 py-2 text-sm font-medium transition-colors hover:bg-background-3"
132+
className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white/90 backdrop-blur-sm transition-colors hover:bg-white/10"
133133
>
134134
Cancel
135135
</button>
136136
{isSelected ? (
137137
<button
138138
onClick={onRemove}
139-
className="flex-1 rounded bg-human-4 py-2 text-sm font-medium transition-colors"
139+
className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
140140
>
141141
Remove
142142
</button>
143143
) : (
144144
<button
145145
onClick={() => onAdd(selectedColor)}
146-
className="flex-1 rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80"
146+
className="flex-1 rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
147147
>
148148
Add Drill
149149
</button>
@@ -273,7 +273,7 @@ const BrowsePanel: React.FC<{
273273
placeholder="Search openings..."
274274
value={searchTerm}
275275
onChange={(e) => setSearchTerm(e.target.value)}
276-
className="w-full rounded bg-background-2 py-2 pl-10 pr-4 text-sm text-primary placeholder-secondary focus:outline-none focus:ring-1 focus:ring-human-4"
276+
className="w-full rounded border border-white/10 bg-white/5 py-2 pl-10 pr-4 text-sm text-white placeholder-white/60 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20"
277277
/>
278278
</div>
279279
</div>
@@ -296,13 +296,13 @@ const BrowsePanel: React.FC<{
296296
className={`group transition-colors ${
297297
isMobile
298298
? openingIsSelected
299-
? 'bg-human-2/20'
299+
? 'bg-white/5'
300300
: ''
301301
: openingIsSelected
302-
? 'bg-human-2/20'
302+
? 'bg-white/5'
303303
: openingIsBeingPreviewed
304-
? 'bg-human-2/10'
305-
: 'hover:bg-human-2/10'
304+
? 'bg-white/5'
305+
: 'hover:bg-white/5'
306306
}`}
307307
>
308308
<div className="flex items-center">
@@ -352,7 +352,7 @@ const BrowsePanel: React.FC<{
352352
e.stopPropagation()
353353
removeOpeningSelection(opening, null)
354354
}}
355-
className="mr-3 rounded p-1 text-human-3 transition-colors hover:text-human-4"
355+
className="mr-3 rounded p-1 text-white/70 transition-colors hover:text-white"
356356
title="Remove opening from selection"
357357
>
358358
<span className="material-symbols-outlined !text-base">
@@ -391,13 +391,13 @@ const BrowsePanel: React.FC<{
391391
className={`group transition-colors ${
392392
isMobile
393393
? variationIsSelected
394-
? 'bg-human-2/20'
394+
? 'bg-white/5'
395395
: ''
396396
: variationIsSelected
397-
? 'bg-human-2/20'
397+
? 'bg-white/5'
398398
: variationIsBeingPreviewed
399-
? 'bg-human-2/10'
400-
: 'hover:bg-human-2/10'
399+
? 'bg-white/5'
400+
: 'hover:bg-white/5'
401401
}`}
402402
>
403403
<div className="flex items-center">
@@ -446,7 +446,7 @@ const BrowsePanel: React.FC<{
446446
e.stopPropagation()
447447
removeOpeningSelection(opening, variation)
448448
}}
449-
className="mr-3 rounded p-1 text-human-3 transition-colors hover:text-human-4"
449+
className="mr-3 rounded p-1 text-white/70 transition-colors hover:text-white"
450450
title="Remove variation from selection"
451451
>
452452
<span className="material-symbols-outlined !text-base">
@@ -533,10 +533,10 @@ const PreviewPanel: React.FC<{
533533
<div className="flex gap-2">
534534
<button
535535
onClick={() => setSelectedColor('white')}
536-
className={`flex items-center gap-2 rounded px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
536+
className={`flex items-center gap-2 rounded border px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
537537
selectedColor === 'white'
538-
? 'bg-human-4 text-white'
539-
: 'bg-background-2 hover:bg-background-3'
538+
? 'border-white/20 bg-white/10 text-white'
539+
: 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
540540
}`}
541541
>
542542
<div className="relative h-4 w-4 md:h-5 md:w-5">
@@ -550,10 +550,10 @@ const PreviewPanel: React.FC<{
550550
</button>
551551
<button
552552
onClick={() => setSelectedColor('black')}
553-
className={`flex items-center gap-2 rounded px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
553+
className={`flex items-center gap-2 rounded border px-2 py-1 text-xs transition-colors md:px-3 md:py-2 md:text-sm ${
554554
selectedColor === 'black'
555-
? 'bg-human-4 text-white'
556-
: 'bg-background-2 hover:bg-background-3'
555+
? 'border-white/20 bg-white/10 text-white'
556+
: 'border-white/10 bg-white/5 text-white/90 hover:bg-white/10'
557557
}`}
558558
>
559559
<div className="relative h-4 w-4 md:h-5 md:w-5">
@@ -585,11 +585,11 @@ const PreviewPanel: React.FC<{
585585
</div>
586586
</div>
587587

588-
<div className="flex-shrink-0 border-t border-white/10 bg-background-1 p-3 md:p-4">
588+
<div className="flex-shrink-0 border-t border-white/10 p-3 md:p-4">
589589
<button
590590
onClick={addSelection}
591591
disabled={isDuplicateSelection(previewOpening, previewVariation)}
592-
className="w-full rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
592+
className="w-full rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
593593
title={
594594
isDuplicateSelection(previewOpening, previewVariation)
595595
? 'Already added with same settings'
@@ -690,7 +690,7 @@ const SelectedPanel: React.FC<{
690690
}
691691
}}
692692
onClick={() => removeSelection(selection.id)}
693-
className="ml-2 text-secondary transition-colors hover:text-human-4"
693+
className="ml-2 text-secondary transition-colors hover:text-white"
694694
>
695695
<span className="material-symbols-outlined !text-lg">
696696
close
@@ -704,7 +704,7 @@ const SelectedPanel: React.FC<{
704704
</div>
705705

706706
{/* Fixed button section - always visible */}
707-
<div className="flex-shrink-0 border-t border-white/10 bg-background-1 p-3 md:p-4">
707+
<div className="flex-shrink-0 border-t border-white/10 p-3 md:p-4">
708708
{/* Opponent Selection */}
709709
<div className="mb-3 md:mb-4">
710710
<p className="mb-1 text-xs font-medium md:mb-2 md:text-sm">Opponent:</p>
@@ -718,7 +718,7 @@ const SelectedPanel: React.FC<{
718718
setSelectedMaiaVersion(version)
719719
}
720720
}}
721-
className="w-full rounded bg-background-2 p-2 text-xs focus:outline-none md:text-sm"
721+
className="w-full rounded border border-white/10 bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
722722
>
723723
{MAIA_MODELS_WITH_NAMES.map((version) => (
724724
<option key={version.id} value={version.id}>
@@ -750,7 +750,7 @@ const SelectedPanel: React.FC<{
750750
<button
751751
onClick={handleStartDrilling}
752752
disabled={selections.length === 0}
753-
className="w-full rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
753+
className="w-full rounded border border-white/10 bg-white/5 py-2 text-sm font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
754754
>
755755
Start Drilling ({selections.length} opening
756756
{selections.length !== 1 ? 's' : ''})
@@ -1058,8 +1058,17 @@ export const OpeningSelectionModal: React.FC<Props> = ({
10581058
initial={{ opacity: 0 }}
10591059
animate={{ opacity: 1 }}
10601060
exit={{ opacity: 0 }}
1061-
className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1400px] flex-col items-start justify-start overflow-hidden rounded-lg bg-background-1 shadow-2xl md:h-[90vh]"
1061+
className="from-white/8 to-white/4 relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1400px] flex-col items-start justify-start overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br backdrop-blur-md md:h-[90vh]"
10621062
>
1063+
<div
1064+
className="pointer-events-none absolute inset-0"
1065+
style={{
1066+
background: [
1067+
'radial-gradient(ellipse 90% 80% at 0% 100%, rgba(239, 68, 68, 0.10) 0%, transparent 72%)',
1068+
'radial-gradient(ellipse 90% 80% at 100% 0%, rgba(239, 68, 68, 0.08) 0%, transparent 72%)',
1069+
].join(', '),
1070+
}}
1071+
/>
10631072
{/* Close Button - Top Right of Modal */}
10641073
<button
10651074
onClick={onClose}
@@ -1081,7 +1090,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
10811090
</h1>
10821091
<button
10831092
type="button"
1084-
className="material-symbols-outlined text-lg text-secondary duration-200 hover:text-human-3 focus:outline-none"
1093+
className="material-symbols-outlined text-lg text-secondary duration-200 hover:text-white focus:outline-none"
10851094
onClick={handleStartTour}
10861095
title="Start tour"
10871096
>

0 commit comments

Comments
 (0)