From 297ecd8b525072bc85bc7889a730260c4d0ce3a3 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 4 May 2024 14:50:27 +0200
Subject: [PATCH] Add option to highlight specific button in ConfirmDialog

---
 .../manga/useManageMangaLibraryState.tsx      |  4 +--
 src/components/molecules/ConfirmDialog.tsx    | 26 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/manga/useManageMangaLibraryState.tsx b/src/components/manga/useManageMangaLibraryState.tsx
index d3fee46c..4fdd4e6f 100644
--- a/src/components/manga/useManageMangaLibraryState.tsx
+++ b/src/components/manga/useManageMangaLibraryState.tsx
@@ -118,7 +118,7 @@ export const useManageMangaLibraryState = (
                         error: e.message,
                     }),
                     actions: {
-                        extra: { show: true, title: t('global.button.retry') },
+                        extra: { show: true, title: t('global.button.retry'), contain: true },
                         confirm: { title: t('global.button.add') },
                     },
                     onExtra: () =>
@@ -134,7 +134,7 @@ export const useManageMangaLibraryState = (
                     title: t('global.label.are_you_sure'),
                     message: t('manga.action.library.add.dialog.duplicate.label.info'),
                     actions: {
-                        extra: { show: true, title: t('migrate.dialog.action.button.show_entry') },
+                        extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
                         confirm: { title: t('global.button.add') },
                     },
                     onExtra: () => navigate(`/manga/${duplicatedLibraryMangas!.data.mangas.nodes[0].id}`),
diff --git a/src/components/molecules/ConfirmDialog.tsx b/src/components/molecules/ConfirmDialog.tsx
index 140db2d7..f589fa6a 100644
--- a/src/components/molecules/ConfirmDialog.tsx
+++ b/src/components/molecules/ConfirmDialog.tsx
@@ -17,6 +17,7 @@ import Stack from '@mui/material/Stack';
 type Action = {
     show?: boolean;
     title?: string;
+    contain?: boolean;
 };
 
 type Actions = {
@@ -46,14 +47,21 @@ export const ConfirmDialog = ({
         extra: {
             show: passedActions?.extra?.show ?? false,
             title: passedActions?.extra?.title ?? '',
+            contain: passedActions?.extra?.contain ?? false,
         },
         cancel: {
             show: passedActions?.cancel?.show ?? true,
             title: passedActions?.cancel?.title ?? t('global.button.cancel'),
+            contain: passedActions?.cancel?.contain ?? false,
         },
         confirm: {
             show: passedActions?.confirm?.show ?? true,
             title: passedActions?.confirm?.title ?? t('global.button.ok'),
+            contain:
+                !passedActions?.extra?.contain &&
+                !passedActions?.cancel?.contain &&
+                !passedActions?.confirm?.contain &&
+                true,
         },
     } satisfies Actions;
 
@@ -73,10 +81,22 @@ export const ConfirmDialog = ({
                     direction="row"
                     justifyContent={actions.extra.show ? 'space-between' : 'end'}
                 >
-                    {actions.extra.show && <Button onClick={onExtra}>{actions.extra.title}</Button>}
+                    {actions.extra.show && (
+                        <Button onClick={onExtra} variant={actions.extra.contain ? 'contained' : undefined}>
+                            {actions.extra.title}
+                        </Button>
+                    )}
                     <Stack direction="row">
-                        {actions.cancel.show && <Button onClick={onCancel}>{actions.cancel.title}</Button>}
-                        {actions.confirm.show && <Button onClick={onConfirm}>{actions.confirm.title}</Button>}
+                        {actions.cancel.show && (
+                            <Button onClick={onCancel} variant={actions.cancel.contain ? 'contained' : undefined}>
+                                {actions.cancel.title}
+                            </Button>
+                        )}
+                        {actions.confirm.show && (
+                            <Button onClick={onConfirm} variant={actions.confirm.contain ? 'contained' : undefined}>
+                                {actions.confirm.title}
+                            </Button>
+                        )}
                     </Stack>
                 </Stack>
             </DialogActions>