feat: update Dialog

src/components/Dialog/Dialog.tsx

@@ -1,12 +1,12 @@
-import React from "react";
 import MuiDialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
 import { SlideTransition } from "../Transitions/SlideTransition";
-import { Button } from "../Button";
-import { bool, string, func, shape, styleType } from "../../types";
+import { bool, string, func, shape, styleType } from "@types";
 
 // Docs: https://mui.com/components/dialogs/
 
@@ -36,27 +36,43 @@ export const Dialog = ({
   <MuiDialog
     open={isVisible}
     onClose={handleCancel}
-    aria-labelledby={"dialog-title"}
-    aria-describedby={"dialog-message"}
+    aria-labelledby="dialog-title"
+    aria-describedby="dialog-message"
     TransitionComponent={SlideTransition}
     style={styles?.container}
     fullWidth
   >
-    <DialogTitle id={"dialog-title"} style={styles?.title}>
+    <DialogTitle id="dialog-title" color="secondary" style={styles?.title}>
       {title}
     </DialogTitle>
     <DialogContent dividers>
-      <DialogContentText id={"dialog-message"} style={styles?.message}>
+      <DialogContentText
+        id="dialog-message"
+        color="action"
+        style={{ whiteSpace: "pre-line", ...(styles?.message ?? {}) }}
+      >
         {message}
       </DialogContentText>
     </DialogContent>
     <DialogActions>
-      {handleCancel && <Button label={cancelLabel} onClick={handleCancel} color={"primary"} />}
-      <Button label={acceptLabel} onClick={handleAccept} color={"primary"} />
+      {handleCancel && (
+        <DialogButton onClick={handleCancel} color="primary">
+          {cancelLabel}
+        </DialogButton>
+      )}
+      <DialogButton onClick={handleAccept} color="primary">
+        {acceptLabel}
+      </DialogButton>
     </DialogActions>
   </MuiDialog>
 );
 
+const DialogButton = styled(Button)(({ theme }) => ({
+  padding: "0.8rem 0.75rem 0.5rem 0.75rem",
+  fontWeight: "bold",
+  letterSpacing: "0.02rem"
+}));
+
 Dialog.propTypes = {
   isVisible: bool.isRequired,
   title: string.isRequired,

src/components/Dialog/useDialog.ts

@@ -7,5 +7,10 @@ export const useDialog = (initIsVisible = false) => {
   const openDialog = () => setIsDialogVisible(true);
   const closeDialog = () => setIsDialogVisible(false);
 
-  return { Dialog, isDialogVisible, openDialog, closeDialog };
+  return {
+    Dialog,
+    isDialogVisible,
+    openDialog,
+    closeDialog
+  };
 };