From 8ad95b368be5101a3157790c5e90ee33ee2fab38 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Fri, 14 Mar 2025 09:37:56 -0400
Subject: [PATCH] feat: use immich ui components for dialog component (#16839)

---
 .../lib/components/admin-page/restore-dialogue.svelte    | 2 +-
 .../components/asset-viewer/editor/editor-panel.svelte   | 2 +-
 .../shared-components/dialog/confirm-dialog.svelte       | 9 ++++-----
 web/src/routes/admin/user-management/+page.svelte        | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/admin-page/restore-dialogue.svelte b/web/src/lib/components/admin-page/restore-dialogue.svelte
index a72ada2ca5..1386ae9fc4 100644
--- a/web/src/lib/components/admin-page/restore-dialogue.svelte
+++ b/web/src/lib/components/admin-page/restore-dialogue.svelte
@@ -32,7 +32,7 @@
 <ConfirmDialog
   title={$t('restore_user')}
   confirmText={$t('continue')}
-  confirmColor="green"
+  confirmColor="success"
   onConfirm={handleRestoreUser}
   {onCancel}
 >
diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
index 133d9c9021..39ba7ac200 100644
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
@@ -69,7 +69,7 @@
     prompt={$t('editor_close_without_save_prompt')}
     cancelText={$t('no')}
     cancelColor="secondary"
-    confirmColor="red"
+    confirmColor="danger"
     confirmText={$t('close')}
     onCancel={() => {
       $showCancelConfirmDialog = false;
diff --git a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
index 3efc56dc41..dad16d52ca 100644
--- a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
+++ b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import FullScreenModal from '../full-screen-modal.svelte';
-  import Button from '../../elements/buttons/button.svelte';
-  import type { Color } from '$lib/components/elements/buttons/button.svelte';
   import { t } from 'svelte-i18n';
   import type { Snippet } from 'svelte';
+  import { Button, type Color } from '@immich/ui';
 
   interface Props {
     title?: string;
@@ -24,7 +23,7 @@
     title = $t('confirm'),
     prompt = $t('are_you_sure_to_do_this'),
     confirmText = $t('confirm'),
-    confirmColor = 'red',
+    confirmColor = 'danger',
     cancelText = $t('cancel'),
     cancelColor = 'secondary',
     hideCancelButton = false,
@@ -49,11 +48,11 @@
 
   {#snippet stickyBottom()}
     {#if !hideCancelButton}
-      <Button color={cancelColor} fullwidth onclick={onCancel}>
+      <Button shape="round" color={cancelColor} fullWidth onclick={onCancel}>
         {cancelText}
       </Button>
     {/if}
-    <Button color={confirmColor} fullwidth onclick={handleConfirm} {disabled}>
+    <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
       {confirmText}
     </Button>
   {/snippet}
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index ce3541a659..9ec2e9eab1 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -155,7 +155,7 @@
           onConfirm={() => (shouldShowPasswordResetSuccess = false)}
           onCancel={() => (shouldShowPasswordResetSuccess = false)}
           hideCancelButton={true}
-          confirmColor="green"
+          confirmColor="success"
         >
           {#snippet promptSnippet()}
             <div class="flex flex-col gap-4">