feat(frontend): replace emoji with inline Material Symbols icon system
Add a self-contained icon system: vendored Material Symbols registry, an <Icon> component that references a single <symbol> sprite via <use>, plus IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme switcher, cover placeholder, like/comment counts, lightbox controls, back links) and add leading icons to key controls. Decorative icons are aria-hidden; icon-only buttons get labels; theme toggles expose aria-pressed; counters get accessible names. Recorded in openspec change material-icons-ui (all tasks complete).
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
|
||||
const token = $derived($page.params.token);
|
||||
@@ -43,13 +44,20 @@
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onclick={accept}
|
||||
class="bg-primary text-primary-fg rounded-lg px-5 py-2.5 font-medium"
|
||||
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
|
||||
>
|
||||
<Icon name="check" class="size-5" />
|
||||
{busy ? 'Принятие…' : 'Принять приглашение'}
|
||||
</button>
|
||||
{:else}
|
||||
<p class="mb-4 text-sm">Войдите или зарегистрируйтесь, чтобы принять приглашение.</p>
|
||||
<a href="/login" class="bg-primary text-primary-fg rounded-lg px-5 py-2.5 font-medium">Войти</a>
|
||||
<a
|
||||
href="/login"
|
||||
class="bg-primary text-primary-fg inline-flex items-center gap-2 rounded-lg px-5 py-2.5 font-medium"
|
||||
>
|
||||
<Icon name="login" class="size-5" />
|
||||
Войти
|
||||
</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-text-muted">Загрузка…</p>
|
||||
|
||||
Reference in New Issue
Block a user