🎨 style: update confirm dialog to use custom modal component

packages/frontend/src/components/shared/ConfirmDialog.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 
 import { color } from '@material-tailwind/react/types/components/button';
-import {
+import { Modal, ModalProps } from './Modal';
-  Typography,
+import { Button } from './Button';
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-} from '@material-tailwind/react';
 
-type ConfirmDialogProp = {
+type ConfirmDialogProp = ModalProps & {
   children: React.ReactNode;
   dialogTitle: string;
   open: boolean;
@@ -23,42 +17,24 @@ type ConfirmDialogProp = {
 const ConfirmDialog = ({
   children,
   dialogTitle,
-  open,
   handleOpen,
   confirmButtonTitle,
   handleConfirm,
-  color,
+  ...props
 }: ConfirmDialogProp) => {
   return (
-    <Dialog open={open} handler={handleOpen} placeholder={''}>
+    <Modal {...props}>
-      <DialogHeader className="flex justify-between" placeholder={''}>
+      <Modal.Content>
-        <Typography variant="h6" placeholder={''}>
+        <Modal.Header>{dialogTitle}</Modal.Header>
-          {dialogTitle}{' '}
+        <Modal.Body>{children}</Modal.Body>
-        </Typography>
+        <Modal.Footer className="flex justify-start gap-2">
-        <Button
+          <Button variant="tertiary" onClick={handleOpen}>
-          variant="outlined"
-          onClick={handleOpen}
-          className=" rounded-full"
-          placeholder={''}
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <DialogBody placeholder={''}>{children}</DialogBody>
-      <DialogFooter className="flex justify-start gap-2" placeholder={''}>
-        <Button variant="outlined" onClick={handleOpen} placeholder={''}>
             Cancel
           </Button>
-        <Button
+          <Button onClick={handleConfirm}>{confirmButtonTitle}</Button>
-          variant="gradient"
+        </Modal.Footer>
-          color={color}
+      </Modal.Content>
-          onClick={handleConfirm}
+    </Modal>
-          placeholder={''}
-        >
-          {confirmButtonTitle}
-        </Button>
-      </DialogFooter>
-    </Dialog>
   );
 };