temp

src/components/MessageDialog/TitleWithCloseButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DialogTitle, IconButton } from '@mui/material';
+import { DialogTitle, IconButton, Typography } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { SpaceBetweenFlex } from 'components/Container';
 
@@ -9,7 +9,7 @@ const DialogTitleWithCloseButton = (props) => {
     return (
         <DialogTitle {...other}>
             <SpaceBetweenFlex>
-                {children}
+                <Typography variant="title">{children}</Typography>
                 {onClose && (
                     <IconButton
                         aria-label="close"

src/components/MessageDialog/index.tsx

@@ -9,7 +9,6 @@ import {
     DialogContent,
     DialogContentText,
     DialogProps,
-    Divider,
 } from '@mui/material';
 import DialogTitleWithCloseButton from './TitleWithCloseButton';
 
@@ -74,7 +73,6 @@ export default function MessageDialog({
                         onClose={!attributes?.nonClosable && handleClose}>
                         {attributes.title}
                     </DialogTitleWithCloseButton>
-                    <Divider />
                 </>
             )}
             {(children || attributes?.content) && (

src/themes/darkThemeOptions.tsx

@@ -91,9 +91,12 @@ const darkThemeOptions = createTheme({
         MuiDialog: {
             styleOverrides: {
                 paper: {
-                    '& .MuiDialogActions-root, & .MuiDialogTitle-root': {
+                    '& .MuiDialogActions-root': {
                         padding: '32px 24px',
                     },
+                    '& .MuiDialogTitle-root': {
+                        padding: '32px 24px 16px 24px',
+                    },
                     '& .MuiDialogActions-root button': {
                         marginLeft: '16px',
                         fontSize: '18px',