Changes on the design

This commit is contained in:
2026-09-22 17:10:26 +02:00
parent c93f3d352c
commit 9064ef687c
7 changed files with 11 additions and 40 deletions
@@ -2,10 +2,6 @@
import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
import X from '@lucide/svelte/icons/x';
import Plus from '@lucide/svelte/icons/plus';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import SquarePencil from '@lucide/svelte/icons/square-pen';
import Trash from '@lucide/svelte/icons/trash';
import Page from '$lib/components/ui/layout/Page.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
import Modal from '$lib/components/ui/overlay/Modal.svelte';
@@ -76,20 +72,16 @@
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
{#if isOwner}
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
<SquarePencil class="size-4" strokeWidth={1.5} />
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
<Trash class="size-4" strokeWidth={1.5} />
Eliminar
</Button>
{/if}
@@ -1,6 +1,4 @@
<script lang="ts">
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import Shuffle from '@lucide/svelte/icons/shuffle';
import {
player,
@@ -75,10 +73,8 @@
{#snippet actions()}
<Button size="sm" onclick={() => playAllOrToggle(queue)} disabled={queue.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
@@ -1,10 +1,6 @@
<script lang="ts">
import ListMusic from '@lucide/svelte/icons/list-music';
import X from '@lucide/svelte/icons/x';
import Play from '@lucide/svelte/icons/play';
import Pause from '@lucide/svelte/icons/pause';
import SquarePencil from '@lucide/svelte/icons/square-pen';
import Trash from '@lucide/svelte/icons/trash';
import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
import Page from '$lib/components/ui/layout/Page.svelte';
import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
@@ -66,19 +62,15 @@
{#snippet actions()}
<Button size="sm" onclick={playAll} disabled={tracks.length === 0}>
{#if isCurrentQueue && player.playing}
<Pause class="size-4" strokeWidth={1.5} />
Pausar
{:else}
<Play class="size-4" strokeWidth={1.5} />
Reproducir
{/if}
</Button>
<Button size="sm" variant="secondary" onclick={() => (editing = true)}>
<SquarePencil class="size-4" strokeWidth={1.5} />
Editar
</Button>
<Button size="sm" variant="secondary" onclick={() => (confirmingDelete = true)}>
<Trash class="size-4" strokeWidth={1.5} />
Eliminar
</Button>
{/snippet}
+4 -4
View File
@@ -151,12 +151,12 @@
</p>
<div class="mt-6.5 flex flex-wrap items-center gap-2.5">
{#if spotlight}
<Button variant="strong" onclick={playSpotlight}>
<Button variant="primary" onclick={playSpotlight}>
{heroPlaying ? 'Pausar' : 'Reanudar'}
{spotlight.name}
</Button>
{/if}
<Button href="/explore" variant="glass">Explorar música</Button>
<Button href="/explore" variant="secondary">Explorar música</Button>
</div>
</div>
@@ -242,7 +242,7 @@
</p>
<div class="mt-5 flex gap-2.5">
<Button variant="accent" onclick={playSpotlight}>Reproducir</Button>
<Button variant="glass" onclick={shuffleSpotlight}>Aleatorio</Button>
<Button variant="secondary" onclick={shuffleSpotlight}>Aleatorio</Button>
</div>
</div>
<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
@@ -314,7 +314,7 @@
trackId={track.id}
>
{#snippet leading()}
<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
<span class="flex h-3.5 w-icon-md shrink-0 items-end justify-center">
{#if isCurrent}
<EqBars size={13} paused={!player.playing} />
{:else}