chore: migrate to UI lib icon (#22096)

This commit is contained in:
Daniel Dietzler
2025-09-16 21:40:43 +02:00
committed by GitHub
parent dac545496e
commit 7fe2f19258
78 changed files with 243 additions and 345 deletions

View File

@@ -1,8 +1,7 @@
<script lang="ts">
import { ImmichProduct } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { getLicenseLink as getProductLink } from '$lib/utils/license-utils';
import { Button } from '@immich/ui';
import { Button, Icon } from '@immich/ui';
import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
@@ -12,7 +11,7 @@
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiAccount} size="56" />
<Icon icon={mdiAccount} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
</div>
@@ -24,17 +23,17 @@
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_individual_description_1')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_lifetime_description')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_individual_description_2')}</p>
</div>
</div>

View File

@@ -1,9 +1,8 @@
<script lang="ts">
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import Icon from '$lib/elements/Icon.svelte';
import { preferences } from '$lib/stores/user.store';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import { Button } from '@immich/ui';
import { Button, Icon } from '@immich/ui';
import { mdiPartyPopper } from '@mdi/js';
import { t } from 'svelte-i18n';
@@ -15,7 +14,7 @@
</script>
<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
<Icon path={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
<Icon icon={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
<p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
<p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>

View File

@@ -1,8 +1,7 @@
<script lang="ts">
import { ImmichProduct } from '$lib/constants';
import Icon from '$lib/elements/Icon.svelte';
import { getLicenseLink } from '$lib/utils/license-utils';
import { Button } from '@immich/ui';
import { Button, Icon } from '@immich/ui';
import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
@@ -12,7 +11,7 @@
class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
>
<div class="text-immich-primary dark:text-immich-dark-primary">
<Icon path={mdiServer} size="56" />
<Icon icon={mdiServer} size="56" />
<p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
</div>
@@ -24,17 +23,17 @@
<div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
<div class="mt-6 flex flex-col gap-1">
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_server_description_1')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_lifetime_description')}</p>
</div>
<div class="grid grid-cols-[36px_auto]">
<Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<Icon icon={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
<p class="self-center">{$t('purchase_server_description_2')}</p>
</div>
</div>