From 043a2523ad36b70c08c618fc514e435acf9b430e Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Thu, 16 Jul 2026 22:44:51 +0200
Subject: [PATCH] fix(frontend): restyle the track context menu to match the
 app's design tokens

Replaced the ad-hoc neutral-900/white-10 Tailwind palette with the same --mf-elevated/--mf-border/--mf-text-2 tokens and rounded-xl/shadow recipe the sidebar's own dropdown already uses, so the menu no longer looks foreign to the rest of the app.
---
 frontend/src/routes/(app)/explore/+page.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/routes/(app)/explore/+page.svelte b/frontend/src/routes/(app)/explore/+page.svelte
index 6e31dab..8c42471 100644
--- a/frontend/src/routes/(app)/explore/+page.svelte
+++ b/frontend/src/routes/(app)/explore/+page.svelte
@@ -389,31 +389,31 @@
 		}}
 	></div>
 	<div
-		class="fixed z-40 w-56 rounded-2xl border border-white/10 bg-neutral-900 p-1.5 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.8)]"
+		class="fixed z-40 w-60 overflow-hidden rounded-xl border border-[var(--mf-border)] bg-[var(--mf-elevated)] py-1.5 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)]"
 		style="left:{contextMenu.x}px; top:{contextMenu.y}px;"
 	>
 		<button
 			type="button"
 			onclick={() => addToQueue(contextMenu)}
-			class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-base text-neutral-200 transition hover:bg-white/5"
+			class="flex w-full items-center gap-3 px-3 py-2.5 text-left text-sm font-semibold text-[var(--mf-text-2)] transition hover:bg-white/5"
 		>
-			<ListPlus class="h-4 w-4 shrink-0 text-neutral-500" />
+			<ListPlus class="h-[18px] w-[18px] shrink-0" strokeWidth={2} />
 			<span>Añadir a la cola</span>
 		</button>
 		<div class="group/addmenu relative">
 			<div
-				class="flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-base text-neutral-200 transition group-hover/addmenu:bg-white/5"
+				class="flex items-center justify-between gap-3 px-3 py-2.5 text-sm font-semibold text-[var(--mf-text-2)] transition group-hover/addmenu:bg-white/5"
 			>
 				<span>Añadir a una playlist</span>
-				<ChevronRight class="h-4 w-4 shrink-0 text-neutral-500" />
+				<ChevronRight class="h-4 w-4 shrink-0 text-[var(--mf-text-3)]" />
 			</div>
 			<div
 				class="invisible absolute top-0 z-50 opacity-0 transition group-hover/addmenu:visible group-hover/addmenu:opacity-100 {contextMenu.openLeft
-					? 'right-full pr-1'
-					: 'left-full pl-1'}"
+					? 'right-full pr-1.5'
+					: 'left-full pl-1.5'}"
 			>
 				<div
-					class="w-64 rounded-2xl border border-white/10 bg-neutral-900 p-3 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.8)]"
+					class="w-64 overflow-hidden rounded-xl border border-[var(--mf-border)] bg-[var(--mf-elevated)] p-2 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.6)]"
 				>
 					<div class="max-h-80 overflow-y-auto">
 						{#each data.playlists as playlist (playlist.id)}
@@ -438,7 +438,7 @@
 								{/if}
 								<button
 									type="submit"
-									class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left text-base text-neutral-200 transition hover:bg-white/5"
+									class="flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base text-[var(--mf-text)] transition hover:bg-white/5"
 								>
 									<PlaylistArt
 										playlistId={playlist.id}