diff options
Diffstat (limited to 'client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx')
| -rw-r--r-- | client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 21 |
1 files changed, 21 insertions, 0 deletions
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index 17fe3df..4e4a2b3 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -8,6 +8,7 @@ import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' import { t } from 'i18next' import { userContext } from '../../../context/User' +import PopUpModal from '../../../components/Modal/Modal' const PhotoCapture = () => { const navigate = useNavigate() @@ -22,6 +23,26 @@ const PhotoCapture = () => { return ( <> <Header subheading={t('ENROLLMENT')} /> + <PopUpModal + title="Capture your photo" + image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`} + description={ + <> + <ul> + <li className="list__item"> + Ensure that your photo is clear and in focus + </li> + <li className="list__item"> + Also, ensure that you are in the center of your photo + </li> + <li className="list__item"> + You won't be able to proceed until you have captured a + clear and centered photo + </li> + </ul> + </> + } + /> <div className={styles.card__container}> {!userData.photo ? ( <Webcam |