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

[INJIVER-727] fix loader and color changes
mosip · Oct 24, 2024 · 9a4bd89 · 9a4bd89
2 parents 2267058 + f4d919d
commit 9a4bd89
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 35 deletions.
diff --git a/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx b/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx
@@ -73,7 +73,7 @@ function VerificationMethodTabs(props: any) {
   return (
     <div className="container mx-auto w-[100%] bg-lighter-gradient  max-w-[100vw] overflow-x-hidden lg:overflow-x-auto">
       <div className="flex flex-row items-center mx-auto justify-center relative">
-        <div className="absolute left-0 h-full w-12 bg-arrowBackGround md:hidden grid items-center">
+        <div className="absolute left-0 h-full w-12 bg-light-gradient md:hidden grid items-center">
           <button
             id="tabs-carousel-left-icon"
             onClick={handlePrevious}
@@ -115,7 +115,7 @@ function VerificationMethodTabs(props: any) {
             />
           </div>
         </div>
-        <div className="absolute right-0 h-full w-12 bg-arrowBackGround md:hidden grid items-center">
+        <div className="absolute right-0 h-full w-12 bg-light-gradient md:hidden grid items-center">
           <button
             id="tabs-carousel-right-icon"
             onClick={handleNext}

diff --git a/ui/src/components/Home/VerificationSection/QrScanner.tsx b/ui/src/components/Home/VerificationSection/QrScanner.tsx
@@ -181,10 +181,10 @@ function QrScanner() {
   return (
     <div
       ref={scannerRef}
-      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"
+      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 z-[100000]"
     >
       {isLoading && (
-        <div className="absolute flex items-center justify-center bg-white z-10 inset-0 lg:inset-auto">
+        <div className="absolute flex items-center justify-center bg-white inset-0 lg:inset-auto">
           <Loader innerBg="bg-white"/>
         </div>
       )}
@@ -199,7 +199,7 @@ function QrScanner() {
       )}
 
       <div
-        className={`relative h-screen w-screen lg:h-full lg:w-full bg-black lg:rounded-lg overflow-hidden flex items-center justify-center z-0 ${
+        className={`relative h-screen w-screen lg:h-full lg:w-full bg-black lg:rounded-lg overflow-hidden flex items-center justify-center ${
           isLoading ? "hidden" : "block"
         }`}
       >
@@ -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 z-20"
+          className="absolute top-10 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
@@ -9,7 +9,7 @@ import {Pages} from "../../utils/config";
 const SubMenu = () => {
     return (
         <div id="help-submenu"
-             className="absolute top-[36px] left-[-12px] mt-2 w-[100vw] lg:w-[250px] lg:top-[24px] lg:left-[-190px] bg-white rounded-md py-1 ring-1 ring-black ring-opacity-5 lg:py-5 lg:shadow-lg">
+             className="absolute top-[36px] left-[-12px] mt-2 w-[100vw] lg:w-[250px] lg:top-[24px] lg:left-[-190px] bg-white rounded-md py-1 ring-1 ring-black ring-opacity-5 lg:py-5 lg:shadow-lg z-60">
             <a id="contact-us"
                 href="https://community.mosip.io/"
                target="_blank"
@@ -31,9 +31,9 @@ const MobileDropDownMenu = ({showMenu}: { showMenu: boolean }) => {
         {
             showMenu && (
                 <div id="menu"
-                     className="absolute right-0 top-[68px] w-[100vw] bg-white rounded-md shadow-lg p-3 ring-1 ring-black ring-opacity-5 font-bold text-[14px] z-[1000]">
+                     className="absolute right-0 top-[68px] w-[100vw] bg-white rounded-md shadow-lg p-3 ring-1 ring-black ring-opacity-5 font-bold text-[14px] z-60">
                     <a id="home-button" href={Pages.Home} className="block px-1 py-2 text-sm text-gray-700 hover:bg-gray-100">Home</a>
-                    <a id="verify-credentials-button" href={Pages.Home} className="block px-1 py-2 font-bold text-sm bg-gradient bg-clip-text text-transparent">Verify Credentials</a>
+                    <a id="verify-credentials-button" href={Pages.Home} className="block px-1 py-2 font-bold text-sm bg-gradient-sm bg-clip-text text-transparent">Verify Credentials</a>
                     <div className="relative">
                         <button id="submenu-button"
                                 className="inline-flex items-center w-full text-left px-1 py-3 text-sm text-gray-700 hover:bg-gray-100"
@@ -85,12 +85,12 @@ const DesktopMenu = () => {
 
 function Navbar(props: any) {
     const [showMenu, setShowMenu] = useState(false);
-    // Logo goes here
+
     return (
-        <nav className="bg-background border-gray-200 xs:px-4 lg:px-20 py-3.5 rounded drop-shadow-md">
+        <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-gray-100 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="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"
                         aria-controls="navbar-default" aria-expanded="false" id="hamburger"
                         onClick={() => setShowMenu(show => !show)}
                 >

diff --git a/ui/src/components/commons/Loader.tsx b/ui/src/components/commons/Loader.tsx
@@ -1,16 +1,21 @@
 import React from "react";
 
-function Loader(props: any) {
+const Loader = (props: { className?: string; innerBg?: string }) => {
   return (
-    <div
-      id="loader"
-      className={`bg-gradient p-[3px] w-[56px] lg:w-[76px] aspect-square rounded-[50%] animate-spin ${
-        props.className ?? ""
-      }`}
-    >
-      <div className={`${props.innerBg??"bg-white"} rounded-full w-full h-full`} />
+    <div id="loader" className="flex justify-center items-center">
+      <div
+        className={`w-16 h-16 rounded-full relative flex items-center justify-center bg-gradient animate-spin ${
+          props.className ?? ""
+        }`}
+      >
+        <div
+          className={`${
+            props.innerBg ?? "bg-white"
+          } w-[85%] h-[85%] rounded-full`}
+        />
+      </div>
     </div>
   );
-}
+};
 
 export default Loader;
diff --git a/ui/src/index.css b/ui/src/index.css
@@ -7,7 +7,7 @@
 @layer base {
   :root {
     --iv-font-base: "Inter", sans-serif;
-    --iv-primary-color: #951F6F;
+    --iv-primary-color: #951f6f;
     --iv-logo-start-color: #ffb600;
     --iv-background-color: #ffffff;
     --iv-white-text: #ffffff;
@@ -41,6 +41,17 @@
     --iv-disabledTab-bg: #e5e7eb;
     --iv-disabledTab-text: #4b5563;
     --iv-document-icon: #000000;
+    --iv-gradient-scanning-line: linear-gradient(
+      90deg,
+      #ff5300 0%,
+      #fb5103 16%,
+      #f04c0f 31%,
+      #de4322 46%,
+      #c5363c 61%,
+      #a4265f 75%,
+      #7c1389 90%,
+      #5b03ad 100%
+    );
   }
   [class="purple_theme"] {
     --iv-font-base: "Gentium Plus", serif;
@@ -78,6 +89,17 @@
     --iv-disabledTab-bg: #e5e7eb;
     --iv-disabledTab-text: #4b5563;
     --iv-document-icon: #000000;
+    --iv-gradient-scanning-line: linear-gradient(
+      90deg,
+      #ff5300 0%,
+      #fb5103 16%,
+      #f04c0f 31%,
+      #de4322 46%,
+      #c5363c 61%,
+      #a4265f 75%,
+      #7c1389 90%,
+      #5b03ad 100%
+    );
   }
 }
 
@@ -95,17 +117,7 @@ code {
     monospace;
 }
 
-@keyframes scan-mobile {
-  0% {
-    transform: translateY(-125px);
-  }
-  50% {
-    transform: translateY(125px);
-  }
-  100% {
-    transform: translateY(-125px);
-  }
-}
+/* scanning line */
 
 @keyframes scan-desktop {
   0% {
@@ -122,11 +134,31 @@ code {
 .scanning-line {
   width: 100%;
   height: 2px;
-  background: var(--iv-primary-color);
+  background: var(--iv-gradient-scanning-line);
   z-index: 100000;
-  box-shadow: 1px 2px 8px 1px var(--iv-primary-color);
+  box-shadow: 1px 2px 8px 1px var(--iv-gradient-scanning-line);
   animation: scan-mobile 3s infinite;
   @media (min-width: 1024px) {
     animation: scan-desktop 3s infinite;
   }
 }
+
+/* loader */
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+  -webkit-animation: spin 1s linear infinite; /* For Safari */
+}
+
+#loader {
+  will-change: transform;
+}
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -55,6 +55,7 @@ module.exports = {
       backgroundImage: {
         "gradient":
           "linear-gradient(90deg, #FF5300 0%, #FB5103 16%, #F04C0F 31%, #DE4322 46%, #C5363C 61%, #A4265F 75%, #7C1389 90%, #5B03AD 100%)",
+        "gradient-sm":"linear-gradient(90deg, rgb(255, 83, 0) 0%, rgb(251, 81, 3) 5%, rgb(240, 76, 15) 10%, rgb(222, 67, 34) 15%, rgb(197, 54, 60) 20%, rgb(164, 38, 95) 30%, rgb(124, 19, 137) 35%, rgb(91, 3, 173) 45%)",
         "lighter-gradient":
           "linear-gradient(90deg, rgba(255, 83, 0, 0.08) 0%, rgba(251, 81, 3, 0.08) 16%, rgba(240, 76, 15, 0.08) 31%, rgba(222, 67, 34, 0.08) 46%, rgba(197, 54, 60, 0.08) 61%, rgba(164, 38, 95, 0.08) 75%, rgba(124, 19, 137, 0.08) 90%, rgba(91, 3, 173, 0.08) 100%)",
       },