diff --git a/ui/src/assets/no-photography-icon.svg b/ui/src/assets/camera-access-denied-icon.svg similarity index 100% rename from ui/src/assets/no-photography-icon.svg rename to ui/src/assets/camera-access-denied-icon.svg diff --git a/ui/src/assets/gradient-scan-icon.svg b/ui/src/assets/gradient-scan-icon.svg new file mode 100644 index 00000000..8586da59 --- /dev/null +++ b/ui/src/assets/gradient-scan-icon.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/assets/upload-icon.svg b/ui/src/assets/gradient-upload-icon.svg similarity index 100% rename from ui/src/assets/upload-icon.svg rename to ui/src/assets/gradient-upload-icon.svg diff --git a/ui/src/assets/tab-scan-fill.svg b/ui/src/assets/tab-scan-fill.svg deleted file mode 100644 index daf58dfa..00000000 --- a/ui/src/assets/tab-scan-fill.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/ui/src/assets/white-scan-icon.svg b/ui/src/assets/white-scan-icon.svg new file mode 100644 index 00000000..8a8982af --- /dev/null +++ b/ui/src/assets/white-scan-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/ui/src/assets/white-upload-icon.svg b/ui/src/assets/white-upload-icon.svg new file mode 100644 index 00000000..8b7fef2c --- /dev/null +++ b/ui/src/assets/white-upload-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx b/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx index 972ecadf..0e19411e 100644 --- a/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx +++ b/ui/src/components/Home/Header/VerificationMethodTabs/index.tsx @@ -1,7 +1,7 @@ import React, { useRef } from "react"; import { useAppDispatch } from "../../../../redux/hooks"; import { useVerificationFlowSelector } from "../../../../redux/features/verification/verification.selector"; -import { goHomeScreen } from "../../../../redux/features/verification/verification.slice"; +import { goToHomeScreen } from "../../../../redux/features/verification/verification.slice"; import { VerificationMethod } from "../../../../types/data-types"; import { raiseAlert } from "../../../../redux/features/alerts/alerts.slice"; import { AlertMessages } from "../../../../utils/config"; @@ -25,7 +25,7 @@ const Tab = ({ "bg-gradient border-t-[6px] border-y-transparent text-activeTabText"; const inactiveTab = "bg-inactiveTabBackground text-inactiveTabText shadow-lg mt-[6px]"; - const disabledTab = "text-gray-600 bg-gray-200 "; + const disabledTab = "text-disableTabText bg-disableTabBackground"; const enabledTab = active ? activeTab : inactiveTab; return (
@@ -47,7 +47,7 @@ function VerificationMethodTabs(props: any) { const method = useVerificationFlowSelector((state) => state.method); function switchToVerificationMethod(method: VerificationMethod) { - dispatch(goHomeScreen({ method })); + dispatch(goToHomeScreen({ method })); } function showAlert() { @@ -58,7 +58,7 @@ function VerificationMethodTabs(props: any) { const carouselRef: any = useRef(); - const handlePrev = () => { + const handlePrevious = () => { if (carouselRef.current) { carouselRef.current.scrollBy({ left: -200, behavior: "smooth" }); } @@ -76,7 +76,7 @@ function VerificationMethodTabs(props: any) {
-
+ {!isLastStep(index) &&
-
-
+
} +
{step.description}
{!isLastStep(index) && ( -
+
diff --git a/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx b/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx index 3feba8c5..7d340673 100644 --- a/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx +++ b/ui/src/components/Home/VerificationProgressTracker/MobileStepper.tsx @@ -35,7 +35,7 @@ function MobileStepper(props: any) { getRangeOfNumbers(stepCount).map((value, index) => ( <> - {(value < stepCount) && (
)} + {(value < stepCount) && (
= activeScreen ? "opacity-20" : ""}`}>
)} )) } diff --git a/ui/src/components/Home/VerificationSection/CameraAccessDenied.tsx b/ui/src/components/Home/VerificationSection/CameraAccessDenied.tsx index a3794535..afc5ea7b 100644 --- a/ui/src/components/Home/VerificationSection/CameraAccessDenied.tsx +++ b/ui/src/components/Home/VerificationSection/CameraAccessDenied.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NoPhotographyIcon } from '../../../utils/theme-utils'; +import { CameraAccessDeniedIcon } from '../../../utils/theme-utils'; import StyledButton from "./commons/StyledButton"; import {CSSProperties} from "react"; @@ -45,7 +45,7 @@ const CameraAccessDenied = ({open, handleClose}: { open: boolean, handleClose: (
- +

Camera Access Denied

diff --git a/ui/src/components/Home/VerificationSection/QrScanner.tsx b/ui/src/components/Home/VerificationSection/QrScanner.tsx index 854de5f0..ed491c76 100644 --- a/ui/src/components/Home/VerificationSection/QrScanner.tsx +++ b/ui/src/components/Home/VerificationSection/QrScanner.tsx @@ -12,7 +12,7 @@ import { } from "../../../utils/config"; import { useAppDispatch } from "../../../redux/hooks"; import { - goHomeScreen, + goToHomeScreen, verificationInit, } from "../../../redux/features/verification/verification.slice"; import { raiseAlert } from "../../../redux/features/alerts/alerts.slice"; @@ -140,7 +140,7 @@ function QrScanner() { useEffect(() => { timer = setTimeout(() => { - dispatch(goHomeScreen({})); + dispatch(goToHomeScreen({})); dispatch( raiseAlert({ open: true, @@ -206,7 +206,7 @@ function QrScanner() {
{ - dispatch(goHomeScreen({})) + dispatch(goToHomeScreen({})) }}> Verify Another QR code diff --git a/ui/src/components/Home/VerificationSection/ScanQrCode.tsx b/ui/src/components/Home/VerificationSection/ScanQrCode.tsx index 11b28c20..9c1705ef 100644 --- a/ui/src/components/Home/VerificationSection/ScanQrCode.tsx +++ b/ui/src/components/Home/VerificationSection/ScanQrCode.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { QrIcon, ScanIcon } from '../../../utils/theme-utils'; +import React, { useState } from 'react'; +import { GradientScanIcon, QrIcon, WhiteScanIcon } from '../../../utils/theme-utils'; import StyledButton from "./commons/StyledButton"; import {UploadQrCode} from "./UploadQrCode"; import {useAppDispatch} from "../../../redux/hooks"; @@ -11,11 +11,15 @@ import { ScanOutline } from '../../../utils/theme-utils'; const Scan = () => { const dispatch = useAppDispatch(); + const [isHover, setHover] = useState(false) + const ScanIcon = isHover? WhiteScanIcon :GradientScanIcon return ( <> } + onMouseEnter={()=> setHover(true)} + onMouseLeave={()=> setHover(false)} className='mx-0 my-1.5 text-center inline-flex absolute top-[160px] left-[33px] w-[205px] lg:w-[223px] lg:left-[63px] lg:top-[231px]' fill={false} onClick={async (event) => { diff --git a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx index d8b1cab0..85885ec3 100644 --- a/ui/src/components/Home/VerificationSection/UploadQrCode.tsx +++ b/ui/src/components/Home/VerificationSection/UploadQrCode.tsx @@ -4,10 +4,10 @@ import { SupportedFileTypes, UploadFileSizeLimits, } from "../../../utils/config"; -import { UploadIcon } from "../../../utils/theme-utils"; +import { GradientUploadIcon, WhiteUploadIcon } from "../../../utils/theme-utils"; import { useAppDispatch } from "../../../redux/hooks"; import { - goHomeScreen, + goToHomeScreen, qrReadInit, verificationInit, } from "../../../redux/features/verification/verification.slice"; @@ -16,6 +16,7 @@ import { checkInternetStatus, getFileExtension } from "../../../utils/misc"; import { updateInternetConnectionStatus } from "../../../redux/features/application-state/application-state.slice"; import { AlertInfo } from "../../../types/data-types"; import { Dispatch } from "redux"; +import { useState } from "react"; const doFileChecks = (dispatch: Dispatch, file: File | null): boolean => { if (!file) return false; @@ -35,7 +36,7 @@ const doFileChecks = (dispatch: Dispatch, file: File | null): boolean => { } if (alert) { - dispatch(goHomeScreen({})); + dispatch(goToHomeScreen({})); dispatch(raiseAlert({ ...alert, open: true })); return false; } @@ -57,22 +58,6 @@ const doInternetCheck = async (dispatch: Dispatch) => { const acceptedFileTypes = SupportedFileTypes.map((ext) => `.${ext}`).join(", "); -function UploadButton({ displayMessage }: { displayMessage: string }) { - return ( -
- -
- ); -} export const UploadQrCode = ({ displayMessage, @@ -82,8 +67,31 @@ export const UploadQrCode = ({ className?: string; }) => { const dispatch = useAppDispatch(); + + const [isHover, setHover] = useState(false) + + const UploadButton =({ displayMessage }: { displayMessage: string })=> { + const UploadIcon = isHover ? WhiteUploadIcon : GradientUploadIcon; + return ( +
+ +
+ ); + } + return (
setHover(true)} + onMouseLeave={()=>setHover(false)} className={`mx-auto my-1.5 flex content-center justify-center ${className}`} > @@ -121,7 +129,7 @@ export const UploadQrCode = ({ dispatch( raiseAlert({ ...AlertMessages.qrNotDetected, open: true }) ); - dispatch(goHomeScreen({})); + dispatch(goToHomeScreen({})); } }); }} diff --git a/ui/src/components/Home/VerificationSection/Verification.tsx b/ui/src/components/Home/VerificationSection/Verification.tsx index 1214195b..19d4c028 100644 --- a/ui/src/components/Home/VerificationSection/Verification.tsx +++ b/ui/src/components/Home/VerificationSection/Verification.tsx @@ -3,7 +3,7 @@ import Loader from "../../commons/Loader"; import QrScanner from "./QrScanner"; import StyledButton from "./commons/StyledButton"; import { useAppDispatch } from "../../../redux/hooks"; -import { goHomeScreen } from "../../../redux/features/verification/verification.slice"; +import { goToHomeScreen } from "../../../redux/features/verification/verification.slice"; import { VerificationSteps } from "../../../utils/config"; import { useVerificationFlowSelector } from "../../../redux/features/verification/verification.selector"; import { ScanOutline } from "../../../utils/theme-utils"; @@ -34,7 +34,7 @@ const Verification = () => { id="verification-back-button" className="w-[100px] lg:w-[350px] mt-[18px] mx-0 my-1.6 text-lgNormalTextSize inline-flex" onClick={() => { - dispatch(goHomeScreen({})); + dispatch(goToHomeScreen({})); }} > Back diff --git a/ui/src/components/PageTemplate/Navbar.tsx b/ui/src/components/PageTemplate/Navbar.tsx index 8e452053..495b129f 100644 --- a/ui/src/components/PageTemplate/Navbar.tsx +++ b/ui/src/components/PageTemplate/Navbar.tsx @@ -33,7 +33,7 @@ const MobileDropDownMenu = ({showMenu}: { showMenu: boolean }) => {