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

[INJIVER-727] change document file icon

ui/src/components/Home/VerificationProgressTracker/DesktopStepper.tsx

@@ -36,7 +36,7 @@ function DesktopStepper() {
                                         <div className={`${!isLastStep(index) ? "border-transparent border-l-transparent" : "border-none"} border-[1px]`}/>
                                         </div>
                                     </div>}
-                                    <div id={`${convertToId(step.label)}-description`} className={`${isLastStep(index)?"ml-9":''} ml-[10px] text-normalTextSize text-stepperDescription font-normal leading-5  col-end-13`}>
+                                    <div id={`${convertToId(step.label)}-description`} className={`${isLastStep(index)?"ml-9":'ml-[10px]'}  text-normalTextSize text-stepperDescription font-normal col-end-13`}>
                                         {step.description}
                                     </div>
                                     {!isLastStep(index) && (

ui/src/components/Home/VerificationSection/Result/ResultSummary.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
-import {ReactComponent as VerificationSuccessMobileIcon} from "../../../../assets/verification-success-icon-mobile.svg";
-import {ReactComponent as VerificationFailedMobileIcon} from "../../../../assets/verification-failed-icon-mobile.svg";
+import { VerificationSuccessIcon, VerificationFailedIcon } from '../../../../utils/theme-utils';
+
 
 const backgroundColorMapping: any = {
     EXPIRED: "bg-expired",
     INVALID: "bg-invalid",
     SUCCESS: "bg-success"
 }
 
+const textColorMapping: any = {
+    SUCCESS: "text-success",
+    INVALID: "text-invalid",
+    EXPIRED: "text-expired"
+}
+
 const displayMessageMapping = {
     EXPIRED: "Unfortunately, the given credential is expired!",
     INVALID: "Unfortunately, the given credential is invalid!",
@@ -18,12 +24,13 @@ const ResultSummary = ({status}: {
     status: "SUCCESS" | "EXPIRED" | "INVALID"
 }) => {
     const backgroundColor = backgroundColorMapping[status]
+    const textColor = textColorMapping[status]
     return (
         <div className="grid grid-cols-12 w-full">
             <div className={`col-start-1 col-end-13 h-[170px] lg:h-[186px] w-full ${backgroundColor}`}>
                 <div className="grid grid-cols-12 justify-items-center items-center justify-center content-center pt-[30px]">
-                    <div className="col-start-1 col-end-13 block mb-2.5">
-                        {status === "SUCCESS" ? <VerificationSuccessMobileIcon/> : <VerificationFailedMobileIcon/>}
+                    <div className={`col-start-1 col-end-13 block mb-2.5 ${textColor}`}>
+                        {status === "SUCCESS" ? <VerificationSuccessIcon/> : <VerificationFailedIcon />}
                     </div>
                     <div className="col-start-1 col-end-13">
                         <p id="vc-result-display-message" className="font-normal text-lgNormalTextSize text-center">

ui/src/components/Home/VerificationSection/Result/VcDisplayCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {convertToId, convertToTitleCase, getDisplayValue} from "../../../../utils/misc";
 import StyledButton from "../commons/StyledButton";
-import {ReactComponent as DocumentIcon} from '../../../../assets/document.svg';
+import { DocumentIcon } from '../../../../utils/theme-utils';
 import {useAppDispatch} from "../../../../redux/hooks";
 import {goToHomeScreen} from "../../../../redux/features/verification/verification.slice";
 
@@ -24,7 +24,7 @@ function VcDisplayCard({vc}: {vc: any}) {
                             </div>
                         ))
                         : (
-                            <div className="grid content-center justify-center w-[100%] h-[320px] text-documentIcon opacity-10">
+                            <div className="grid content-center justify-center w-[100%] h-[320px] text-documentIcon">
                                 <DocumentIcon/>
                             </div>
                         )

ui/src/components/Home/VerificationSection/ScanQrCode.tsx

@@ -59,7 +59,7 @@ const ScanQrCode = () => {
                         className="grid bg-lighter-gradient rounded-[12px] w-[250px] lg:w-[320px] aspect-square content-center justify-center">
                     </div>
                     <div
-                        className="absolute top-[58px] left-[98px] lg:top-[165px] lg:left-[50%] lg:translate-x-[-50%] lg:translate-y-[-50%] fill-primary">
+                        className="absolute top-[58px] left-[98px] lg:top-[165px] lg:left-[50%] lg:translate-x-[-50%] lg:translate-y-[-50%]">
                         <QrIcon className="w-[78px] lg:w-[100px]" />
                     </div>
                     {

ui/src/utils/theme-utils.ts

@@ -7,6 +7,9 @@ import { ReactComponent as GradientTabUploadIcon } from "../assets/gradient-uplo
 import { ReactComponent as WhiteTabUploadIcon } from "../assets/white-upload-icon.svg";
 import { ReactComponent as QrCodeIcon }  from "../assets/qr-code-icon.svg";
 import {ReactComponent as CameraDeniedIcon} from "../assets/camera-access-denied-icon.svg";
+import {ReactComponent as DocumentFileIcon} from '../assets/document.svg';
+import {ReactComponent as VerificationSuccess} from "../assets/verification-success-icon.svg";
+import {ReactComponent as VerificationFailed} from "../assets/verification-failed-icon.svg";
 
 export const Logo = InjiLogo;
 export const QrIcon = QrCodeIcon;
@@ -15,4 +18,7 @@ export const WhiteScanIcon = WhiteScanFillIcon;
 export const GradientUploadIcon = GradientTabUploadIcon;
 export const WhiteUploadIcon = WhiteTabUploadIcon;
 export const CameraAccessDeniedIcon  = CameraDeniedIcon;
+export const DocumentIcon = DocumentFileIcon;
+export const VerificationSuccessIcon = VerificationSuccess;
+export const VerificationFailedIcon = VerificationFailed;
 export const ScanOutline = window._env_.DEFAULT_THEME !== "purple_theme" ? orangeScanOutline : purpleScanOutline;