update two factor modal

src/components/TwoFactor/Modal/index.tsx

@@ -3,10 +3,16 @@ import { getTwoFactorStatus } from 'services/userService';
 import { SetLoading } from 'types/gallery';
 import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
 import constants from 'utils/strings/constants';
-import DialogBox from '../../DialogBox';
 import TwoFactorModalSetupSection from './Setup';
 import TwoFactorModalManageSection from './Manage';
+import { Dialog, DialogContent, styled } from '@mui/material';
+import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
 
+const TwoFactorDialog = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialogContent-root': {
+        padding: theme.spacing(2, 4),
+    },
+}));
 interface Props {
     show: boolean;
     onHide: () => void;
@@ -41,22 +47,18 @@ function TwoFactorModal(props: Props) {
     };
 
     return (
-        <DialogBox
-            size="xs"
-            fullWidth
-            open={props.show}
-            onClose={props.onHide}
-            attributes={{
-                title: constants.TWO_FACTOR_AUTHENTICATION,
-            }}>
-            <>
+        <TwoFactorDialog maxWidth="xs" open={props.show} onClose={props.onHide}>
+            <DialogTitleWithCloseButton onClose={props.onHide}>
+                {constants.TWO_FACTOR_AUTHENTICATION}
+            </DialogTitleWithCloseButton>
+            <DialogContent sx={{ px: 4 }}>
                 {isTwoFactorEnabled ? (
                     <TwoFactorModalManageSection close={close} />
                 ) : (
                     <TwoFactorModalSetupSection close={close} />
                 )}
-            </>
-        </DialogBox>
+            </DialogContent>
+        </TwoFactorDialog>
     );
 }
 export default TwoFactorModal;