From 1926a54d1f7b8bc1ed690aaf8e3b679b41edce7b Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Sat, 20 Aug 2022 21:52:57 +0530
Subject: enrollment improvements

---
 client/src/components/Input/Input.module.css       |  3 +-
 .../components/LanguageSelect/LanguageSelect.js    | 67 ---------------------
 .../components/LanguageSelect/LanguageSelect.jsx   | 69 ++++++++++++++++++++++
 .../LanguageSelect/LanguageSelect.module.css       |  5 ++
 client/src/components/Modal/Modal.jsx              | 36 +++++++----
 client/src/components/Modal/Modal.module.css       | 16 +++++
 6 files changed, 117 insertions(+), 79 deletions(-)
 delete mode 100644 client/src/components/LanguageSelect/LanguageSelect.js
 create mode 100644 client/src/components/LanguageSelect/LanguageSelect.jsx
 create mode 100644 client/src/components/LanguageSelect/LanguageSelect.module.css
 create mode 100644 client/src/components/Modal/Modal.module.css

(limited to 'client/src/components')

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.js
deleted file mode 100644
index ac455b8..0000000
--- a/client/src/components/LanguageSelect/LanguageSelect.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import i18next from 'i18next'
-
-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'
-
-const languageMap = {
-  en: { label: 'English', dir: 'ltr', active: true },
-  hi: { label: 'Hindi', dir: 'ltr', active: false }
-}
-
-const LanguageSelect = () => {
-  const selected = localStorage.getItem('i18nextLng') || 'en'
-  const { t } = useTranslation()
-
-  const [menuAnchor, setMenuAnchor] = React.useState(null)
-  React.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" />
-      </Button>
-      <Popover
-        open={!!menuAnchor}
-        anchorEl={menuAnchor}
-        onClose={() => setMenuAnchor(null)}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right'
-        }}
-      >
-        <div>
-          <List>
-            <ListSubheader>{t('select_language')}</ListSubheader>
-            {Object.keys(languageMap)?.map((item) => (
-              <ListItem
-                button
-                key={item}
-                onClick={() => {
-                  i18next.changeLanguage(item)
-                  setMenuAnchor(null)
-                }}
-              >
-                {languageMap[item].label}
-              </ListItem>
-            ))}
-          </List>
-        </div>
-      </Popover>
-    </div>
-  )
-}
-
-export default LanguageSelect
diff --git a/client/src/components/LanguageSelect/LanguageSelect.jsx b/client/src/components/LanguageSelect/LanguageSelect.jsx
new file mode 100644
index 0000000..dd2997f
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.jsx
@@ -0,0 +1,69 @@
+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 styles from './LanguageSelect.module.css'
+
+const languageMap = {
+  en: { label: 'English', dir: 'ltr', active: true },
+  hi: { label: 'Hindi', dir: 'ltr', active: false }
+}
+
+const LanguageSelect = () => {
+  const selected = localStorage.getItem('i18nextLng') || 'en'
+  const { t } = useTranslation()
+
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  useEffect(() => {
+    document.body.dir = languageMap[selected]?.dir
+  }, [menuAnchor, selected])
+
+  return (
+    <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}
+        anchorEl={menuAnchor}
+        onClose={() => setMenuAnchor(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+      >
+        <div>
+          <List>
+            <ListSubheader>{t('SELECT_LANGUAGE')}</ListSubheader>
+            {Object.keys(languageMap)?.map((item) => (
+              <ListItem
+                button
+                key={item}
+                onClick={() => {
+                  i18next.changeLanguage(item)
+                  setMenuAnchor(null)
+                }}
+              >
+                {languageMap[item].label}
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default LanguageSelect
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%;
+}
-- 
cgit