enrollment improvements

5 files changed, 64 insertions, 26 deletions

diff --git a/client/src/components/Input/Input.module.css b/client/src/components/Input/Input.module.css
index b02591c..59867e9 100644
--- a/client/src/components/Input/Input.module.css
+++ b/client/src/components/Input/Input.module.css
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   font-family: 'Barlow';
+  margin: 15px 0px;
   font-size: var(--font-medium-s);
 }
 
@@ -11,7 +12,7 @@
 }
 
 .input__field {
-  width: 300px;
+  width: 330px;
   margin: 10px 0px;
   padding: 18px 10px;
   border: 3px solid;
diff --git a/client/src/components/LanguageSelect/LanguageSelect.js b/client/src/components/LanguageSelect/LanguageSelect.jsx
index ac455b8..dd2997f 100644
--- a/client/src/components/LanguageSelect/LanguageSelect.js
+++ b/client/src/components/LanguageSelect/LanguageSelect.jsx
@@ -1,13 +1,9 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import i18next from 'i18next'
+import { Button, Popover, List, ListItem, ListSubheader } from '@mui/material'
 
-import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
-import Button from '@mui/material/Button'
-import Popover from '@mui/material/Popover'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListSubheader from '@mui/material/ListSubheader'
+import styles from './LanguageSelect.module.css'
 
 const languageMap = {
   en: { label: 'English', dir: 'ltr', active: true },
@@ -18,16 +14,22 @@ const LanguageSelect = () => {
   const selected = localStorage.getItem('i18nextLng') || 'en'
   const { t } = useTranslation()
 
-  const [menuAnchor, setMenuAnchor] = React.useState(null)
-  React.useEffect(() => {
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  useEffect(() => {
     document.body.dir = languageMap[selected]?.dir
   }, [menuAnchor, selected])
 
   return (
-    <div className="d-flex justify-content-end align-items-center language-select-root">
-      <Button onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}>
-        {languageMap[selected]?.label}
-        <ArrowDropDown fontSize="small" />
+    <div className={styles.language}>
+      <Button
+        onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}
+        sx={{ margin: '0px 15px', padding: '0px' }}
+      >
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/language.svg`}
+          height="80px"
+          width="80px"
+        />
       </Button>
       <Popover
         open={!!menuAnchor}
@@ -44,7 +46,7 @@ const LanguageSelect = () => {
       >
         <div>
           <List>
-            <ListSubheader>{t('select_language')}</ListSubheader>
+            <ListSubheader>{t('SELECT_LANGUAGE')}</ListSubheader>
             {Object.keys(languageMap)?.map((item) => (
               <ListItem
                 button
diff --git a/client/src/components/LanguageSelect/LanguageSelect.module.css b/client/src/components/LanguageSelect/LanguageSelect.module.css
new file mode 100644
index 0000000..9a4029c
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.module.css
@@ -0,0 +1,5 @@
+.language {
+  position: absolute;
+  top: 100px;
+  right: 150px;
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 312d01e..57cb9bb 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -1,7 +1,9 @@
 import React from 'react'
-import { Modal, Typography, Box, Button } from '@mui/material'
+import { Modal, Box, Button } from '@mui/material'
+import styles from './Modal.module.css'
+import { Container } from '@mui/system'
 
-const PopUpModal = () => {
+const PopUpModal = ({ title, description, image }) => {
   const style = {
     position: 'absolute',
     top: '50%',
@@ -18,8 +20,14 @@ const PopUpModal = () => {
   const handleClose = () => setOpen(false)
 
   return (
-    <>
-      <Button onClick={handleOpen}>Open modal</Button>
+    <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}
@@ -27,15 +35,21 @@ const PopUpModal = () => {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Text in a modal
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </Typography>
+          <h1 id="modal-modal-title" className={styles.modal__title}>
+            {title}
+          </h1>
+          <Container sx={{ display: 'flex' }}>
+            <img
+              src={image}
+              height="200px"
+              width="200px"
+              className={styles.modal__image}
+            />
+            <p className={styles.modal__content}>{description}</p>
+          </Container>
         </Box>
       </Modal>
-    </>
+    </div>
   )
 }
 
diff --git a/client/src/components/Modal/Modal.module.css b/client/src/components/Modal/Modal.module.css
new file mode 100644
index 0000000..547445b
--- /dev/null
+++ b/client/src/components/Modal/Modal.module.css
@@ -0,0 +1,16 @@
+.modal {
+  margin: 0px 15px;
+}
+
+.modal__title {
+  text-align: center;
+  margin: 20px 0px 40px;
+}
+
+.modal__image {
+  width: 40%;
+}
+
+.modal__content {
+  width: 60%;
+}