From ebcf133beafa71b8239b177eec1e6f1a4930fe27 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Mon, 23 Jun 2025 16:39:20 -0400
Subject: [PATCH] fix(web): consistent merge people icons (#19473)

fix(web): consistent merge icons
---
 .../modals/PersonMergeSuggestionModal.svelte  | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
index ab306aca7a..6df32cb354 100644
--- a/web/src/lib/modals/PersonMergeSuggestionModal.svelte
+++ b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -8,7 +8,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { mergePerson, type PersonResponseDto } from '@immich/sdk';
   import { Button, HStack, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiArrowLeft, mdiMerge } from '@mdi/js';
+  import { mdiArrowLeft, mdiCallMerge, mdiSwapHorizontal } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import ImageThumbnail from '../components/assets/thumbnail/image-thumbnail.svelte';
@@ -62,7 +62,7 @@
 
 <Modal title="{$t('merge_people')} - {title}" {onClose}>
   <ModalBody>
-    <div class="flex items-center justify-center py-4 md:h-36 md:py-4">
+    <div class="flex items-center justify-center gap-2 py-4 md:h-36">
       {#if !choosePersonToMerge}
         <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
           <ImageThumbnail
@@ -73,15 +73,24 @@
             widthStyle="100%"
           />
         </div>
-        <div class="mx-0.5 flex md:mx-2">
-          <IconButton
-            shape="round"
-            variant="ghost"
-            color="secondary"
-            aria-label={$t('swap_merge_direction')}
-            icon={mdiMerge}
-            onclick={() => ([personToMerge, personToBeMergedInto] = [personToBeMergedInto, personToMerge])}
-          />
+
+        <div class="grid grid-rows-3">
+          <div></div>
+          <div class="flex flex-col h-full items-center justify-center">
+            <div class="flex h-full items-center justify-center">
+              <Icon path={mdiCallMerge} size={48} class="rotate-90 dark:text-white" />
+            </div>
+          </div>
+          <div>
+            <IconButton
+              shape="round"
+              color="secondary"
+              variant="ghost"
+              aria-label={$t('swap_merge_direction')}
+              icon={mdiSwapHorizontal}
+              onclick={() => ([personToMerge, personToBeMergedInto] = [personToBeMergedInto, personToMerge])}
+            />
+          </div>
         </div>
 
         <button