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();