This repository was archived by the owner on May 25, 2026. It is now read-only.
style: anchor pink to the line nearest the hero - #73
Merged
Conversation
The login screen sets the canonical hierarchy: white setup line on top,
pink emphasis line below. The picker, success, error, and logged-out
screens were doing the opposite — pink heading on top, near-white body
below — which broke visual continuity on every state transition.
Swap on the four affected surfaces:
* logged-out: paragraph base goes to text-foreground; the Spotify-
revocation line (with its embedded link) now carries the pink
text-brand strong wrapper.
* picker landing ("Pick a playlist."): h1 to text-foreground, body
paragraph to text-brand.
* success ("Done."): same flip. The inner playlist-name <strong>
keeps text-foreground so the data still pops against the new pink
body.
* picker error states (session / network / rate-limit / generic):
same flip on the shared h1 + body block.
Rule clarified during preview review: the text directly above the
vinyl hero is always pink — that's the role the h1 plays on these
three views ("Pick a playlist." / "Shuffling…" / "Saving…" / "Done."
/ error lead).
Login and logged-out still match the rule via the bottom line of
their two-line paragraph; the previous commit only needed to flip
that case.
Refined the rule one more pass during preview review: the line of text directly above the vinyl hero is always pink. On views with two lines above the hero (picker landing "Pick a playlist." + body, success "Done." + body, error lead + body), pink belongs to the body paragraph — it's the closer line — and the h1 above it goes white. On views with one line (shuffle/save phases of the picker, where the body paragraph hides), the h1 *is* the closest line, so it takes pink itself. Picker.tsx h1 now reads its colour off `shuffling === null`: paragraph showing → h1 white; paragraph hidden → h1 pink. Success and error views always have both, so they go h1-white / body-pink unconditionally. Logged-out + login already match the rule via their two-line paragraph.
3 tasks
ivorycrayon
added a commit
that referenced
this pull request
May 24, 2026
Follow-up to #73. The Success view's body p was pink-lead-in / white-playlist-name; flip to white-lead-in / pink-playlist-name so the pink lands on what the user actually came here for (the new playlist's name) instead of the "Your new playlist is in your Spotify library. Look for…" scaffolding. Parent p moves from text-brand to text-foreground; the inner playlist-name strong moves from text-foreground to text-brand. The trailing period inherits the parent's white, which is fine — a period in a different colour from the name preceding it isn't worth a span.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Across shuffleify the visual rule is: among the lines sitting above the vinyl hero, the one closest to the hero is pink; the rest are foreground white. The hero stays the anchor and the pink line reads as the punchline directly above it. Login already matches via its two-line paragraph. Logged-out, the picker landing, the success view, and the error views were inverted (pink h1 on top, zinc-300 body below), which broke the continuity on every transition.
<strong>(with embedded link) now carriestext-brandon the second line.text-foreground, body p totext-brand. The inner playlist-name<strong>keepstext-foregroundso the data still pops against the pink body.No logic or layout changes — Tailwind colour swaps plus one conditional className in
Picker.tsx.Test plan
pnpm typecheckcleanpnpm test— 127 / 127 passing?demo=loggedin), and the four error variants (?demo=error-session|network|rate-limit|generic).