refactor(web): material icons (#4636)

This commit is contained in:
Jason Rasmussen 2023-10-25 09:48:25 -04:00 committed by GitHub
parent d5e19e45cd
commit 2ad389f64e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
89 changed files with 557 additions and 534 deletions

View file

@ -3,10 +3,10 @@
import { AppRoute } from '$lib/constants';
import type { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { fade } from 'svelte/transition';
import UserAvatar from '../user-avatar.svelte';
import { mdiCog, mdiLogout } from '@mdi/js';
export let user: UserResponseDto;
@ -35,7 +35,7 @@
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Cog size="18" />
<Icon path={mdiCog} size="18" />
Account Settings
</div>
</Button>
@ -47,7 +47,7 @@
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Logout size={24} />
<Icon path={mdiLogout} size={24} />
Sign Out</button
>
</div>

View file

@ -4,7 +4,6 @@
import { clickOutside } from '$lib/utils/click-outside';
import { createEventDispatcher } from 'svelte';
import { fade, fly } from 'svelte/transition';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
import { api, UserResponseDto } from '@api';
import ThemeButton from '../theme-button.svelte';
import { AppRoute } from '../../../constants';
@ -12,11 +11,11 @@
import ImmichLogo from '../immich-logo.svelte';
import SearchBar from '../search-bar/search-bar.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Magnify from 'svelte-material-icons/Magnify.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Cog from 'svelte-material-icons/Cog.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserAvatar from '../user-avatar.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { mdiMagnify, mdiTrayArrowUp, mdiCog } from '@mdi/js';
export let user: UserResponseDto;
export let showUploadButton = true;
@ -56,7 +55,7 @@
<a href={AppRoute.SEARCH} id="search-button" class="pl-4 sm:hidden">
<IconButton title="Search">
<div class="flex gap-2">
<Magnify size="1.5em" />
<Icon path={mdiMagnify} size="1.5em" />
</div>
</IconButton>
</a>
@ -68,7 +67,7 @@
<div in:fly={{ x: 50, duration: 250 }}>
<LinkButton on:click={() => dispatch('uploadClicked')}>
<div class="flex gap-2">
<TrayArrowUp size="1.5em" />
<Icon path={mdiTrayArrowUp} size="1.5em" />
<span class="hidden md:block">Upload</span>
</div>
</LinkButton>
@ -95,7 +94,8 @@
</span>
</div>
<div class="block sm:hidden" aria-hidden="true">
<Cog
<Icon
path={mdiCog}
size="1.5em"
class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
? 'text-immich-primary dark:text-immich-dark-primary'