From d0f11a9fb0b7ec46b3bf9ec9cc164dd26f559254 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 22 Aug 2026 19:15:21 +0000 Subject: [PATCH 1/9] refactor(edition): tokenize artists, explore, and set details colors (#358) Replace hardcoded Tailwind color classes with semantic role token utilities in VoteTab, ExploreSetPage, and SetDetails views. Third-party brand colors (Spotify green, SoundCloud orange) remain as hardcoded literals. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn --- .../tabs/VoteTab/EmptyArtistsState.tsx | 24 ++++---- .../tabs/VoteTab/MultiArtistSetCard.tsx | 2 +- .../tabs/VoteTab/SetCard/MultiArtistInfo.tsx | 4 +- .../tabs/VoteTab/SetCard/SetDescription.tsx | 2 +- .../tabs/VoteTab/SetCard/SetHeader.tsx | 6 +- .../tabs/VoteTab/SetCard/SetMetadata.tsx | 4 +- .../VoteTab/SetCard/SocialPlatformLink.tsx | 2 +- .../EditionView/tabs/VoteTab/SetListItem.tsx | 4 +- .../tabs/VoteTab/SingleArtistSetCard.tsx | 2 +- .../tabs/VoteTab/filters/DesktopFilters.tsx | 12 ++-- .../VoteTab/filters/FestivalModeToggle.tsx | 6 +- .../tabs/VoteTab/filters/MobileFilters.tsx | 40 +++++++------ .../tabs/VoteTab/filters/SortControls.tsx | 56 +++++++++++-------- .../tabs/VoteTab/filters/TimeFormatToggle.tsx | 4 +- .../VoteTab/filters/VotePerspectiveToggle.tsx | 6 +- .../ExploreSetPage/ExplorationProgress.tsx | 4 +- src/pages/ExploreSetPage/SetExploreCard.tsx | 4 +- .../SetExploreCard/PrimaryArtistDisplay.tsx | 4 +- .../SetExploreCard/SetCardHeader.tsx | 2 +- .../SetExploreCard/SoundCloudBadge.tsx | 2 +- .../SetExploreCard/SupportingArtists.tsx | 6 +- src/pages/ExploreSetPage/VotingActions.tsx | 12 ++-- .../ExploreSetPage/components/EmptyState.tsx | 2 +- .../components/ExplorePageHeader.tsx | 4 +- .../components/LoadingState.tsx | 2 +- .../components/ProgressInfoTooltip.tsx | 18 +++--- src/pages/SetDetails/IndividualArtistCard.tsx | 8 +-- src/pages/SetDetails/MixedArtistImage.tsx | 4 +- .../SetDetails/MultiArtistSetInfoCard.tsx | 14 ++--- src/pages/SetDetails/SetGroupVoting.tsx | 16 +++--- src/pages/SetDetails/SetImageCard.tsx | 2 +- src/pages/SetDetails/SetInfoCard.tsx | 8 +-- src/pages/SetDetails/SetNotes.tsx | 16 +++--- src/pages/SetDetails/notes/CreateNoteForm.tsx | 6 +- src/pages/SetDetails/notes/SetNoteItem.tsx | 10 ++-- 35 files changed, 171 insertions(+), 147 deletions(-) diff --git a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx index 5bdeabf9..2deb3cde 100644 --- a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx +++ b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx @@ -10,31 +10,33 @@ import { export function EmptyArtistsState() { return (
- +
- - + +
- No Artists Yet - + + No Artists Yet + + Be the first to add artists to the Boom Festival voting list!
-
- +
+ Connect with fellow festival-goers
-
- +
+ Discover new electronic artists
-
- +
+ Vote for your favorites
diff --git a/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx b/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx index 334f35b3..f4993494 100644 --- a/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx +++ b/src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx @@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/SetVotingButtons"; export function MultiArtistSetCard() { return ( - + {/* Set Image with Mixed Artists */} diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx index 018df8a9..e6e65d97 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx @@ -20,7 +20,9 @@ export function MultiArtistInfo({
{artists.map((artist) => (
- {artist.name} + + {artist.name} +
))} diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx index ba277fcf..30c1b647 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx @@ -8,7 +8,7 @@ interface SetDescriptionProps { } export function SetDescription({ - className = "text-purple-200 text-sm leading-relaxed", + className = "text-muted-foreground text-sm leading-relaxed", }: SetDescriptionProps) { const { set } = useFestivalSet(); const isMultiArtist = set.artists.length > 1; diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx index b12870a2..945f3b3b 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx @@ -14,8 +14,8 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) { const titleClass = size === "sm" - ? "text-white text-lg font-semibold truncate" - : "text-white text-xl"; + ? "text-foreground text-lg font-semibold truncate" + : "text-foreground text-xl"; return (
@@ -24,7 +24,7 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) { {isMultiArtist && ( {set.artists.length} diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx index c078e286..d6a506e0 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx @@ -55,7 +55,7 @@ export function SetMetadata() { )} {timeRangeFormatted && ( -
+
{timeRangeFormatted}
@@ -67,7 +67,7 @@ export function SetMetadata() {
)} {(timeRangeFormatted || dayOnlyFormatted) && ( - + {festival.timezone} )} diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx index 71e00618..29b932bb 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx @@ -26,7 +26,7 @@ export function SocialPlatformLink({ asChild variant="secondary" size="sm" - className={`p-1 ${buttonSize} bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`} + className={`p-1 ${buttonSize} bg-surface-active hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`} title={`Open ${artistName} in ${platformInfo.platform}`} > diff --git a/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx b/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx index 5594e4e5..f0fe6b48 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetListItem.tsx @@ -7,7 +7,7 @@ import { SetActionButtons } from "./SetCard/SetActionButtons"; export function SetListItem() { return (
{/* Mobile Layout (sm and below) */} @@ -20,7 +20,7 @@ export function SetListItem() {
- +
diff --git a/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx b/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx index f7979ac5..14cdcd54 100644 --- a/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx @@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/SetVotingButtons"; export function SingleArtistSetCard() { return ( - + diff --git a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx index 1acf6a2e..f6dba75b 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx @@ -39,10 +39,14 @@ export function DesktopFilters({ {/* Stage Filter */} {canShowStage && (
-

Stages

+

+ Stages +

{stagesLoading ? ( -
Loading stages...
+
+ Loading stages... +
) : ( stages.map((stage) => ( diff --git a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx index 46a8dc96..5db3aef7 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx @@ -47,23 +47,25 @@ export function MobileFilters({ {/* Stage Filter Select */} {canShowStage && (
-

Stage

+

+ Stage +

- + - - + + All Genres {genres.map((genre) => ( {genre.name} @@ -112,7 +116,7 @@ export function MobileFilters({ {/* Rating Filter */}
-

+

Minimum Rating

- +
- +
- + {SORT_OPTIONS.map((option) => { const Icon = SORT_ICONS[option.value as keyof typeof SORT_ICONS]; return (
@@ -74,44 +74,50 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) { - +
-

+

Sort Options Explained

- +
- Name (A-Z): -

+ + Name (A-Z): + +

Sort artists alphabetically from A to Z

- +
- Name (Z-A): -

+ + Name (Z-A): + +

Sort artists alphabetically from Z to A

- +
- Highest Rated: -

+ + Highest Rated: + +

Sort by weighted average rating based on votes (Must go = 2 points, Interested = 1 point, Won't go = -1 point)

@@ -119,10 +125,12 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
- +
- Most Popular: -

+ + Most Popular: + +

Sort by weighted popularity score (Must go = 2 points, Interested = 1 point)

@@ -130,10 +138,10 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
- +
- By Date: -

+ By Date: +

Sort by estimated performance date (earliest performances first)

diff --git a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx index 916e3637..4e28a64f 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx @@ -26,8 +26,8 @@ export function TimeFormatToggle({ onClick={() => onChange(!use24Hour)} className={`flex items-center gap-2 ${ use24Hour - ? "bg-purple-600/50 text-purple-100 hover:bg-purple-600/60" - : "text-purple-300 hover:text-purple-100" + ? "bg-accent-soft text-foreground hover:bg-accent-soft" + : "text-subtle-foreground hover:text-foreground" }`} > diff --git a/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx index cb4ca474..8b8f493d 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx @@ -21,12 +21,12 @@ export function VotePerspectiveToggle({ onScopeChange(value); } }} - className="rounded-md border border-purple-400/30 p-0.5" + className="rounded-md border p-0.5" > Everyone @@ -34,7 +34,7 @@ export function VotePerspectiveToggle({ {groupName} diff --git a/src/pages/ExploreSetPage/ExplorationProgress.tsx b/src/pages/ExploreSetPage/ExplorationProgress.tsx index 90271332..264ee7f0 100644 --- a/src/pages/ExploreSetPage/ExplorationProgress.tsx +++ b/src/pages/ExploreSetPage/ExplorationProgress.tsx @@ -13,11 +13,11 @@ export function ExplorationProgress({ return (
- + {current} of {total}
- +
); diff --git a/src/pages/ExploreSetPage/SetExploreCard.tsx b/src/pages/ExploreSetPage/SetExploreCard.tsx index f09916bf..f54d6c92 100644 --- a/src/pages/ExploreSetPage/SetExploreCard.tsx +++ b/src/pages/ExploreSetPage/SetExploreCard.tsx @@ -63,7 +63,7 @@ export function SetExploreCard({ )} {/* Content */} -
+
{/* Header Info */} -

+

Swipe or tap buttons to vote

diff --git a/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx b/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx index c8a652f5..9da19732 100644 --- a/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx +++ b/src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx @@ -14,7 +14,7 @@ export function PrimaryArtistDisplay({ }: PrimaryArtistDisplayProps) { return (
-
+
{artist.image_url ? ( ) : (
- +
)}
diff --git a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx index e67a56b8..7d16e0c2 100644 --- a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx +++ b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx @@ -40,7 +40,7 @@ export function SetCardHeader({ stageId, timeStart }: SetCardHeaderProps) { {dateLabel && ( {dateLabel} diff --git a/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx b/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx index 9d4288ca..f0f426d7 100644 --- a/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx +++ b/src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx @@ -29,7 +29,7 @@ export function SoundCloudBadge({ } return ( -
+
-

+

{artists.length === 1 ? "With" : "With"}

@@ -24,7 +24,7 @@ export function SupportingArtists({ artists }: SupportingArtistsProps) { {artist.name} @@ -32,7 +32,7 @@ export function SupportingArtists({ artists }: SupportingArtistsProps) { {artists.length > 3 && ( +{artists.length - 3} more diff --git a/src/pages/ExploreSetPage/VotingActions.tsx b/src/pages/ExploreSetPage/VotingActions.tsx index 833bce77..096089dc 100644 --- a/src/pages/ExploreSetPage/VotingActions.tsx +++ b/src/pages/ExploreSetPage/VotingActions.tsx @@ -46,8 +46,8 @@ export function VotingActions({ variant="outline" className={`h-16 w-16 rounded-full transition-all duration-100 ${ isLeftDrag - ? `bg-gray-500 border-gray-500 text-white shadow-lg` - : "border-gray-500 hover:bg-gray-500 hover:border-gray-500 text-gray-500 hover:text-white" + ? `bg-vote-skip border-vote-skip text-foreground shadow-lg` + : "border-vote-skip hover:bg-vote-skip hover:border-vote-skip text-vote-skip hover:text-foreground" }`} onClick={() => onVote(wontGoConfig.value)} > @@ -59,7 +59,7 @@ export function VotingActions({ @@ -39,24 +39,28 @@ export function ProgressInfoTooltip({

Progress Details

- Already voted: + + Already voted: + {votedCount}
- Skipped: + Skipped: {skippedCount}
- No SoundCloud: + + No SoundCloud: + {nonExplorableCount}
- Current: + Current: {current}
- Total: + Total: {total}
diff --git a/src/pages/SetDetails/IndividualArtistCard.tsx b/src/pages/SetDetails/IndividualArtistCard.tsx index 7b9c7d84..d2d5f815 100644 --- a/src/pages/SetDetails/IndividualArtistCard.tsx +++ b/src/pages/SetDetails/IndividualArtistCard.tsx @@ -17,7 +17,7 @@ export function IndividualArtistCard({ showFullDetails = false, }: IndividualArtistCardProps) { return ( - + {/* Artist Image */}
- + {artist.name} @@ -48,7 +48,7 @@ export function IndividualArtistCard({ artist.artist_music_genres.length > 2 && ( +{artist.artist_music_genres.length - 2} @@ -62,7 +62,7 @@ export function IndividualArtistCard({
)} diff --git a/src/pages/SetDetails/MixedArtistImage.tsx b/src/pages/SetDetails/MixedArtistImage.tsx index 01117f73..2fa8d014 100644 --- a/src/pages/SetDetails/MixedArtistImage.tsx +++ b/src/pages/SetDetails/MixedArtistImage.tsx @@ -20,7 +20,7 @@ export function MixedArtistImage({
-
+
🎵
{/*
{setName}
*/}
@@ -128,7 +128,7 @@ export function MixedArtistImage({ {/* Show count overlay on last image if more than 4 */} {index === 3 && artistsWithImages.length > 4 && (
-
+
+{artistsWithImages.length - 4}
diff --git a/src/pages/SetDetails/MultiArtistSetInfoCard.tsx b/src/pages/SetDetails/MultiArtistSetInfoCard.tsx index 200fccfb..238e3df3 100644 --- a/src/pages/SetDetails/MultiArtistSetInfoCard.tsx +++ b/src/pages/SetDetails/MultiArtistSetInfoCard.tsx @@ -57,19 +57,19 @@ export function MultiArtistSetInfoCard({ return (
{/* Main Set Info Card */} - +
- + {set.name} {/* Set Summary */}
- - + + {set.artists.length} Artists
@@ -99,7 +99,7 @@ export function MultiArtistSetInfoCard({
{/* Performance Information */} -
+
{canShowStage && } {timeRangeFormatted && (
@@ -120,7 +120,7 @@ export function MultiArtistSetInfoCard({
{set.description && ( - + -

+

Artists in this Set

diff --git a/src/pages/SetDetails/SetGroupVoting.tsx b/src/pages/SetDetails/SetGroupVoting.tsx index fa2b48d3..7429b130 100644 --- a/src/pages/SetDetails/SetGroupVoting.tsx +++ b/src/pages/SetDetails/SetGroupVoting.tsx @@ -54,25 +54,25 @@ function SetGroupVotingContent({ const activeGroup = groups.find((g) => g.id === activeGroupId); return ( - + - + Group Voting {activeGroup && ( -

+

How {activeGroup.name} voted on this artist

)} {loading ? ( -
+
Loading votes...
) : groupVotes.length === 0 ? ( -
+
No one in this group has voted on this artist yet.
) : ( @@ -110,7 +110,7 @@ function SetGroupVotingContent({ {/* Individual Votes */}
-

+

Individual Votes:

{groupVotes.map((vote) => { @@ -119,9 +119,9 @@ function SetGroupVotingContent({ return (
- + {vote.username || "Unknown User"} - + - +
- + {set.name}
@@ -78,7 +78,7 @@ export function SetInfoCard({
{/* Performance Information */} -
+
{canShowStage && } {timeRangeFormatted && (
@@ -99,7 +99,7 @@ export function SetInfoCard({
{(set.description || artist.description) && ( - + + - + Group Notes - + Sign in to add notes and see notes from group members @@ -40,15 +40,15 @@ export function SetNotes({ setId, userId }: SetNotesProps) { } return ( - +
- + Group Notes - + Notes from you and group members about this artist
@@ -77,10 +77,10 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
)} -
+
)}
-
+
{note.note_content}
-
+
{new Date(note.updated_at).toLocaleDateString()}
From bb7684995a3c52becb6d36ab7384cb82808ed94f Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 23 Aug 2026 07:08:14 +0000 Subject: [PATCH 2/9] fix(edition): re-apply token scope in portaled content, restore hovers (#358) Portaled Select/Popover content escapes .edition-view, so bg-popover resolved to the light root tokens. Re-apply the scope class on portaled content and restore literal hover shades flattened by tokenization. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn --- .../EditionView/tabs/VoteTab/filters/DesktopFilters.tsx | 2 +- .../EditionView/tabs/VoteTab/filters/MobileFilters.tsx | 6 +++--- src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx | 4 ++-- src/pages/SetDetails/SetNotes.tsx | 2 +- src/pages/SetDetails/notes/CreateNoteForm.tsx | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx index f6dba75b..02fbf5f4 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx @@ -58,7 +58,7 @@ export function DesktopFilters({ onClick={() => handleStageToggle(stage.id)} className={ state.stages.includes(stage.id) - ? "bg-accent hover:bg-accent" + ? "bg-accent hover:bg-purple-700" : "border-purple-400 text-accent hover:bg-purple-400 hover:text-foreground" } > diff --git a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx index 5db3aef7..f48b3f07 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx @@ -57,7 +57,7 @@ export function MobileFilters({ - + All Stages @@ -97,7 +97,7 @@ export function MobileFilters({ - + All Genres @@ -128,7 +128,7 @@ export function MobileFilters({ - + Any Rating diff --git a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx index 8c61eee3..b3694264 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx @@ -51,7 +51,7 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) {
- + {SORT_OPTIONS.map((option) => { const Icon = SORT_ICONS[option.value as keyof typeof SORT_ICONS]; return ( @@ -80,7 +80,7 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) { - +

Sort Options Explained diff --git a/src/pages/SetDetails/SetNotes.tsx b/src/pages/SetDetails/SetNotes.tsx index 0e8922e1..3a681ff9 100644 --- a/src/pages/SetDetails/SetNotes.tsx +++ b/src/pages/SetDetails/SetNotes.tsx @@ -80,7 +80,7 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
- + {SORT_OPTIONS.map((option) => { const Icon = SORT_ICONS[option.value as keyof typeof SORT_ICONS]; return ( @@ -80,7 +80,7 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) { - +

Sort Options Explained From 734cbee7e24eef06f2682dcec2b5c6ffafee4494 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 07:37:11 +0000 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20address=20review=20feedback=20?= =?UTF-8?q?=E2=80=94=20replace=20color=20literals=20with=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - hover:bg-purple-700 -> hover:bg-accent-hover (SetNotes, CreateNoteForm, DesktopFilters) - outline buttons: border/text/hover purple-400 literals -> ring token (restores purple-400 text parity) - delete note button: destructive tokens with readable hover contrast - ProgressInfoTooltip: popover tokens + actual border class - SortControls: hover:text-muted-foreground - SocialPlatformLink: hover:bg-foreground/30 Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn --- .../EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx | 2 +- src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx | 4 ++-- .../EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx | 2 +- src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx | 2 +- src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx | 4 ++-- src/pages/SetDetails/SetNotes.tsx | 2 +- src/pages/SetDetails/notes/CreateNoteForm.tsx | 4 ++-- src/pages/SetDetails/notes/SetNoteItem.tsx | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx index 29b932bb..58a6ad5b 100644 --- a/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx +++ b/src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx @@ -26,7 +26,7 @@ export function SocialPlatformLink({ asChild variant="secondary" size="sm" - className={`p-1 ${buttonSize} bg-surface-active hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`} + className={`p-1 ${buttonSize} bg-surface-active hover:bg-foreground/30 backdrop-blur-sm border-0 ${platformInfo.color}`} title={`Open ${artistName} in ${platformInfo.platform}`} > diff --git a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx index 02fbf5f4..c3104483 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx @@ -58,8 +58,8 @@ export function DesktopFilters({ onClick={() => handleStageToggle(stage.id)} className={ state.stages.includes(stage.id) - ? "bg-accent hover:bg-purple-700" - : "border-purple-400 text-accent hover:bg-purple-400 hover:text-foreground" + ? "bg-accent hover:bg-accent-hover" + : "border-ring text-ring hover:bg-ring hover:text-foreground" } > {stage.name} diff --git a/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx index 14e3800d..0d3267dc 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx @@ -43,7 +43,7 @@ export function FestivalModeToggle({ onModeChange }: FestivalModeToggleProps) { className={ isFestivalMode ? "bg-orange-600 hover:bg-orange-700 text-foreground border-orange-600" - : "border-purple-400 text-accent hover:bg-purple-400 hover:text-foreground" + : "border-ring text-ring hover:bg-ring hover:text-foreground" } > {isFestivalMode ? ( diff --git a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx index 8c61eee3..54193dab 100644 --- a/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx +++ b/src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx @@ -77,7 +77,7 @@ export function SortControls({ sort, onSortChange }: SortControlsProps) { className="p-1 hover:bg-surface-raised rounded transition-colors hidden sm:block" title="Click for sorting help" > - + diff --git a/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx b/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx index 6dd9f093..1f532b2b 100644 --- a/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx +++ b/src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx @@ -31,7 +31,7 @@ export function ProgressInfoTooltip({ @@ -54,7 +54,7 @@ export function ProgressInfoTooltip({ {nonExplorableCount}

-
+
Current: {current} diff --git a/src/pages/SetDetails/SetNotes.tsx b/src/pages/SetDetails/SetNotes.tsx index 3a681ff9..c184be66 100644 --- a/src/pages/SetDetails/SetNotes.tsx +++ b/src/pages/SetDetails/SetNotes.tsx @@ -80,7 +80,7 @@ export function SetNotes({ setId, userId }: SetNotesProps) {
- - {isFestivalMode && ( - - Live - - )} -
- - - - - - -
-

- Festival Mode: Timeline view recommended for live - schedule tracking -

-

- Planning Mode: Artists list with sorting for - pre-festival planning -

-
- - -
- ); -} From dace00ad6cd3d3f37a1704c4b42681a59dd41ec7 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 18:19:59 +0000 Subject: [PATCH 8/9] fix: use paper-muted-foreground in cookie consent UI so text is readable on white Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn --- src/components/layout/legal/CookieConsentBanner.tsx | 4 ++-- src/components/layout/legal/CookiePreferencesDialog.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/layout/legal/CookieConsentBanner.tsx b/src/components/layout/legal/CookieConsentBanner.tsx index fb0502fa..c8d040a6 100644 --- a/src/components/layout/legal/CookieConsentBanner.tsx +++ b/src/components/layout/legal/CookieConsentBanner.tsx @@ -18,12 +18,12 @@ export function CookieConsentBanner() {

Cookie Consent

-

+

We use essential cookies to make our app work properly and remember your preferences like sidebar state. We respect your privacy and don't use any tracking or analytics cookies.

-

+

By clicking "Accept", you agree to our use of essential cookies. Learn more in our{" "} diff --git a/src/components/layout/legal/CookiePreferencesDialog.tsx b/src/components/layout/legal/CookiePreferencesDialog.tsx index 5458aab7..01aabe1c 100644 --- a/src/components/layout/legal/CookiePreferencesDialog.tsx +++ b/src/components/layout/legal/CookiePreferencesDialog.tsx @@ -76,14 +76,14 @@ export function CookiePreferencesDialog({ Cookie Preferences - + Manage your cookie settings and privacy preferences. You can control which types of cookies are stored on your device.

-

+

Manage your cookie preferences below. You can change these settings at any time.

@@ -96,7 +96,7 @@ export function CookiePreferencesDialog({ >

{category.title}

-

+

{category.description}

From 32f2adb32562cf174885cb6c759d6f41a75f1dae Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 18:31:16 +0000 Subject: [PATCH 9/9] fix: readable accent text token, note date format, remove unused TimeFormatToggle - Add --accent-soft-foreground (purple-400) token for accent-tinted text/icons readable on dark surfaces; use it for the note date and empty-state icons - Format the note date via new formatDateOnly util in timeUtils - Tokenize the explore set date badge (bg-purple-600/80 -> bg-accent/80) - Remove unused TimeFormatToggle component Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn --- src/index.css | 1 + src/lib/timeUtils.ts | 12 +++++ .../tabs/VoteTab/EmptyArtistsState.tsx | 8 ++-- .../tabs/VoteTab/filters/TimeFormatToggle.tsx | 45 ------------------- .../SetExploreCard/SetCardHeader.tsx | 2 +- src/pages/SetDetails/notes/SetNoteItem.tsx | 5 ++- tailwind.config.ts | 1 + 7 files changed, 22 insertions(+), 52 deletions(-) delete mode 100644 src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx diff --git a/src/index.css b/src/index.css index 7e14efd0..fc8a62c0 100644 --- a/src/index.css +++ b/src/index.css @@ -47,6 +47,7 @@ --accent-foreground: 0 0% 100%; --accent-hover: 272.1 71.7% 47.1%; /* purple-700 */ --accent-soft: 271.5 81.3% 55.9% / 0.4; /* bg-purple-600/40 */ + --accent-soft-foreground: 270 95.2% 75.3%; /* purple-400 */ --destructive: 0 90.6% 70.8%; /* red-400 */ --destructive-foreground: 221 39% 11%; /* gray-900 — red-400 is too light for a white foreground */ diff --git a/src/lib/timeUtils.ts b/src/lib/timeUtils.ts index f17d83bf..bddbd6d7 100644 --- a/src/lib/timeUtils.ts +++ b/src/lib/timeUtils.ts @@ -166,6 +166,18 @@ export function combineDateAndTime( return `${datePart} ${timePart}`; } +export function formatDateOnly( + dateTime: string | null, + timezone?: string, +): string | null { + if (!dateTime) return null; + const date = parseISO(dateTime); + if (!isValid(date)) return null; + const dateFormat = "MMM d, yyyy"; + if (timezone) return formatInTimeZone(date, timezone, dateFormat); + return format(date, dateFormat); +} + export function formatDayOnly( dateTime: string | null, timezone?: string, diff --git a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx index 2deb3cde..95e2f4c4 100644 --- a/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx +++ b/src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx @@ -14,7 +14,7 @@ export function EmptyArtistsState() {
- +
@@ -28,15 +28,15 @@ export function EmptyArtistsState() {
- + Connect with fellow festival-goers
- + Discover new electronic artists
- + Vote for your favorites
diff --git a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx b/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx deleted file mode 100644 index 4e28a64f..00000000 --- a/src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Clock } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; - -interface TimeFormatToggleProps { - use24Hour: boolean; - onChange: (use24Hour: boolean) => void; -} - -export function TimeFormatToggle({ - use24Hour, - onChange, -}: TimeFormatToggleProps) { - return ( - - - - - - -

Switch to {use24Hour ? "12-hour" : "24-hour"} time format

- - - - ); -} diff --git a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx index 7d16e0c2..d0ae1d43 100644 --- a/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx +++ b/src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx @@ -40,7 +40,7 @@ export function SetCardHeader({ stageId, timeStart }: SetCardHeaderProps) { {dateLabel && ( {dateLabel} diff --git a/src/pages/SetDetails/notes/SetNoteItem.tsx b/src/pages/SetDetails/notes/SetNoteItem.tsx index 40f73835..c7249078 100644 --- a/src/pages/SetDetails/notes/SetNoteItem.tsx +++ b/src/pages/SetDetails/notes/SetNoteItem.tsx @@ -3,6 +3,7 @@ import { confirm } from "@/hooks/use-confirm"; import { SetNote } from "@/api/artist-notes/types"; import { useDeleteNoteMutation } from "@/api/artist-notes/useDeleteNoteMutation"; import { Trash2Icon } from "lucide-react"; +import { formatDateOnly } from "@/lib/timeUtils"; export function SetNoteItem({ isOwn, @@ -34,8 +35,8 @@ export function SetNoteItem({
{note.note_content}
-
- {new Date(note.updated_at).toLocaleDateString()} +
+ {formatDateOnly(note.updated_at)}
); diff --git a/tailwind.config.ts b/tailwind.config.ts index a6448ada..507f4bf8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -84,6 +84,7 @@ export default { foreground: "hsl(var(--accent-foreground))", hover: "hsl(var(--accent-hover))", soft: "hsl(var(--accent-soft))", + "soft-foreground": "hsl(var(--accent-soft-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))",