mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor(web): material icons (#4636)
This commit is contained in:
parent
d5e19e45cd
commit
2ad389f64e
89 changed files with 557 additions and 534 deletions
|
|
@ -1,15 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte';
|
||||
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
|
||||
import WindowClose from 'svelte-material-icons/WindowClose.svelte';
|
||||
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import {
|
||||
ImmichNotification,
|
||||
notificationController,
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { onMount } from 'svelte';
|
||||
import { mdiCloseCircleOutline, mdiInformationOutline, mdiWindowClose } from '@mdi/js';
|
||||
|
||||
export let notificationInfo: ImmichNotification;
|
||||
|
||||
|
|
@ -17,7 +15,7 @@
|
|||
let errorPrimaryColor = '#E64132';
|
||||
let warningPrimaryColor = '#D08613';
|
||||
|
||||
$: icon = notificationInfo.type === NotificationType.Error ? CloseCircleOutline : InformationOutline;
|
||||
$: icon = notificationInfo.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline;
|
||||
|
||||
$: backgroundColor = () => {
|
||||
if (notificationInfo.type === NotificationType.Info) {
|
||||
|
|
@ -93,13 +91,13 @@
|
|||
>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex place-items-center gap-2">
|
||||
<svelte:component this={icon} color={primaryColor()} size="20" />
|
||||
<Icon path={icon} color={primaryColor()} size="20" />
|
||||
<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
|
||||
{notificationInfo.type.toString()}
|
||||
</h2>
|
||||
</div>
|
||||
<button on:click|stopPropagation={discard}>
|
||||
<svelte:component this={WindowClose} size="20" />
|
||||
<Icon path={mdiWindowClose} size="20" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue