4 files changed, 122 insertions, 6 deletions
diff --git a/client/src/components/Modal/ExtendedModal.jsx b/client/src/components/Modal/ExtendedModal.jsx
new file mode 100644
index 0000000..c181b14
--- /dev/null
+++ b/client/src/components/Modal/ExtendedModal.jsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import { Modal, Box, Button } from '@mui/material'
+import styles from './ExtendedModal.module.css'
+import { Container } from '@mui/system'
+
+const ExtendedPopUpModal = ({
+  title,
+  description1,
+  image1,
+  description2,
+  image2,
+  description3,
+  image3
+}) => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4
+  }
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div className={styles.modal}>
+      <Button onClick={handleOpen} sx={{ borderRadius: '50%' }}>
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/help.svg`}
+          height="65px"
+          width="65px"
+        />
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <h1 id="modal-modal-title" className={styles.modal__title}>
+            {title}
+          </h1>
+          <Container sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Container
+              sx={{
+                display: 'flex',
+                alignItems: 'center'
+              }}
+            >
+              <img
+                src={image1}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+              <h3 className={styles.modal__content}>{description1}</h3>
+            </Container>
+            <Container sx={{ display: 'flex', alignItems: 'center' }}>
+              <h3 className={styles.modal__content}>{description2}</h3>
+              <img
+                src={image2}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+            </Container>
+            <Container sx={{ display: 'flex', alignItems: 'center' }}>
+              <img
+                src={image3}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+              <h3 className={styles.modal__content}>{description3}</h3>
+            </Container>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  )
+}
+
+export default ExtendedPopUpModal
diff --git a/client/src/components/Modal/ExtendedModal.module.css b/client/src/components/Modal/ExtendedModal.module.css
new file mode 100644
index 0000000..b1252bd
--- /dev/null
+++ b/client/src/components/Modal/ExtendedModal.module.css
@@ -0,0 +1,22 @@
+.modal {
+  margin: 0px 15px;
+  position: absolute;
+  top: 100px;
+  right: 250px;
+}
+
+.modal__title {
+  text-align: center;
+  margin: 20px 0px 40px;
+  font-size: var(--font-medium);
+}
+
+.modal__image {
+  width: 50%;
+}
+
+.modal__content {
+  text-align: center;
+  width: 50%;
+  font-size: var(--font-medium-s);
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 57cb9bb..679503e 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -38,14 +38,14 @@ const PopUpModal = ({ title, description, image }) => {
           <h1 id="modal-modal-title" className={styles.modal__title}>
             {title}
           </h1>
-          <Container sx={{ display: 'flex' }}>
+          <Container sx={{ display: 'flex', alignItems: 'center' }}>
             <img
               src={image}
-              height="200px"
-              width="200px"
+              height="300px"
+              width="300px"
               className={styles.modal__image}
             />
-            <p className={styles.modal__content}>{description}</p>
+            <h3 className={styles.modal__content}>{description}</h3>
           </Container>
         </Box>
       </Modal>
diff --git a/client/src/components/Modal/Modal.module.css b/client/src/components/Modal/Modal.module.css
index 547445b..fd5e327 100644
--- a/client/src/components/Modal/Modal.module.css
+++ b/client/src/components/Modal/Modal.module.css
@@ -1,16 +1,21 @@
 .modal {
   margin: 0px 15px;
+  position: absolute;
+  top: 100px;
+  right: 250px;
 }
 
 .modal__title {
   text-align: center;
   margin: 20px 0px 40px;
+  font-size: var(--font-medium-large);
 }
 
 .modal__image {
-  width: 40%;
+  width: 50%;
 }
 
 .modal__content {
-  width: 60%;
+  width: 50%;
+  font-size: var(--font-medium-sm);
 }