fix(palette): 2-stop gradient on phone layouts — secondary → theme bg

Drop the vibrant primary from the rendered gradient across MiniPlayer,
player-view, album/artist/playlist-detail, and ExpandedPlayerView. The
3-stop bi-tone read as too busy on smaller screens. `primary` still
extracts and is returned from `useImagePalette` for future tablet/
landscape layouts with more room.

Author: ghenry22

src/components/ExpandedPlayerView.tsx

@@ -120,14 +120,16 @@ export function ExpandedPlayerView({
   const { primary, secondary, gradientOpacity: extractedGradientOpacity } =
     useImagePalette(currentTrack?.coverArt);
 
-  // 3-stop diagonal gradient: extracted primary → extracted secondary (if any)
-  // → a slightly-darkened theme background so the moodier "expanded player"
-  // feel is preserved while the extracted colours dominate the hero area.
+  // 2-stop diagonal gradient: extracted secondary (prefer) → a
+  // slightly-darkened theme background. We drop the more-vibrant
+  // `primary` from the render and use `secondary` as the calmer top
+  // colour so the two extracted hues don't fight with each other
+  // across the large hero area. `primary` still extracts and is
+  // available in the hook for future bi-tone tablet layouts.
   const backgroundEnd = mixHexColors(colors.background, '#000000', 0.15);
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [primary ?? colors.background, secondary, backgroundEnd]
-    : [primary ?? colors.background, backgroundEnd];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.3, 0.6] : [0, 0.6];
+  const gradientTopColor = secondary ?? primary ?? colors.background;
+  const gradientColors: readonly [string, string, ...string[]] = [gradientTopColor, backgroundEnd];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 0.6];
 
   // Right panel mode: queue (default), lyrics placeholder, or album info
   const [rightPanelMode, setRightPanelMode] = useState<'queue' | 'lyrics' | 'info'>('queue');

src/components/MiniPlayer.tsx

@@ -79,15 +79,19 @@ export function MiniPlayer() {
     return `${hex}${a}`;
   };
 
-  // 3-stop vertical gradient: extracted primary at top → extracted
-  // secondary (if any) in the middle → theme background at the bottom.
-  // Preserves the previous "fade into tab bar" look while adding the
-  // secondary colour as a mid-stop for more visual depth.
-  const topColor = queueLoading ? PLACEHOLDER_BG : (primary ?? colors.card);
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [withAlpha(topColor, 0.65), withAlpha(secondary, 0.65), withAlpha(colors.background, 0.65)]
-    : [withAlpha(topColor, 0.65), withAlpha(colors.background, 0.65)];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.5, 1] : [0, 1];
+  // 2-stop vertical gradient: extracted secondary (prefer) → theme
+  // background. On smaller screens the richer 3-stop bi-tone read as
+  // too busy over the mini player, so we drop the more-vibrant `primary`
+  // from the render and use `secondary` (the most-common hue distinct
+  // from primary) as the calmer top colour. `primary` still extracts
+  // and is available in the hook for future tablet/landscape layouts.
+  const extractedTop = secondary ?? primary ?? colors.card;
+  const topColor = queueLoading ? PLACEHOLDER_BG : extractedTop;
+  const gradientColors: readonly [string, string, ...string[]] = [
+    withAlpha(topColor, 0.65),
+    withAlpha(colors.background, 0.65),
+  ];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 1];
 
   return (
     <View style={[styles.container, { backgroundColor: withAlpha(colors.card, 0.65) }]}>

src/screens/album-detail.tsx

@@ -335,13 +335,15 @@ export function AlbumDetailScreen() {
     [colors.textPrimary, colors.textSecondary, t],
   );
 
-  // 3-stop gradient: extracted primary → extracted secondary (if any) →
-  // theme background at the bottom. Keeps the dark/light theme colour at
-  // the bottom of the hero area while using both extracted colours up top.
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [primary ?? colors.background, secondary, colors.background]
-    : [primary ?? colors.background, colors.background];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.25, 0.5] : [0, 0.5];
+  // 2-stop gradient: extracted secondary (prefer) → theme background.
+  // On smaller screens the richer 3-stop bi-tone read as too busy over
+  // the hero, so we drop the more-vibrant `primary` from the render and
+  // use `secondary` (the most-common hue distinct from primary) as the
+  // calmer top colour. `primary` still extracts and is available in the
+  // hook for future tablet/landscape layouts with more room.
+  const gradientTopColor = secondary ?? primary ?? colors.background;
+  const gradientColors: readonly [string, string, ...string[]] = [gradientTopColor, colors.background];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 0.5];
 
   const gradientAnimatedStyle = useAnimatedStyle(() => ({
     opacity: gradientOpacity.value,

src/screens/artist-detail.tsx

@@ -199,13 +199,15 @@ export function ArtistDetailScreen() {
   const onRefresh = useCallback(() => fetchData(true), [fetchData]);
 
   /* ---- Derived values ---- */
-  // 3-stop gradient: extracted primary → extracted secondary (if any) →
-  // theme background at the bottom. Keeps the dark/light theme colour at
-  // the bottom of the hero area while using both extracted colours up top.
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [primary ?? colors.background, secondary, colors.background]
-    : [primary ?? colors.background, colors.background];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.25, 0.5] : [0, 0.5];
+  // 2-stop gradient: extracted secondary (prefer) → theme background.
+  // On smaller screens the richer 3-stop bi-tone read as too busy over
+  // the hero, so we drop the more-vibrant `primary` from the render and
+  // use `secondary` (the most-common hue distinct from primary) as the
+  // calmer top colour. `primary` still extracts and is available in the
+  // hook for future tablet/landscape layouts with more room.
+  const gradientTopColor = secondary ?? primary ?? colors.background;
+  const gradientColors: readonly [string, string, ...string[]] = [gradientTopColor, colors.background];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 0.5];
 
   const gradientAnimatedStyle = useAnimatedStyle(() => ({
     opacity: gradientOpacity.value,

src/screens/player-view.tsx

@@ -121,13 +121,15 @@ export function PlayerView() {
 
   const { primary, secondary, gradientOpacity } = useImagePalette(currentTrack?.coverArt);
 
-  // 3-stop gradient: extracted primary → extracted secondary (if any) →
-  // theme background. Keeps the dark/light theme background at the bottom
-  // while letting the two extracted colours colour the top portion.
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [primary ?? colors.background, secondary, colors.background]
-    : [primary ?? colors.background, colors.background];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.3, 0.6] : [0, 0.6];
+  // 2-stop gradient: extracted secondary (prefer) → theme background. We
+  // drop the more-vibrant `primary` from the render here because on small
+  // phone screens it reads as too busy over the hero — `secondary` (the
+  // most-common hue distinct from primary) is calmer. `primary` still
+  // extracts and is available in the hook for future tablet/landscape
+  // layouts that have more room for the richer bi-tone.
+  const gradientTopColor = secondary ?? primary ?? colors.background;
+  const gradientColors: readonly [string, string, ...string[]] = [gradientTopColor, colors.background];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 0.6];
 
   const offlineMode = offlineModeStore((s) => s.offlineMode);
 

src/screens/playlist-detail.tsx

@@ -469,13 +469,15 @@ export function PlaylistDetailScreen() {
     [colors.textPrimary, colors.textSecondary, t],
   );
 
-  // 3-stop gradient: extracted primary → extracted secondary (if any) →
-  // theme background at the bottom. Keeps the dark/light theme colour at
-  // the bottom of the hero area while using both extracted colours up top.
-  const gradientColors: readonly [string, string, ...string[]] = secondary
-    ? [primary ?? colors.background, secondary, colors.background]
-    : [primary ?? colors.background, colors.background];
-  const gradientLocations: readonly [number, number, ...number[]] = secondary ? [0, 0.25, 0.5] : [0, 0.5];
+  // 2-stop gradient: extracted secondary (prefer) → theme background.
+  // On smaller screens the richer 3-stop bi-tone read as too busy over
+  // the hero, so we drop the more-vibrant `primary` from the render and
+  // use `secondary` (the most-common hue distinct from primary) as the
+  // calmer top colour. `primary` still extracts and is available in the
+  // hook for future tablet/landscape layouts with more room.
+  const gradientTopColor = secondary ?? primary ?? colors.background;
+  const gradientColors: readonly [string, string, ...string[]] = [gradientTopColor, colors.background];
+  const gradientLocations: readonly [number, number, ...number[]] = [0, 0.5];
 
   const gradientAnimatedStyle = useAnimatedStyle(() => ({
     opacity: gradientOpacity.value,