From 02936bcdabb5e2550b12fa94d435fdbcff348f71 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Sun, 21 Aug 2022 20:05:34 +0530 Subject: added modal --- client/public/assets/images/address.svg | 46 +++++++++++ client/public/assets/images/communication.svg | 53 ++++++++++++ client/public/assets/images/document.svg | 20 +++-- client/public/assets/images/fingerprint_scan.svg | 96 ++++++++++++++++++++++ client/public/assets/images/id.svg | 63 ++++++++++++++ client/public/assets/images/iris_scan.svg | 35 ++++++++ client/public/assets/images/photo.svg | 66 +++++++++++++++ client/public/assets/images/status.svg | 9 ++ client/src/App.js | 1 + client/src/components/Modal/ExtendedModal.jsx | 89 ++++++++++++++++++++ .../src/components/Modal/ExtendedModal.module.css | 22 +++++ client/src/components/Modal/Modal.jsx | 8 +- client/src/components/Modal/Modal.module.css | 9 +- client/src/pages/Enrollment/Address/Address.jsx | 21 +++++ .../src/pages/Enrollment/Agreement/Agreement.jsx | 12 +++ .../Enrollment/DocumentScanner/DocumentScanner.jsx | 28 ++++++- .../pages/Enrollment/Fingerprint/Fingerprint.jsx | 12 +++ client/src/pages/Enrollment/FormOne/FormOne.jsx | 23 ++++++ .../pages/Enrollment/FormOne/FormOne.module.css | 2 +- client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 18 ++++ client/src/pages/Enrollment/IrisScan/IrisScan.jsx | 12 +++ .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 21 +++++ client/src/pages/Home/Home.jsx | 12 ++- client/src/services/apiservice.js | 2 +- client/src/styles/GlobalVariables.css | 7 ++ 25 files changed, 666 insertions(+), 21 deletions(-) create mode 100644 client/public/assets/images/address.svg create mode 100644 client/public/assets/images/communication.svg create mode 100644 client/public/assets/images/fingerprint_scan.svg create mode 100644 client/public/assets/images/id.svg create mode 100644 client/public/assets/images/iris_scan.svg create mode 100644 client/public/assets/images/photo.svg create mode 100644 client/public/assets/images/status.svg create mode 100644 client/src/components/Modal/ExtendedModal.jsx create mode 100644 client/src/components/Modal/ExtendedModal.module.css diff --git a/client/public/assets/images/address.svg b/client/public/assets/images/address.svg new file mode 100644 index 0000000..dc10b51 --- /dev/null +++ b/client/public/assets/images/address.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/communication.svg b/client/public/assets/images/communication.svg new file mode 100644 index 0000000..a429781 --- /dev/null +++ b/client/public/assets/images/communication.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/document.svg b/client/public/assets/images/document.svg index 2393ad7..71a464a 100644 --- a/client/public/assets/images/document.svg +++ b/client/public/assets/images/document.svg @@ -1,9 +1,11 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/fingerprint_scan.svg b/client/public/assets/images/fingerprint_scan.svg new file mode 100644 index 0000000..e197c71 --- /dev/null +++ b/client/public/assets/images/fingerprint_scan.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/id.svg b/client/public/assets/images/id.svg new file mode 100644 index 0000000..95c3f45 --- /dev/null +++ b/client/public/assets/images/id.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/iris_scan.svg b/client/public/assets/images/iris_scan.svg new file mode 100644 index 0000000..6264c59 --- /dev/null +++ b/client/public/assets/images/iris_scan.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/photo.svg b/client/public/assets/images/photo.svg new file mode 100644 index 0000000..9c4f353 --- /dev/null +++ b/client/public/assets/images/photo.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/status.svg b/client/public/assets/images/status.svg new file mode 100644 index 0000000..f76823b --- /dev/null +++ b/client/public/assets/images/status.svg @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index 0d6d904..f6ff8dd 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,6 +1,7 @@ import React from 'react' import LanguageSelect from './components/LanguageSelect/LanguageSelect' import Index from './routes' +import './styles/GlobalVariables.css' const App = () => { return ( 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 ( +
+ + + +

+ {title} +

+ + + +

{description1}

+ + +

{description2}

+ + + + +

{description3}

+ + + + +
+ ) +} + +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 }) => {

{title}

- + -

{description}

+

{description}

 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); } diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 6bf4044..78b0737 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -5,6 +5,7 @@ import { State, City } from 'country-state-city' import Select from 'react-select' import { userContext } from '../../../context/User' import { useTranslation } from 'react-i18next' +import PopUpModal from '../../../components/Modal/Modal' import styles from './Address.module.css' @@ -47,6 +48,26 @@ const Address = () => { return ( <>
+ +
    +
  • + Enter your details according to the relevant fields +
    • +
  • + State: Select the state you belong to. from the dropdown list +
    • +
  • + District: Select the district you belong to. from the dropdown + list +
    • +
+ + } + />
{ @@ -53,6 +54,17 @@ const Agreement = ({ unverified, setUnverified }) => { theme={'colored'} />
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ @@ -147,7 +147,31 @@ const DocumentScanner = () => { return ( <>
- + +
    +
  • + Consists of 3 steps : +
      +
    • Proof of Identity:
      • +
    • Proof of Address:
      • +
    • Proof of Date of Birth:
      • +
    +
    • +
  • + Ensure that your documents are in the center of the frame +
    • +
  • + You won't be able to proceed until you have scanned all the + required documents +
    • +
+ + } + />
diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx index 1860a2f..e2fe104 100644 --- a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx +++ b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx @@ -5,12 +5,24 @@ import styles from './Fingerprint.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' +import PopUpModal from '../../../components/Modal/Modal' const Fingerprint = () => { const { t } = useTranslation() return ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ const { t } = useTranslation() @@ -33,6 +34,28 @@ const FormOne = () => { return ( <>
+ +
    +
  • + Select your residency by selecting the appropriate checkbox +
    • +
  • + Enter your full name without any title or salutation +
    • +
  • + Select your gender by clicking on the appropriate card +
    • +
  • + Select your date of birth from the provided calender +
    • +
+ + } + />
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css index fae8e9f..646ea12 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.module.css +++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css @@ -45,7 +45,7 @@ } .formone__dob_input { - width: 300px; + width: 330px; margin: 10px 0px; padding: 11px 10px; border: 3px solid; diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index 0bce4bc..b4a53ed 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -5,6 +5,7 @@ import Header from '../../../components/Header/Header' import { userContext } from '../../../context/User' import styles from './FormTwo.module.css' +import PopUpModal from '../../../components/Modal/Modal' const FormTwo = () => { const { t } = useTranslation() @@ -12,6 +13,23 @@ const FormTwo = () => { return ( <>
+ +
    +
  • + Enter your 10 digit mobile number without any prefix or country + code +
    • +
  • + Enter your email address in proper format +
    • +
+ + } + />
{ @@ -11,6 +12,17 @@ const IrisScan = () => { return ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ const navigate = useNavigate() @@ -22,6 +23,26 @@ const PhotoCapture = () => { return ( <>
+ +
    +
  • + Ensure that your photo is clear and in focus +
    • +
  • + Also, ensure that you are in the center of your photo +
    • +
  • + You won't be able to proceed until you have captured a + clear and centered photo +
    • +
+ + } + />
{!userData.photo ? ( { @@ -11,7 +11,15 @@ const Home = ({ page, setPage }) => { return ( <>
- +
{ diff --git a/client/src/styles/GlobalVariables.css b/client/src/styles/GlobalVariables.css index a1e3384..0d29d26 100644 --- a/client/src/styles/GlobalVariables.css +++ b/client/src/styles/GlobalVariables.css @@ -3,6 +3,13 @@ --color-shadow: rgba(0, 0, 0, 0.24); --font-large: 4rem; + --font-medium-large: 2.5rem; --font-medium: 2rem; + --font-medium-sm: 1.5rem; --font-medium-s: 1.25rem; } + +.list__item { + margin: 10px 0px; + padding: 10px 0px; +} -- cgit