diff options
Diffstat (limited to 'client/src/pages/Enrollment')
| -rw-r--r-- | client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 49 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css | 13 |
2 files changed, 50 insertions, 12 deletions
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index ddd656c..7643f76 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -27,6 +27,25 @@ const PhotoCapture = () => { 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO' ] + const svgIcon = () => ( + <svg + width="100%" + height="100%" + className="svg" + viewBox="0 0 300 200" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <defs> + <mask id="overlay-mask" x="0" y="0" width="100%" height="100%"> + <rect x="0" y="0" width="100%" height="100%" fill="#fff" /> + <circle cx="50%" cy="50%" r="70" /> + </mask> + </defs> + <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" /> + </svg> + ) + return ( <> <Header subheading={t('ENROLLMENT')} /> @@ -50,18 +69,24 @@ const PhotoCapture = () => { /> <div className={styles.card__container}> {!userData.photo ? ( - <Webcam - audio={false} - height={400} - ref={webcamRef} - screenshotFormat="image/jpeg" - width={600} - videoConstraints={{ - height: 400, - width: 600, - facingMode: 'user' - }} - /> + <div className={styles.webcam__container}> + <Webcam + audio={false} + height={400} + ref={webcamRef} + screenshotFormat="image/jpeg" + width={600} + videoConstraints={{ + height: 400, + width: 600, + facingMode: 'user' + }} + /> + <div className={styles.overlay__container}> + {svgIcon()} + </div> + </div> + ) : ( <img id="img" src={userData.photo} /> )} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css index ad193e1..4a82e8e 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css @@ -2,4 +2,17 @@ display: flex; justify-content: center; margin: 10px; +} + +.webcam__container { + position: relative; +} + +.overlay__container { + position: absolute ; + width: 100%; + top: 0 ; + right: 0 ; + bottom: 0 ; + left: 0; }
\ No newline at end of file |