refactor: buttons (#18317)

* refactor: buttons

* fix: woopsie

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -9,14 +8,13 @@
     type AssetFaceUpdateItem,
     type PersonResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiMerge, mdiPlus } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import FaceThumbnail from './face-thumbnail.svelte';
   import PeopleList from './people-list.svelte';
@@ -130,33 +128,27 @@
     {#snippet trailing()}
       <div class="flex gap-4">
         <Button
+          shape="round"
           title={$t('create_new_person_hint')}
-          size="sm"
+          leadingIcon={mdiPlus}
+          loading={showLoadingSpinnerCreate}
+          size="small"
           disabled={disableButtons || hasSelection}
           onclick={handleCreate}
         >
-          {#if !showLoadingSpinnerCreate}
-            <Icon path={mdiPlus} size={18} />
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('create_new_person')}</span></Button
+          {$t('create_new_person')}</Button
         >
         <Button
-          size="sm"
+          size="small"
+          shape="round"
           title={$t('reassing_hint')}
+          leadingIcon={mdiMerge}
+          loading={showLoadingSpinnerReassign}
           disabled={disableButtons || !hasSelection}
           onclick={handleReassign}
         >
-          {#if !showLoadingSpinnerReassign}
-            <div>
-              <Icon path={mdiMerge} size={18} class="rotate-180" />
-            </div>
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('reassign')}</span></Button
-        >
+          {$t('reassign')}
+        </Button>
       </div>
     {/snippet}
   </ControlAppBar>