fix(striker-ui): add simple colour control to proceed button in ConfirmDialog

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

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;
 };