diff options
Diffstat (limited to 'client/src/pages/Update/PhotoCapture')
| -rw-r--r-- | client/src/pages/Update/PhotoCapture/PhotoCapture.jsx | 29 |
1 files changed, 23 insertions, 6 deletions
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx index 8e483a6..25f8572 100644 --- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -8,10 +8,11 @@ import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' +import PopUpModal from '../../../components/Modal/Modal' const PhotoCapture = () => { const { t } = useTranslation() - const { userData, setUserData, oriUserData } = userContext() + const { userData, setUserData } = userContext() const navigate = useNavigate() @@ -22,8 +23,6 @@ const PhotoCapture = () => { setUserData({ ...userData, photo: imageSrc }) }) - console.log(oriUserData.photo) - const handleSubmit = () => { console.log(userData.photo) if (userData.photo) { @@ -31,11 +30,29 @@ const PhotoCapture = () => { } } - console.log(userData?.photo) - return ( <> <Header subheading={t('UPDATE')} /> + <PopUpModal + title="Update 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 @@ -51,7 +68,7 @@ const PhotoCapture = () => { }} /> ) : ( - <img src={userData?.photo} /> + <img id="img" src={userData?.photo} /> )} </div> <Grid container columnSpacing={10} justifyContent="center"> |