From 21329e7c477ac24a758b9f303c38e4969c9509e0 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 22 Nov 2022 23:22:58 -0500
Subject: [PATCH] fix(striker-ui): add simple colour control to proceed button
 in ConfirmDialog

---
 striker-ui/components/ConfirmDialog.tsx | 19 ++++++++++++++++---
 striker-ui/types/ConfirmDialog.d.ts     |  3 ++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/striker-ui/components/ConfirmDialog.tsx b/striker-ui/components/ConfirmDialog.tsx
index ea0b2997..6e86ef24 100644
--- a/striker-ui/components/ConfirmDialog.tsx
+++ b/striker-ui/components/ConfirmDialog.tsx
@@ -1,12 +1,20 @@
 import { Box, Dialog } from '@mui/material';
 import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 
-import { BLUE, TEXT } from '../lib/consts/DEFAULT_THEME';
+import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 import ContainedButton from './ContainedButton';
 import { Panel, PanelHeader } from './Panels';
 import { BodyText, HeaderText } from './Text';
 
+const MAP_TO_COLOUR: Record<
+  Exclude<ConfirmDialogProps['proceedColour'], undefined>,
+  string
+> = {
+  blue: BLUE,
+  red: RED,
+};
+
 const ConfirmDialog = forwardRef<
   ConfirmDialogForwardedRefContent,
   ConfirmDialogProps
@@ -21,6 +29,7 @@ const ConfirmDialog = forwardRef<
       onProceedAppend,
       openInitially = false,
       proceedButtonProps = {},
+      proceedColour: proceedColourKey = 'blue',
       titleText,
     },
     ref,
@@ -35,6 +44,10 @@ const ConfirmDialog = forwardRef<
       () => (ref ? isOpen : baseOpen),
       [baseOpen, isOpen, ref],
     );
+    const proceedColour = useMemo(
+      () => MAP_TO_COLOUR[proceedColourKey],
+      [proceedColourKey],
+    );
 
     useImperativeHandle(
       ref,
@@ -80,10 +93,10 @@ const ConfirmDialog = forwardRef<
           </ContainedButton>
           <ContainedButton
             sx={{
-              backgroundColor: BLUE,
+              backgroundColor: proceedColour,
               color: TEXT,
 
-              '&:hover': { backgroundColor: `${BLUE}F0` },
+              '&:hover': { backgroundColor: `${proceedColour}F0` },
 
               ...proceedButtonSx,
             }}
diff --git a/striker-ui/types/ConfirmDialog.d.ts b/striker-ui/types/ConfirmDialog.d.ts
index b8579abb..d0e4df00 100644
--- a/striker-ui/types/ConfirmDialog.d.ts
+++ b/striker-ui/types/ConfirmDialog.d.ts
@@ -1,15 +1,16 @@
 type ConfirmDialogOptionalProps = {
   actionCancelText?: string;
   dialogProps?: import('@mui/material').DialogProps;
+  onProceedAppend?: ContainedButtonProps['onClick'];
   onCancelAppend?: ContainedButtonProps['onClick'];
   openInitially?: boolean;
   proceedButtonProps?: ContainedButtonProps;
+  proceedColour?: 'blue' | 'red';
 };
 
 type ConfirmDialogProps = ConfirmDialogOptionalProps & {
   actionProceedText: string;
   content: import('@mui/material').ReactNode;
-  onProceedAppend: Exclude<ContainedButtonProps['onClick'], undefined>;
   titleText: string;
 };