From bdd4ad1b8b071fd04f1025076174757f0f355315 Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Fri, 26 Aug 2022 04:08:45 +0530
Subject: added overlay

---
 .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 49 ++++++++++++++++------
 .../PhotoCapture/PhotoCapture.module.css           | 13 ++++++
 2 files changed, 50 insertions(+), 12 deletions(-)

(limited to 'client/src/pages/Enrollment')

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
-- 
cgit