Merge pull request #204 from srikanth716/injiver-726-scan-view-width-…

…height-alignment [INJIVER-726] fix scan preview alignment
mosip · Oct 18, 2024 · 999cc74 · 999cc74
2 parents 1c848c1 + dafec1b
commit 999cc74
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/ui/src/components/Home/VerificationSection/QrScanner.tsx b/ui/src/components/Home/VerificationSection/QrScanner.tsx
@@ -181,7 +181,7 @@ function QrScanner() {
   return (
     <div
       ref={scannerRef}
-      className="fixed inset-0 lg:inset-auto flex items-center justify-center overflow-hidden lg:relative lg:overflow-visible"
+      className="fixed inset-0 lg:inset-auto flex items-center justify-center h-full lg:w-[21rem] lg:h-auto lg:aspect-square lg:relative lg:overflow-visible"
     >
       {isLoading && (
         <div className="absolute flex items-center justify-center bg-white z-10 inset-0 lg:inset-auto">
@@ -190,14 +190,12 @@ function QrScanner() {
       )}
 
       {!isCameraBlocked && (
-        <div className="absolute top-[-70px] left-[4px] h-[340px] w-[351px] flex items-center justify-center">
-          <div
-            id="scanning-line"
-            className={`hidden lg:${
-              isLoading ? "hidden" : "block"
-            } scanning-line`}
-          ></div>
-        </div>
+        <div
+          id="scanning-line"
+          className={`hidden lg:${
+            isLoading ? "hidden" : "block"
+          } scanning-line absolute flex items-center justify-center`}
+        />
       )}
 
       <div
@@ -216,15 +214,13 @@ function QrScanner() {
           ✕
         </button>
 
-        <div className="h-screen lg:h-auto relative rounded-lg overflow-hidden flex items-center justify-center">
-          <div className="lg:h-auto overflow-hidden">
+        <div className="h-screen lg:h-auto flex items-center justify-center">
+          <div className="overflow-hidden">
             <video
               ref={videoRef}
-              className="object-cover rounded-lg"
+              className="object-cover rounded-lg lg:aspect-square"
               style={{
-                transform: `scale(${
-                  1 + zoomLevel / ZOOM_STEP
-                }) translateZ(0)`,
+                transform: `scale(${1 + zoomLevel / ZOOM_STEP}) translateZ(0)`,
                 willChange: "transform",
                 WebkitTransform: `scale(${
                   1 + zoomLevel / ZOOM_STEP

diff --git a/ui/src/components/Home/VerificationSection/ScanQrCode.tsx b/ui/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -50,7 +50,7 @@ const ScanQrCode = () => {
             className="flex flex-col pt-0 pb-[100px] lg:py-[42px] px-0 lg:px-[104px] text-center content-center justify-center">
             <div className="xs:col-end-13">
                 <div
-                    className={`relative grid content-center justify-center w-[275px] lg:w-[350px] aspect-square my-1.5 mx-auto bg-cover`}
+                    className={`relative grid content-center justify-center w-[275px] h-auto lg:w-[360px] aspect-square my-1.5 mx-auto bg-cover`}
                     style={{backgroundImage: `url(${ScanOutline})`}}>
                     <div
                         className="grid bg-primary opacity-5 rounded-[12px] w-[250px] lg:w-[320px] aspect-square content-center justify-center">

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -105,13 +105,13 @@ code {
 
 @keyframes scan-desktop {
   0% {
-    transform: translateY(-158px);
+    transform: translateY(-168px);
   }
   50% {
-    transform: translateY(158px);
+    transform: translateY(168px);
   }
   100% {
-    transform: translateY(-158px);
+    transform: translateY(-168px);
   }
 }