Add custom modal

src/core/components/CustomModal.tsx

+import { Modal } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { Dispatch, SetStateAction } from 'react';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface ICustomModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+  children: React.ReactNode;
+  customStyle: { backgroundColor?: string; padding?: string };
+}
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    backgroundColor: '#fefefe',
+    margin: '7% auto',
+    padding: 'none',
+    border: 'none',
+    width: '85%',
+    [theme.breakpoints.down('sm')]: {
+      margin: '3% auto',
+      width: '95%',
+    },
+  },
+  modalContent: (customStyle: ICustomModalProps['customStyle']) => ({
+    ...{
+      backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',
+      border: 'none',
+      padding: customStyle.padding || 'none',
+      boxShadow: theme.shadows[5],
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  }),
+}));
+
+export const CustomModal = ({
+  isOpen,
+  setIsOpen,
+  customStyle = {},
+  children,
+}: ICustomModalProps) => {
+  const classes = useStyles(customStyle);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const body = <div className={classes.modalContent}>{children}</div>;
+
+  return (
+    <div>
+      <Modal
+        className={classes.modal}
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby="custom-modal"
+        aria-describedby="custom-modal"
+      >
+        {body}
+      </Modal>
+    </div>
+  );
+};
+
+export default CustomModal;

src/core/components/ProfileButton.tsx

 import { Button } from '@material-ui/core';
 import React, { useState } from 'react';
-import { ProfileModal } from './ProfileModal';
+import { CustomModal } from './CustomModal';
 
 export const ProfileButton = () => {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
@@ -14,7 +14,13 @@ export const ProfileButton = () => {
       <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
         Open Profile
       </Button>
-      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
+      <CustomModal
+        isOpen={isProfileModalOpen}
+        setIsOpen={setIsProfileModalOpen}
+        customStyle={{ backgroundColor: 'white', padding: '10px' }}
+      >
+        Modal content
+      </CustomModal>
     </div>
   );
 };

src/core/components/ProfileModal.tsx

-import { Modal } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import React, { Dispatch, SetStateAction, useState } from 'react';
-
-function rand() {
-  return Math.round(Math.random() * 20) - 10;
-}
-
-function getModalStyle() {
-  const top = 50 + rand();
-  const left = 50 + rand();
-
-  return {
-    top: `${top}%`,
-    left: `${left}%`,
-    transform: `translate(-${top}%, -${left}%)`,
-  };
-}
-
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    position: 'absolute',
-    width: 400,
-    backgroundColor: theme.palette.background.paper,
-    border: '2px solid #000',
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
-  },
-}));
-
-type Dispatcher<S> = Dispatch<SetStateAction<S>>;
-
-interface IProfileModalProps {
-  isOpen: boolean;
-  setIsOpen: Dispatcher<boolean>;
-}
-
-export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
-  const classes = useStyles();
-  const [modalStyle] = useState(getModalStyle);
-
-  const handleClose = () => {
-    setIsOpen(false);
-  };
-
-  const body = (
-    <div style={modalStyle} className={classes.paper}>
-      <h2 id="simple-modal-title">Text in a modal</h2>
-      <p id="simple-modal-description">
-        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-      </p>
-    </div>
-  );
-
-  return (
-    <div>
-      <Modal
-        open={isOpen}
-        onClose={handleClose}
-        aria-labelledby="profile-modal"
-        aria-describedby="profile-modal"
-      >
-        {body}
-      </Modal>
-    </div>
-  );
-};
-
-export default ProfileModal;