chore(web): migrate CircleIconButton to @immich/ui IconButton (#18486)

* remove import and referenced file

* first pass at replacing all CircleIconButtons

* fix linting issues

* fix combobox formatting issues

* fix button context menu coloring

* remove circle icon button from search history box

* use theme switcher from UI lib

* dark mode force the asset viewer icons

* fix forced dark mode icons

* dark mode memory viewer icons

* fix: back button in memory viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Brandon Wees
2025-06-02 09:47:23 -05:00
committed by GitHub
parent d544053c67
commit a02e1f5e7c
75 changed files with 822 additions and 556 deletions

View File

@@ -1,12 +1,11 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dateFormats } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
import { locale } from '$lib/stores/preferences.store';
import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, IconButton } from '@immich/ui';
import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@@ -126,18 +125,20 @@
>{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
</td>
<td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
<CircleIconButton
<IconButton
shape="round"
color="primary"
icon={mdiPencilOutline}
title={$t('edit_key')}
size="16"
aria-label={$t('edit_key')}
size="small"
onclick={() => handleUpdate(key)}
/>
<CircleIconButton
<IconButton
shape="round"
color="primary"
icon={mdiTrashCanOutline}
title={$t('delete_key')}
size="16"
aria-label={$t('delete_key')}
size="small"
onclick={() => handleDelete(key)}
/>
</td>