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>

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
@@ -29,6 +28,7 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     assetId: string;
@@ -197,7 +197,14 @@
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        icon={mdiArrowLeftThin}
+        aria-label={$t('back')}
+        onclick={onClose}
+      />
       <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('edit_faces')}</p>
     </div>
     {#if !isShowLoadingDone}
@@ -304,22 +311,22 @@
 
               <div class="absolute -end-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
                 {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
-                  <CircleIconButton
+                  <IconButton
+                    shape="round"
+                    variant="ghost"
                     color="primary"
                     icon={mdiRestart}
-                    title={$t('reset')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('reset')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleReset(face.id)}
                   />
                 {:else}
-                  <CircleIconButton
+                  <IconButton
                     color="primary"
                     icon={mdiPencil}
-                    title={$t('select_new_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('select_new_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleFacePicker(face)}
                   />
@@ -336,12 +343,12 @@
               </div>
               {#if face.person != null}
                 <div class="absolute -end-[5px] top-[25px] h-[20px] w-[20px] rounded-full">
-                  <CircleIconButton
-                    color="red"
+                  <IconButton
+                    shape="round"
+                    color="danger"
                     icon={mdiTrashCan}
-                    title={$t('delete_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('delete_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => deleteAssetFace(face)}
                   />