From 4db76ddcf0c397e2e95d7ce11913604d9efebc4f Mon Sep 17 00:00:00 2001
From: Hamish <133548095+Hamster45105@users.noreply.github.com>
Date: Wed, 9 Jul 2025 12:12:16 +1000
Subject: [PATCH] feat(web): update icons (#19831)

* fix: update password icon in user settings

* feat: add icons to more modals
---
 .../asset-viewer/actions/set-visibility-action.svelte    | 1 +
 .../photos-page/actions/set-visibility-action.svelte     | 1 +
 .../components/photos-page/delete-asset-dialog.svelte    | 2 ++
 .../lib/components/shared-components/change-date.svelte  | 2 ++
 .../components/shared-components/change-location.svelte  | 2 ++
 .../user-settings-page/user-settings-list.svelte         | 9 +++++++--
 .../lib/modals/AssetUpdateDecriptionConfirmModal.svelte  | 2 ++
 web/src/lib/modals/ConfirmModal.svelte                   | 4 +++-
 8 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte b/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte
index 1b06bf8e21..14126bb8c7 100644
--- a/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte
@@ -25,6 +25,7 @@
       prompt: isLocked ? $t('remove_from_locked_folder_confirmation') : $t('move_to_locked_folder_confirmation'),
       confirmText: $t('move'),
       confirmColor: isLocked ? 'danger' : 'primary',
+      icon: isLocked ? mdiLockOpenVariantOutline : mdiLockOutline,
     });
 
     if (!isConfirmed) {
diff --git a/web/src/lib/components/photos-page/actions/set-visibility-action.svelte b/web/src/lib/components/photos-page/actions/set-visibility-action.svelte
index 3c897d6b01..04598ca79d 100644
--- a/web/src/lib/components/photos-page/actions/set-visibility-action.svelte
+++ b/web/src/lib/components/photos-page/actions/set-visibility-action.svelte
@@ -26,6 +26,7 @@
       prompt: unlock ? $t('remove_from_locked_folder_confirmation') : $t('move_to_locked_folder_confirmation'),
       confirmText: $t('move'),
       confirmColor: unlock ? 'danger' : 'primary',
+      icon: unlock ? mdiLockOpenVariantOutline : mdiLockOutline,
     });
 
     if (!isConfirmed) {
diff --git a/web/src/lib/components/photos-page/delete-asset-dialog.svelte b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
index 4862e072b8..2af215a34a 100644
--- a/web/src/lib/components/photos-page/delete-asset-dialog.svelte
+++ b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
@@ -3,6 +3,7 @@
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { Checkbox, Label } from '@immich/ui';
+  import { mdiDeleteForeverOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -26,6 +27,7 @@
 <ConfirmModal
   title={$t('permanently_delete_assets_count', { values: { count: size } })}
   confirmText={$t('delete')}
+  icon={mdiDeleteForeverOutline}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
   {#snippet promptSnippet()}
diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index 7ab8303f5a..e5da909028 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import DateInput from '../elements/date-input.svelte';
@@ -178,6 +179,7 @@
 <ConfirmModal
   confirmColor="primary"
   {title}
+  icon={mdiCalendarEditOutline}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 13f1c72da1..6409774d37 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -11,6 +11,7 @@
   import { delay } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
   interface Point {
@@ -113,6 +114,7 @@
 <ConfirmModal
   confirmColor="primary"
   title={$t('change_location')}
+  icon={mdiMapMarkerMultipleOutline}
   size="medium"
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
index 32747f5ba6..ac8f3432b7 100644
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -22,7 +22,7 @@
     mdiFeatureSearchOutline,
     mdiKeyOutline,
     mdiLockSmart,
-    mdiOnepassword,
+    mdiFormTextboxPassword,
     mdiServerOutline,
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
@@ -124,7 +124,12 @@
     </SettingAccordion>
   {/if}
 
-  <SettingAccordion icon={mdiOnepassword} key="password" title={$t('password')} subtitle={$t('change_your_password')}>
+  <SettingAccordion
+    icon={mdiFormTextboxPassword}
+    key="password"
+    title={$t('password')}
+    subtitle={$t('change_your_password')}
+  >
     <ChangePasswordSettings />
   </SettingAccordion>
 
diff --git a/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte b/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
index 4d5a81f5fa..77458b6e04 100644
--- a/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
+++ b/web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { Input } from '@immich/ui';
+  import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -15,6 +16,7 @@
 <ConfirmModal
   confirmColor="primary"
   title={$t('edit_description')}
+  icon={mdiText}
   prompt={$t('edit_description_prompt')}
   onClose={(confirmed) => (confirmed ? onClose(description) : onClose())}
 >
diff --git a/web/src/lib/modals/ConfirmModal.svelte b/web/src/lib/modals/ConfirmModal.svelte
index d1a109fa2c..c60d7c3963 100644
--- a/web/src/lib/modals/ConfirmModal.svelte
+++ b/web/src/lib/modals/ConfirmModal.svelte
@@ -10,6 +10,7 @@
     confirmColor?: Color;
     disabled?: boolean;
     size?: 'small' | 'medium';
+    icon?: string;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }
@@ -21,6 +22,7 @@
     confirmColor = 'danger',
     disabled = false,
     size = 'small',
+    icon = undefined,
     onClose,
     promptSnippet,
   }: Props = $props();
@@ -30,7 +32,7 @@
   };
 </script>
 
-<Modal {title} onClose={() => onClose(false)} {size}>
+<Modal {title} {icon} onClose={() => onClose(false)} {size}>
   <ModalBody>
     {#if promptSnippet}{@render promptSnippet()}{:else}
       <p>{prompt}</p>