mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web,a11y): replace IconButton with CircleIconButton (#9153)
* feat(web,a11y): replace IconButton with CircleIconButton * wip: cleanup * wip: bring back viewbox * fix: add label to search bar
This commit is contained in:
parent
0c9bf2835d
commit
72ce81f0c2
11 changed files with 84 additions and 111 deletions
|
|
@ -1,17 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { Theme } from '$lib/constants';
|
||||
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
|
||||
import IconButton from '../elements/buttons/icon-button.svelte';
|
||||
import Icon from '../elements/icon.svelte';
|
||||
|
||||
$: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
|
||||
$: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
|
||||
</script>
|
||||
|
||||
{#if !$colorTheme.system}
|
||||
<IconButton on:click={handleToggleTheme} title="Toggle theme">
|
||||
{#if $colorTheme.value === Theme.LIGHT}
|
||||
<Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
|
||||
{:else}
|
||||
<Icon path={sunPath} viewBox={moonViewBox} class="h-6 w-6" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
<CircleIconButton title="Toggle theme" {icon} {viewBox} on:click={handleToggleTheme} />
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue