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 +++++
 .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 58 +++++++++++++++-------
 3 files changed, 91 insertions(+), 29 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
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index b53752c..0b8b4cb 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -37,6 +37,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('UPDATE')} />
@@ -58,23 +77,28 @@ const PhotoCapture = () => {
           </>
         }
       />
-      <div className={styles.card__container}>
-        {userData?.photo === '' ? (
-          <Webcam
-            audio={false}
-            height={300}
-            ref={webcamRef}
-            screenshotFormat="image/jpeg"
-            width={500}
-            videoConstraints={{
-              height: 300,
-              width: 500,
-              facingMode: 'user'
-            }}
-          />
-        ) : (
-          <img id="img" src={userData?.photo} />
-        )}
+      <div className={styles.webcam__container}>
+        <div className={styles.card__container}>
+          {userData?.photo === '' ? (
+            <Webcam
+              audio={false}
+              height={300}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={500}
+              videoConstraints={{
+                height: 300,
+                width: 500,
+                facingMode: 'user'
+              }}
+            />
+          ) : (
+            <img id="img" src={userData?.photo} />
+          )}
+        </div>
+        <div className={styles.overlay__container}>
+          {svgIcon()}
+        </div>
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
         <Grid item>
-- 
cgit