diff --git a/inji-verify/src/assets/tab-scan.svg b/inji-verify/src/assets/tab-scan.svg
new file mode 100644
index 00000000..ae0de308
--- /dev/null
+++ b/inji-verify/src/assets/tab-scan.svg
@@ -0,0 +1,15 @@
+
diff --git a/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts b/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
index 375ab336..f2740dc3 100644
--- a/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
+++ b/inji-verify/src/components/Home/VerificationProgressTracker/styles.ts
@@ -3,7 +3,7 @@ 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;
@@ -11,7 +11,7 @@ export const VerificationProgressTrackerContainer = styled(Box)`
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
index e4004df1..bb13fa41 100644
--- 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}: {
}
+ icon={}
style={{margin: "6px 0", width: "350px", textAlign: 'center'}} fill onClick={() => setActiveStep(VerificationSteps.ActivateCamera)}>
Scan the QR Code
diff --git a/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx b/inji-verify/src/components/Home/VerificationSection/UploadQrCode.tsx
index 04b9c993..0ded0a0d 100644
--- 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}
+
+
+
+
+
+ {displayMessage}
+
+
);
}
export const UploadQrCode = ({setScanResult, displayMessage, setScanStatus}:
- { setScanResult: SetScanResultFunction,
- displayMessage: string,
+ {
+ setScanResult: SetScanResultFunction,
+ displayMessage: string,
setScanStatus: (status: ScanStatus) => void
}) => {
const {setActiveStep} = useActiveStepContext();