diff --git a/apps/web/src/lib/ui/feedback/Toast.svelte b/apps/web/src/lib/ui/feedback/Toast.svelte index c4c5c11..e0fd209 100644 --- a/apps/web/src/lib/ui/feedback/Toast.svelte +++ b/apps/web/src/lib/ui/feedback/Toast.svelte @@ -15,7 +15,7 @@ .toast-region { position: fixed; bottom: 16px; - right: 16px; + left: 16px; display: flex; flex-direction: column; gap: 8px; diff --git a/apps/web/src/lib/ui/layout/AppShell.svelte b/apps/web/src/lib/ui/layout/AppShell.svelte index baffe54..324aca2 100644 --- a/apps/web/src/lib/ui/layout/AppShell.svelte +++ b/apps/web/src/lib/ui/layout/AppShell.svelte @@ -31,17 +31,22 @@ background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); + backdrop-filter: saturate(180%) blur(8px); + -webkit-backdrop-filter: saturate(180%) blur(8px); } .row { - display: flex; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); - min-height: 52px; + min-height: 58px; } .brand { font-weight: 700; color: var(--color-primary); text-decoration: none; + letter-spacing: 0.2px; + font-size: 1.05rem; } .nav { display: flex; @@ -49,7 +54,8 @@ margin-left: auto; } .nav a { - padding: 6px 10px; + position: relative; + padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; @@ -63,6 +69,17 @@ color: var(--color-primary); font-weight: 600; } + .nav a.active::after { + content: ''; + position: absolute; + left: 8px; + right: 8px; + bottom: 3px; + height: 2px; + background: var(--color-primary); + border-radius: 1px; + opacity: 0.9; + } @media (prefers-color-scheme: dark) { .nav a:hover, .nav a:focus-visible { diff --git a/apps/web/src/routes/app/preferences/+page.svelte b/apps/web/src/routes/app/preferences/+page.svelte index a135624..c533551 100644 --- a/apps/web/src/routes/app/preferences/+page.svelte +++ b/apps/web/src/routes/app/preferences/+page.svelte @@ -2,7 +2,7 @@ import SegmentedControl from '$lib/ui/inputs/SegmentedControl.svelte'; import Card from '$lib/ui/layout/Card.svelte'; import Button from '$lib/ui/atoms/Button.svelte'; - import { toasts } from '$lib/stores/toasts'; + import { success as toastSuccess } from '$lib/stores/toasts'; export let data: { pref: { freq: 'off' | 'daily' | 'weekly' | 'weekdays'; time: string | null }; @@ -13,7 +13,7 @@ let freq: 'off' | 'daily' | 'weekly' | 'weekdays' = data.pref.freq; let time: string = data.pref.time ?? '08:30'; - $: if (form?.success) { try { toasts.success('Preferencias guardadas.'); } catch {} } + $: if (form?.success) { try { toastSuccess('Preferencias guardadas.'); } catch {} } const options = [ { label: 'Apagado', value: 'off' }, @@ -45,9 +45,6 @@ {#if form?.error}
{form.error}
{/if} - {#if form?.success} -
Preferencias guardadas.
- {/if}