Merge pull request #219 from srikanth716/injiver-727-rebranding-theme

Injiver 727 rebranding theme
mosip · Oct 29, 2024 · 267ff95 · 267ff95
2 parents 9741ad1 + 79392f0
commit 267ff95
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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/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)}
+          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">
@@ -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} />

diff --git 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>