Add option to highlight specific button in ConfirmDialog

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}`),

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.cancel.show && (
-                        {actions.confirm.show && <Button onClick={onConfirm}>{actions.confirm.title}</Button>}
+                            <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>