redesign message dialog

src/components/DialogBox/base.tsx

@@ -1,49 +1,19 @@
-import { Dialog, DialogProps, styled } from '@mui/material';
+import { Dialog, styled } from '@mui/material';
 
-const DialogBoxBase = styled(Dialog)(({ fullScreen, theme }) => ({
-    '& .MuiDialogActions-root button': {
-        width: '100%',
+const DialogBoxBase = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        padding: 0,
+    },
+    '& .MuiDialogTitle-root': {
+        padding: theme.spacing(2),
+        paddingBottom: theme.spacing(1),
+    },
+    '& .MuiDialogContent-root': {
+        padding: theme.spacing(2),
+    },
+    '.MuiDialogTitle-root + .MuiDialogContent-root': {
+        paddingTop: 0,
     },
-    ...(fullScreen
-        ? {
-              '& .MuiDialogActions-root': {
-                  padding: theme.spacing(2, 3),
-                  flexDirection: 'column-reverse',
-              },
-              '& .MuiDialogActions-root button:not(:first-child)': {
-                  margin: 0,
-                  marginBottom: theme.spacing(1),
-              },
-          }
-        : {
-              '& .MuiDialogActions-root': {
-                  padding: theme.spacing(2, 3),
-              },
-              '& .MuiDialogActions-root button:not(:first-child)': {
-                  margin: 0,
-                  marginLeft: theme.spacing(2),
-              },
-          }),
 }));
 
-export const dialogCloseHandler =
-    ({
-        staticBackdrop,
-        nonClosable,
-        onClose,
-    }: {
-        staticBackdrop?: boolean;
-        nonClosable?: boolean;
-        onClose: () => void;
-    }): DialogProps['onClose'] =>
-    (_, reason) => {
-        if (nonClosable) {
-            // no-op
-        } else if (staticBackdrop && reason === 'backdropClick') {
-            // no-op
-        } else {
-            onClose();
-        }
-    };
-
 export default DialogBoxBase;

src/components/DialogBox/index.tsx

@@ -6,10 +6,12 @@ import {
     DialogActions,
     DialogContent,
     DialogProps,
+    Typography,
 } from '@mui/material';
-import DialogTitleWithCloseButton from './titleWithCloseButton';
-import MessageText from './messageText';
-import DialogBoxBase, { dialogCloseHandler } from './base';
+import DialogTitleWithCloseButton, {
+    dialogCloseHandler,
+} from './TitleWithCloseButton';
+import DialogBoxBase from './base';
 import { DialogBoxAttributes } from 'types/dialogBox';
 
 type IProps = React.PropsWithChildren<
@@ -59,7 +61,9 @@ export default function DialogBox({
             {(children || attributes?.content) && (
                 <DialogContent>
                     {children || (
-                        <MessageText>{attributes.content}</MessageText>
+                        <Typography color="text.secondary">
+                            {attributes.content}
+                        </Typography>
                     )}
                 </DialogContent>
             )}
@@ -68,6 +72,7 @@ export default function DialogBox({
                     <>
                         {attributes.close && (
                             <Button
+                                size="large"
                                 color={attributes.close?.variant ?? 'secondary'}
                                 onClick={() => {
                                     attributes.close.action &&
@@ -79,6 +84,7 @@ export default function DialogBox({
                         )}
                         {attributes.proceed && (
                             <Button
+                                size="large"
                                 color={attributes.proceed?.variant}
                                 onClick={() => {
                                     attributes.proceed.action();

src/components/DialogBox/messageText.tsx

@@ -1,9 +0,0 @@
-import { DialogContentText, styled } from '@mui/material';
-
-const MessageText = styled(DialogContentText)(({ theme }) => ({
-    paddingBottom: theme.spacing(2),
-    fontSize: '20px',
-    lineHeight: '24.2px',
-}));
-
-export default MessageText;

src/components/DialogBox/titleWithCloseButton.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { DialogTitle, IconButton, Typography } from '@mui/material';
+import {
+    DialogProps,
+    DialogTitle,
+    IconButton,
+    Typography,
+} from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { SpaceBetweenFlex } from 'components/Container';
 
@@ -9,7 +14,9 @@ const DialogTitleWithCloseButton = (props) => {
     return (
         <DialogTitle {...other}>
             <SpaceBetweenFlex>
-                <Typography variant="title">{children}</Typography>
+                <Typography variant="h3" fontWeight={'bold'}>
+                    {children}
+                </Typography>
                 {onClose && (
                     <IconButton
                         aria-label="close"
@@ -24,3 +31,23 @@ const DialogTitleWithCloseButton = (props) => {
 };
 
 export default DialogTitleWithCloseButton;
+
+export const dialogCloseHandler =
+    ({
+        staticBackdrop,
+        nonClosable,
+        onClose,
+    }: {
+        staticBackdrop?: boolean;
+        nonClosable?: boolean;
+        onClose: () => void;
+    }): DialogProps['onClose'] =>
+    (_, reason) => {
+        if (nonClosable) {
+            // no-op
+        } else if (staticBackdrop && reason === 'backdropClick') {
+            // no-op
+        } else {
+            onClose();
+        }
+    };

src/pages/_app.tsx

@@ -260,6 +260,7 @@ export default function App({ Component, err }) {
                 <LoadingBar color="#51cd7c" ref={loadingBar} />
 
                 <DialogBox
+                    size="xs"
                     open={messageDialogView}
                     onClose={closeMessageDialog}
                     attributes={dialogMessage}