sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: migrate remaining usages of the logo to use the UI lib (#23430)

pull/23768/head
Daniel Dietzler 2025-11-10 19:16:49 +07:00 committed by GitHub
parent d6307b262f
commit d27c01ef70
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 25 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/lib/components/album-page/album-viewer.svelte
Unescape Escape View File

@ -16,11 +16,10 @@
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { IconButton, Logo } from '@immich/ui';
import { mdiDownload, mdiFileImagePlusOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
import ThemeButton from '../shared-components/theme-button.svelte';
import AlbumSummary from './album-summary.svelte';
@ -98,7 +97,9 @@
{:else}
<ControlAppBar showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink />
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<Logo variant="inline" />
</a>
{/snippet}
{#snippet trailing()}

5
web/src/lib/components/layouts/ErrorLayout.svelte
Unescape Escape View File

@ -1,7 +1,6 @@
<script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { copyToClipboard } from '$lib/utils';
import { Icon, IconButton } from '@immich/ui';
import { Icon, IconButton, Logo } from '@immich/ui';
import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -24,7 +23,7 @@
<section>
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
<ImmichLogo class="h-12.5" />
<Logo variant="inline" />
</a>
</div>
</section>

4
web/src/lib/components/onboarding-page/onboarding-hello.svelte
Unescape Escape View File

@ -1,15 +1,15 @@
<script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { OnboardingRole } from '$lib/models/onboarding-role';
import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { Logo } from '@immich/ui';
import { t } from 'svelte-i18n';
let userRole = $derived($user.isAdmin && !$serverConfig.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER);
</script>
<div class="gap-4">
<ImmichLogo noText class="h-25 mb-2" />
<Logo variant="icon" size="giant" class="mb-2" />
<p class="font-medium mb-6 text-6xl text-primary">
{$t('onboarding_welcome_user', { values: { user: $user.name } })}
</p>

7
web/src/lib/components/pages/SharedLinkPage.svelte
Unescape Escape View File

@ -2,7 +2,6 @@
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { user } from '$lib/stores/user.store';
@ -10,7 +9,7 @@
import { handleError } from '$lib/utils/handle-error';
import { navigate } from '$lib/utils/navigation';
import { getMySharedLink, SharedLinkType, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
import { Button, PasswordInput } from '@immich/ui';
import { Button, Logo, PasswordInput } from '@immich/ui';
import { tick } from 'svelte';
import { t } from 'svelte-i18n';
@ -87,7 +86,9 @@
<header>
<ControlAppBar showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink />
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<Logo variant="inline" />
</a>
{/snippet}
{#snippet trailing()}

7
web/src/lib/components/share-page/individual-shared-viewer.svelte
Unescape Escape View File

@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import type { Action } from '$lib/components/asset-viewer/actions/action';
import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
import RemoveFromSharedLink from '$lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte';
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
@ -16,7 +15,7 @@
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
import { IconButton, toastManager } from '@immich/ui';
import { IconButton, Logo, toastManager } from '@immich/ui';
import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
import { t } from 'svelte-i18n';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
@ -108,7 +107,9 @@
{:else}
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
{#snippet leading()}
<ImmichLogoSmallLink />
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<Logo variant="inline" />
</a>
{/snippet}
{#snippet trailing()}

4
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
Unescape Escape View File

@ -5,9 +5,9 @@
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { fileUploadHandler } from '$lib/utils/file-uploader';
import { isAlbumsRoute, isLockedFolderRoute } from '$lib/utils/navigation';
import { Logo } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
let albumId = $derived(isAlbumsRoute(page.route?.id) ? page.params.albumId : undefined);
let isInLockedFolder = $derived(isLockedFolderRoute(page.route.id));
@ -168,7 +168,7 @@
transition:fade={{ duration: 250 }}
ondragover={onDragOver}
>
<ImmichLogo noText class="m-16 h-48 animate-bounce" />
<Logo variant="icon" size="giant" class="m-16 animate-bounce" />
<div class="text-2xl">{$t('drop_files_to_upload')}</div>
</div>
{/if}

8
web/src/lib/components/shared-components/immich-logo-small-link.svelte
Unescape Escape View File

@ -1,8 +0,0 @@
<script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
</script>
<a data-sveltekit-preload-data="hover" class="ms-4" href="/">
<ImmichLogo class="h-12.5 max-w-none md:w-auto md:max-w-full" noText={mobileDevice.maxMd} />
</a>

112
web/src/lib/components/shared-components/immich-logo.svelte
Unescape Escape View File

@ -1,112 +0,0 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { HTMLImgAttributes } from 'svelte/elements';
interface Props extends HTMLImgAttributes {
noText?: boolean;
class?: string | undefined;
}
let { noText = false, class: cssClass }: Props = $props();
const viewBox = $derived(`0 0 ${noText ? '260' : '792'} 266.25`);
</script>
<svg {viewBox} class={cssClass}>
<title>{$t('immich_logo')}</title>
{#if !noText}
<g class="st0 dark:fill-[#accbfa] fill-[#4251b0]">
<path
d="M268.73,63.18c6.34,0,11.52,5.18,11.52,11.35c0,6.34-5.18,11.35-11.52,11.35s-11.69-5.01-11.69-11.35
C257.04,68.36,262.39,63.18,268.73,63.18z M258.88,122.45c0-3.01-0.67-7.85-0.67-10.68c0-6.01,4.67-10.68,10.52-10.68
c5.84,0,10.52,4.67,10.52,10.68c0,2.84-0.83,7.68-0.83,10.68v38.73c0,3.01,0.83,7.85,0.83,10.68c0,6.01-4.67,10.68-10.52,10.68
c-5.84,0-10.52-4.67-10.52-10.68c0-2.84,0.67-7.68,0.67-10.68V122.45z"
/>
<path
d="M394.28,171.87c0-2.84,0.83-7.68,0.83-10.68V132.3c0-10.18-5.34-16.86-14.52-16.86c-6.01,0-11.35,3-14.86,8.85
c0.33,1.84,0.5,3.67,0.5,5.68v31.22c0,3.01,0.83,7.85,0.83,10.68c0,6.01-4.67,10.68-10.68,10.68c-5.51,0-10.35-4.67-10.35-10.68
c0-2.84,0.83-7.68,0.83-10.68V131.8c0-3.17-0.5-6.01-1.67-8.51c-2.17-4.84-6.51-7.85-12.52-7.85c-6.18,0-11.19,3.17-14.86,8.85
v36.9c0,3.01,0.83,7.85,0.83,10.68c0,6.01-4.84,10.68-10.52,10.68c-5.84,0-10.52-4.67-10.52-10.68c0-2.84,0.67-7.68,0.67-10.68
v-38.57c0-3.01-1.5-8.35-1.5-10.85c0-6.01,4.34-10.68,10.18-10.68c5.51,0,8.68,3.67,9.68,8.51c5.01-6.68,12.02-10.85,21.2-10.85
c10.85,0,18.7,5.18,23.54,13.52c5.51-8.68,13.52-13.52,23.54-13.52c16.86,0,29.72,12.19,29.72,31.72v30.72
c0,3.01,0.67,7.85,0.67,10.68c0,6.01-4.51,10.68-10.52,10.68C399.12,182.55,394.28,177.88,394.28,171.87z"
/>
<path
d="M528.5,171.87c0-2.84,0.83-7.68,0.83-10.68V132.3c0-10.18-5.34-16.86-14.52-16.86c-6.01,0-11.35,3-14.86,8.85
c0.33,1.84,0.5,3.67,0.5,5.68v31.22c0,3.01,0.84,7.85,0.84,10.68c0,6.01-4.67,10.68-10.68,10.68c-5.51,0-10.35-4.67-10.35-10.68
c0-2.84,0.84-7.68,0.84-10.68V131.8c0-3.17-0.5-6.01-1.67-8.51c-2.17-4.84-6.51-7.85-12.52-7.85c-6.18,0-11.19,3.17-14.86,8.85
v36.9c0,3.01,0.83,7.85,0.83,10.68c0,6.01-4.84,10.68-10.52,10.68c-5.84,0-10.52-4.67-10.52-10.68c0-2.84,0.67-7.68,0.67-10.68
v-38.57c0-3.01-1.5-8.35-1.5-10.85c0-6.01,4.34-10.68,10.18-10.68c5.51,0,8.68,3.67,9.68,8.51c5.01-6.68,12.02-10.85,21.2-10.85
c10.85,0,18.7,5.18,23.54,13.52c5.51-8.68,13.52-13.52,23.54-13.52c16.86,0,29.72,12.19,29.72,31.72v30.72
c0,3.01,0.67,7.85,0.67,10.68c0,6.01-4.51,10.68-10.52,10.68C533.35,182.55,528.5,177.88,528.5,171.87z"
/>
<path
d="M576.92,63.18c6.34,0,11.52,5.18,11.52,11.35c0,6.34-5.18,11.35-11.52,11.35s-11.69-5.01-11.69-11.35
C565.23,68.36,570.57,63.18,576.92,63.18z M567.07,122.45c0-3.01-0.67-7.85-0.67-10.68c0-6.01,4.67-10.68,10.52-10.68
s10.52,4.67,10.52,10.68c0,2.84-0.84,7.68-0.84,10.68v38.73c0,3.01,0.84,7.85,0.84,10.68c0,6.01-4.67,10.68-10.52,10.68
s-10.52-4.67-10.52-10.68c0-2.84,0.67-7.68,0.67-10.68V122.45z"
/>
<path
d="M601.79,141.31c0-23.54,14.69-42.57,39.07-42.57c12.86,0,24.71,5.84,30.05,14.53c2,3.17,2.34,5.01,2.34,6.51
c0,5.18-4.01,9.52-9.85,9.52c-3.84,0-7.34-2.17-8.85-6.01c-2.34-5.18-6.85-8.18-13.69-8.18c-12.86,0-20.03,11.52-20.03,26.04
c0,14.69,7.51,26.04,20.53,26.04c7.01,0,12.02-2.5,14.36-7.68c1.67-3.51,4.84-6.51,9.18-6.51c6.01,0,9.68,4.17,9.68,9.35
c0,2.5-1,5.51-3.17,8.35c-5.51,7.35-15.86,13.19-30.05,13.19C616.32,183.89,601.79,165.19,601.79,141.31z"
/>
<path
d="M737.69,171.87c0-2.84,0.67-7.68,0.67-10.68v-28.55c0-10.18-5.68-17.2-15.36-17.2
c-6.68,0-12.35,3.17-16.03,8.35v37.4c0,3.01,0.67,7.85,0.67,10.68c0,6.01-4.67,10.68-10.52,10.68s-10.52-4.67-10.52-10.68
c0-2.84,0.84-7.68,0.84-10.68v-80.8c0-3.01-0.84-7.85-0.84-10.68c0-6.01,4.84-10.68,10.52-10.68c5.84,0,10.52,4.67,10.52,10.68
c0,2.84-0.67,7.68-0.67,10.68v27.21c5.01-5.51,12.19-8.85,21.37-8.85c17.2,0,29.55,12.86,29.55,31.22v31.22
c0,3.01,0.83,7.85,0.83,10.68c0,6.01-4.84,10.68-10.52,10.68C742.36,182.55,737.69,177.88,737.69,171.87z"
/>
</g>
{/if}
<g>
<path
class="st1"
d="M114.82,96.21c11.92,10.55,21.52,21.86,27.7,32.52c10.62-18.99,17.71-41.55,17.8-55.92c0-0.1,0-0.19,0-0.28
c0-21.26-21.21-29.54-39.48-29.54s-39.48,8.28-39.48,29.54c0,0.29,0,0.68,0,1.15C91.54,78.2,103.61,86.29,114.82,96.21z"
/>
<path
class="st2"
d="M49.8,154.19c7.45-8.29,18.88-17.27,31.77-24.86c13.72-8.07,27.44-13.71,39.49-16.3
c-14.78-15.96-34.04-29.68-47.68-34.21c-0.1-0.03-0.18-0.06-0.27-0.09c-20.22-6.57-34.65,11.05-40.3,28.42s-4.33,40.11,15.89,46.68
C48.99,153.93,49.35,154.05,49.8,154.19z"
/>
<path
class="st3"
d="M209.07,106.86c-5.65-17.38-20.07-34.99-40.3-28.42c-0.28,0.09-0.65,0.21-1.09,0.35
c-1.16,11.08-5.12,25.07-11.09,38.79c-6.35,14.6-14.14,27.23-22.36,36.39c21.34,4.23,44.99,4,58.68-0.35
c0.1-0.03,0.19-0.06,0.27-0.09C213.4,146.97,214.71,124.24,209.07,106.86z"
/>
<path
class="st4"
d="M102.8,171.18c-3.44-15.54-4.56-30.34-3.3-42.59c-19.75,9.12-38.75,23.2-47.27,34.78
c-0.06,0.08-0.11,0.16-0.16,0.23c-12.5,17.2-0.2,36.37,14.58,47.11s36.81,16.51,49.31-0.69c0.17-0.24,0.4-0.55,0.68-0.93
C111.05,199.44,106.04,185.79,102.8,171.18z"
/>
<path
class="st5"
d="M189.48,162.49c-10.9,2.33-25.42,2.88-40.32,1.44c-15.84-1.53-30.26-5.03-41.52-10.02
c2.57,21.6,10.09,44.02,18.47,55.7c0.06,0.08,0.11,0.16,0.16,0.23c12.5,17.2,34.52,11.43,49.31,0.69
c14.78-10.74,27.08-29.9,14.58-47.11C189.99,163.18,189.76,162.86,189.48,162.49z"
/>
</g>
</svg>
<style>
.st1 {
fill: #fa2921;
}
.st2 {
fill: #ed79b5;
}
.st3 {
fill: #ffb400;
}
.st4 {
fill: #1e83f7;
}
.st5 {
fill: #18c249;
}
</style>

5
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
Unescape Escape View File

@ -6,7 +6,6 @@
import { page } from '$app/state';
import { clickOutside } from '$lib/actions/click-outside';
import CastButton from '$lib/cast/cast-button.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AppRoute } from '$lib/constants';
@ -17,7 +16,7 @@
import { featureFlags } from '$lib/stores/server-config.store';
import { sidebarStore } from '$lib/stores/sidebar.svelte';
import { user } from '$lib/stores/user.store';
import { Button, IconButton } from '@immich/ui';
import { Button, IconButton, Logo } from '@immich/ui';
import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -78,7 +77,7 @@
class="sidebar:hidden"
/>
<a data-sveltekit-preload-data="hover" href={AppRoute.PHOTOS}>
<ImmichLogo class="max-md:h-12 h-12.5" noText={!mobileDevice.isFullSidebar} />
<Logo variant={mobileDevice.isFullSidebar ? 'inline' : 'icon'} class="max-md:h-12" />
</a>
</div>
<div class="flex justify-between gap-4 lg:gap-8 pe-6">

10
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
Unescape Escape View File

@ -1,7 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
import { AppRoute } from '$lib/constants';
import Portal from '$lib/elements/Portal.svelte';
import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
@ -11,7 +9,7 @@
import { handleError } from '$lib/utils/handle-error';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
import { updateMyPreferences } from '@immich/sdk';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
import { Button, Icon, IconButton, Logo, modalManager, SupporterBadge } from '@immich/ui';
import { mdiClose, mdiInformationOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { SvelteDate } from 'svelte/reactivity';
@ -93,9 +91,7 @@
>
<div class="flex justify-between w-full place-items-center place-content-center">
<div class="flex place-items-center place-content-center gap-1">
<div class="h-6 w-6">
<ImmichLogo noText class="h-6" />
</div>
<Logo variant="icon" size="tiny" />
<p class="flex text-primary font-medium">
{$t('purchase_button_buy_immich')}
</p>
@ -122,7 +118,7 @@
>
<div class="flex justify-between place-items-center">
<div class="h-10 w-10">
<ImmichLogo noText class="h-8" />
<Logo variant="icon" size="small" />
</div>
<IconButton
shape="round"

4
web/src/lib/components/shared-components/side-bar/supporter-badge.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Logo } from '@immich/ui';
import { t } from 'svelte-i18n';
import ImmichLogo from '../immich-logo.svelte';
interface Props {
centered?: boolean;
@ -14,7 +14,7 @@
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 rounded-lg bg-clip-padding border border-transparent relative supporter-effect"
class:place-content-center={centered}
>
<ImmichLogo class={logoSize === 'sm' ? 'h-6' : 'h-8'} noText />
<Logo variant="icon" size={logoSize === 'sm' ? 'tiny' : 'small'} />
<p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
</div>