NotS1mp/Musify
0
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): restyle the track context menu to match the app's design tokens

Browse Source 
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.
This commit is contained in:
Admin
2026-07-16 22:44:51 +02:00
parent 7532511e1f
commit 7be5d22cb7
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/(app)/explore/+page.svelte
+9 -9
View File
@@ -389,31 +389,31 @@
}} }}
></div> ></div>
<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;" style="left:{contextMenu.x}px; top:{contextMenu.y}px;"
> >
<button <button
type="button" type="button"
onclick={() => addToQueue(contextMenu)} 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> <span>Añadir a la cola</span>
</button> </button>
<div class="group/addmenu relative"> <div class="group/addmenu relative">
<div <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> <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>
<div <div
class="invisible absolute top-0 z-50 opacity-0 transition group-hover/addmenu:visible group-hover/addmenu:opacity-100 {contextMenu.openLeft 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' ? 'right-full pr-1.5'
: 'left-full pl-1'}" : 'left-full pl-1.5'}"
> >
<div <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"> <div class="max-h-80 overflow-y-auto">
{#each data.playlists as playlist (playlist.id)} {#each data.playlists as playlist (playlist.id)}
@@ -438,7 +438,7 @@
{/if} {/if}
<button <button
type="submit" 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 <PlaylistArt
playlistId={playlist.id} playlistId={playlist.id}