Added icons

Signed-off-by: Shiva <[email protected]>
mosip · Apr 16, 2024 · e751ebe · e751ebe
1 parent c6aa2bd
commit e751ebe
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/inji-verify/src/assets/tab-scan.svg b/inji-verify/src/assets/tab-scan.svg
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts b/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
@@ -3,15 +3,15 @@ import styled from "@emotion/styled";
 
 export const VerificationProgressTrackerContainer = styled(Box)`
     background: #FAFBFD 0 0 no-repeat padding-box;
-    padding: 0 76px;
+    padding: 0 60px 0 76px;
     margin-top: 0;
     height: 100vh;
     max-height: 100vh;
 `;
 
 export const NavbarContainer = styled(Box)`
     height: 52px;
-    margin: 60px 0;
+    margin: 46px 0 60px 0;
 `
 
 export const Heading = styled(Typography)`

diff --git a/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/ScanQrCode.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {Box, Grid, Typography} from "@mui/material";
 import scanQr from "../../../assets/scanner-ouline.svg";
 import qr from "../../../assets/qr.svg";
-import {ReactComponent as UploadIcon} from "../../../assets/upload-icon.svg";
+import {ReactComponent as TabScanIcon} from "../../../assets/tab-scan.svg";
 import StyledButton from "./commons/StyledButton";
 import {UploadQrCode} from "./UploadQrCode";
 import {useActiveStepContext, useAlertMessages} from "../../../pages/Home";
@@ -68,7 +68,7 @@ const ScanQrCode = ({setScanResult}: {
             </Grid>
             <Grid item xs={12} order={scanStatus === "Failed" ? 3 : 2}>
                 <StyledButton
-                    icon={<UploadIcon/>}
+                    icon={<TabScanIcon/>}
                     style={{margin: "6px 0", width: "350px", textAlign: 'center'}} fill onClick={() => setActiveStep(VerificationSteps.ActivateCamera)}>
                     Scan the QR Code
                 </StyledButton>

diff --git a/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx
@@ -3,6 +3,7 @@ import {ScanStatus} from "../../../types/data-types";
 import {SetScanResultFunction} from "../../../types/function-types";
 import {useActiveStepContext, useAlertMessages} from "../../../pages/Home";
 import {AlertMessages, UploadFileSizeLimits, VerificationSteps} from "../../../utils/config";
+import {ReactComponent as UploadIcon} from "../../../assets/upload-icon.svg";
 
 function UploadButton({ displayMessage }: {displayMessage: string}) {
     return (
@@ -14,19 +15,33 @@ function UploadButton({ displayMessage }: {displayMessage: string}) {
                 opacity: 1,
                 padding: '18px 0',
                 color: '#FF7F00',
-                width: '100%',
-                cursor: 'pointer'
+                width: '350px',
+                cursor: 'pointer',
+                textAlign: 'center'
             }}
             htmlFor={"upload-qr"}
         >
-            {displayMessage}
+            <span style={{
+                margin: "auto",
+                display: 'flex',
+                placeContent: 'center',
+                width: '100%'
+            }}>
+                <span style={{display: "inline-grid", marginRight: "6px"}}>
+                    <UploadIcon/>
+                </span>
+                <span style={{display: "inline-grid"}}>
+                    {displayMessage}
+                </span>
+            </span>
         </label>
     );
 }
 
 export const UploadQrCode = ({setScanResult, displayMessage, setScanStatus}:
-                                   { setScanResult: SetScanResultFunction,
-                                       displayMessage: string,
+                                 {
+                                     setScanResult: SetScanResultFunction,
+                                     displayMessage: string,
                                        setScanStatus: (status: ScanStatus) => void
                                    }) => {
     const {setActiveStep} = useActiveStepContext();