From 061b450b0a44bbd241593b621f0fd08080d5ad72 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Fri, 25 Oct 2024 11:25:10 +0530
Subject: [PATCH 1/3] [INJIVER-727] fix upload image invisible on hover

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
---
 ui/src/components/Home/VerificationSection/UploadQrCode.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
index 5df220ea..ad79284c 100644
--- a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
+++ b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
@@ -76,7 +76,9 @@ export const UploadQrCode = ({
       <div className="bg-gradient hover:text-white p-px bg-no-repeat rounded-[5px] w-[350px]">
         <label
           htmlFor={"upload-qr"}
-          cursor-pointer
+          onMouseEnter={()=>setHover(true)}
+          onMouseLeave={()=>setHover(false)}
+          onBlur={()=>setHover(false)} 
           className="group bg-white hover:bg-gradient font-bold h-[40px] rounded-[5px] flex content-center justify-center text-lgNormalTextSize pt-2 cursor-pointer"
         >
           <span className="mr-1.5">
@@ -90,8 +92,6 @@ export const UploadQrCode = ({
 
   return (
     <div
-      onMouseEnter={()=>setHover(true)}
-      onMouseLeave={()=>setHover(false)}
       className={`mx-auto my-1.5 flex content-center justify-center ${className}`}
     >
       <UploadButton displayMessage={displayMessage} />

From 67ab8286c7e37e38cdd407c0065aaadde4b77fd8 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Mon, 28 Oct 2024 14:57:08 +0530
Subject: [PATCH 2/3] [INJIVER-727] fix stepper step alignment and hamberger
 background

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
---
 .../Home/VerificationProgressTracker/DesktopStepper.tsx   | 4 ++--
 .../Home/VerificationProgressTracker/MobileStepper.tsx    | 8 ++++----
 ui/src/components/Home/VerificationSection/QrScanner.tsx  | 2 +-
 ui/src/components/PageTemplate/Navbar.tsx                 | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/Home/VerificationProgressTracker/DesktopStepper.tsx b/ui/src/components/Home/VerificationProgressTracker/DesktopStepper.tsx
index 8fc8412e..b7f065da 100644
--- a/ui/src/components/Home/VerificationProgressTracker/DesktopStepper.tsx
+++ b/ui/src/components/Home/VerificationProgressTracker/DesktopStepper.tsx
@@ -19,9 +19,9 @@ function DesktopStepper() {
                     steps.map((step: any, index: number) => (
                         <>
                             <div className="flex items-center">
-                                <div className='bg-gradient rounded-full p-[1px]'>
+                                <div className='bg-gradient rounded-full bg-no-repeat p-[2px] flex items-center justify-center'>
                                 <div
-                                    className={`text-center rounded-[9998px] w-6 h-6 flex items-center justify-center font-normal text-normal text-smallTextSize leading-5  ${isStepCompleted(index) ? "bg-gradient text-white border-1 border-transparent" : "bg-white text-primary border-[1px] border-transparent"}`}
+                                    className={`text-center rounded-full w-6 h-6 flex items-center justify-center font-normal text-normal text-smallTextSize leading-5 bg-no-repeat  ${isStepCompleted(index) ? "bg-gradient text-white border-1 border-transparent" : "bg-white text-primary border-[1px] border-transparent"}`}
                                 >
                                     {index + 1}
                                 </div>
diff --git a/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx b/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx
index 7d340673..26fce81a 100644
--- a/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx
+++ b/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx
@@ -5,13 +5,13 @@ import {convertToId, getRangeOfNumbers, getVerificationStepsCount} from "../../.
 
 const Step = ({stepNumber, activeOrCompleted, }: {stepNumber: number, activeOrCompleted: boolean}) => {
     const stepperStep = "flex items-center";
-    const stepperActiveOrCompleted = `rounded-full bg-gradient text-white p-[1px]`;
-    const stepperUpcomingStep = "bg-gradient rounded-full text-primary p-[1px]";
-    const stepperCircle = `${activeOrCompleted ? "bg-gradient" : "bg-white"} rounded-[9998px] border-[1px] border-transparent`;
+    const stepperActiveOrCompleted = "rounded-full bg-gradient bg-no-repeat text-white"; // Keep only gradient here
+    const stepperUpcomingStep = "bg-gradient bg-no-repeat rounded-full text-primary p-[2px]";
+    const stepperCircle = `${activeOrCompleted ? "bg-gradient" : "bg-white"} bg-no-repeat flex items-center justify-center w-9 h-9 rounded-full border-[1px] border-transparent`;
     return (
         <div className={`${stepperStep} ${activeOrCompleted ? stepperActiveOrCompleted : stepperUpcomingStep}`}
              data-step="1">
-            <div className={`flex items-center justify-center w-9 h-9 ${stepperCircle}`}>{stepNumber}</div>
+            <div className={stepperCircle}>{stepNumber}</div>
         </div>
     );
 }
diff --git a/ui/src/components/Home/VerificationSection/QrScanner.tsx b/ui/src/components/Home/VerificationSection/QrScanner.tsx
index eba1a810..95bd1224 100644
--- a/ui/src/components/Home/VerificationSection/QrScanner.tsx
+++ b/ui/src/components/Home/VerificationSection/QrScanner.tsx
@@ -208,7 +208,7 @@ function QrScanner() {
             stopVideoStream();
             dispatch(goToHomeScreen({}));
           }}
-          className="absolute top-10 right-4 lg:hidden bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700 focus:outline-none"
+          className="absolute top-7 right-4 lg:hidden bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700 focus:outline-none"
           aria-label="Close Scanner"
         >
           ✕
diff --git a/ui/src/components/PageTemplate/Navbar.tsx b/ui/src/components/PageTemplate/Navbar.tsx
index 59a9662a..30a1cf38 100644
--- a/ui/src/components/PageTemplate/Navbar.tsx
+++ b/ui/src/components/PageTemplate/Navbar.tsx
@@ -90,9 +90,9 @@ function Navbar(props: any) {
         <nav className="bg-background border-gray-200 xs:px-4 lg:px-20 py-3.5 rounded drop-shadow-md z-50 relative">
             <div className="container flex flex-wrap xs:justify-start lg:justify-between items-center h-[40px] mx-0">
                 <button data-collapse-toggle="navbar-default" type="button"
-                        className="inline-flex items-center p-3 text-sm text-gray-500 rounded-md lg:hidden hover:bg-gradient focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                        className={`${showMenu?"bg-lighter-gradient":"bg-background"} inline-flex items-center p-3 ml-1 text-sm text-gray-500 rounded-md lg:hidden dark:text-gray-400`}
                         aria-controls="navbar-default" aria-expanded="false" id="hamburger"
-                        onClick={() => setShowMenu(show => !show)}
+                        onClick={() => setShowMenu(!showMenu)}
                 >
                     <MenuIcon id="menu-icon" style={{width: "25px", height: "19px"}}/>
                 </button>

From 79392f07e4267a5ea022513ad2066c01ec733f31 Mon Sep 17 00:00:00 2001
From: srikanth716 <srikanthsri7447@gmail.com>
Date: Mon, 28 Oct 2024 15:16:02 +0530
Subject: [PATCH 3/3] [INJIVER-727] fix upload and scan icon disappear

Signed-off-by: srikanth716 <srikanthsri7447@gmail.com>
---
 ui/src/components/Home/VerificationSection/UploadQrCode.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
index ad79284c..76ed99da 100644
--- a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
+++ b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx
@@ -78,7 +78,7 @@ export const UploadQrCode = ({
           htmlFor={"upload-qr"}
           onMouseEnter={()=>setHover(true)}
           onMouseLeave={()=>setHover(false)}
-          onBlur={()=>setHover(false)} 
+          onTouchStart={()=>setHover(true)}
           className="group bg-white hover:bg-gradient font-bold h-[40px] rounded-[5px] flex content-center justify-center text-lgNormalTextSize pt-2 cursor-pointer"
         >
           <span className="mr-1.5">