refactor: back button

Signed-off-by: karan <[email protected]>
credebl · Oct 16, 2023 · 647c3ac · 647c3ac
1 parent 1dd7099
commit 647c3ac
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 133 deletions.
diff --git a/src/commonComponents/backbutton/index.tsx b/src/commonComponents/backbutton/index.tsx
@@ -0,0 +1,34 @@
+import { Button } from 'flowbite-react';
+
+const index = ({ path }: { path: string }) => {
+	return (
+		<div>
+			<Button
+				type="submit"
+				color="bg-primary-800"
+				onClick={() => {
+					window.location.href = path;
+				}}
+				className="bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white"
+				style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
+			>
+				<svg
+					className="mr-1"
+					xmlns="http://www.w3.org/2000/svg"
+					width="22"
+					height="12"
+					fill="none"
+					viewBox="0 0 30 20"
+				>
+					<path
+						fill="#1F4EAD"
+						d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z"
+					/>
+				</svg>
+				<span className="hidden sm:block">Back</span>
+			</Button>
+		</div>
+	);
+};
+
+export default index;
diff --git a/src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx b/src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx
@@ -17,6 +17,7 @@ import { getFromLocalStorage } from '../../api/Auth';
 import { getOrganizations } from '../../api/organization';
 import EcoInvitationList from './EcoInvitationList';
 import { getOrgDetails } from '../../config/ecosystem';
+import BackButton from '../../commonComponents/backbutton'
 
 const initialPageState = {
 	pageNumber: 1,
@@ -207,23 +208,7 @@ const ReceivedInvitations = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 				<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-						type="submit"
-						color='bg-primary-800'
-						onClick={() => {
-							window.location.href = `${pathRoutes.ecosystem.root}`
-						}}
-						className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-						style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-					>
-						<svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-							<path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-						</svg>
-						<span className="hidden sm:block">Back</span>
-					</Button>
+					<BackButton path={pathRoutes.ecosystem.root} />
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Received Ecosystem Invitations

diff --git a/src/components/Issuance/Connections.tsx b/src/components/Issuance/Connections.tsx
@@ -10,6 +10,8 @@ import { pathRoutes } from "../../config/pathRoutes";
 import BreadCrumbs from "../BreadCrumbs";
 import ConnectionList from "./ConnectionList";
 import EmailList from "./EmailList";
+import BackButton from '../../commonComponents/backbutton'
+
 
 const Connections = () => {
 	const [selectedConnectionList, setSelectedConnectionList] = useState<TableData[]>([])
@@ -36,23 +38,7 @@ const Connections = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.issuance.credDef}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes?.back?.issuance?.credDef}/>
 				</div>
 			</div>
 

diff --git a/src/components/Issuance/CredDefSelection.tsx b/src/components/Issuance/CredDefSelection.tsx
@@ -17,6 +17,8 @@ import { dateConversion } from "../../utils/DateConversion";
 import { getCredentialDefinitions } from "../../api/issuance";
 import { pathRoutes } from "../../config/pathRoutes";
 import DateTooltip from "../Tooltip";
+import BackButton from  '../../commonComponents/backbutton'
+
 
 const CredDefSelection = () => {
 	const [schemaState, setSchemaState] = useState({ schemaName: '', version: '' })
@@ -64,7 +66,6 @@ const CredDefSelection = () => {
 		{ columnName: ' ' }
 	]
 
-	//Fetch credential definitions against schemaId
 	const getCredDefs = async (schemaId: string) => {
 		setLoading(true)
 		const response = await getCredentialDefinitions(schemaId);
@@ -109,20 +110,7 @@ const CredDefSelection = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 				<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.issuance.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-           <span className="hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.issuance.schemas}/>
 				</div>
 
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
@@ -145,7 +133,6 @@ const CredDefSelection = () => {
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Credential definitions
 				</h1>
-				{/* <div className='flex space-x-2'> */}
 							<Button
 								id='createSchemaButton'
 								onClick={() => {
@@ -159,7 +146,6 @@ const CredDefSelection = () => {
 								</svg>
 								Create
 							</Button>
-						{/* </div> */}
 			</div>
 			<AlertComponent
 				message={error}

diff --git a/src/components/Issuance/Issuance.tsx b/src/components/Issuance/Issuance.tsx
@@ -5,10 +5,9 @@ import * as Yup from 'yup';
 import { Alert, Button, Card } from 'flowbite-react';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-// import { getCredDeffById, getSchemaById } from '../../api/Schema';
 import { getFromLocalStorage, removeFromLocalStorage } from '../../api/Auth';
 import { useEffect, useState } from 'react';
-
+import BackButton from '../../commonComponents/backbutton'
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
 import CustomSpinner from '../CustomSpinner';
@@ -191,23 +190,7 @@ const IssueCred = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href =`${pathRoutes.back.issuance.connections}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.issuance.connections} />
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Issuance

diff --git a/src/components/Resources/Schema/ViewSchema.tsx b/src/components/Resources/Schema/ViewSchema.tsx
@@ -6,7 +6,7 @@ import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
 import { createCredentialDefinition, getCredDeffById, getSchemaById } from '../../../api/Schema';
 import { getFromLocalStorage, setToLocalStorage } from '../../../api/Auth';
 import { useEffect, useState } from 'react';
-
+import BackButton from '../../../commonComponents/backbutton'
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../../BreadCrumbs';
 import CredDeffCard from '../../../commonComponents/CredentialDefinitionCard';
@@ -206,26 +206,8 @@ const ViewSchemas = () => {
           <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
             Schemas
           </h1>
-          <Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.schema.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-
-            <span className="hidden sm:block"> Back</span>
-          </Button>
+					<BackButton path={pathRoutes.back.schema.schemas} />
         </div>
-
       </div>
 
       <div

diff --git a/src/components/Verification/Connections.tsx b/src/components/Verification/Connections.tsx
@@ -10,6 +10,7 @@ import { pathRoutes } from "../../config/pathRoutes";
 import BreadCrumbs from "../BreadCrumbs";
 import ConnectionList from "./ConnectionList";
 import EmailList from "./EmailList";
+import BackButton from '../../commonComponents/backbutton'
 
 const Connections = () => {
 	const [selectedConnectionList, setSelectedConnectionList] = useState<TableData[]>([])
@@ -35,20 +36,7 @@ const Connections = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.credDef}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.verification.credDef}/>
 				</div>
 			</div>
 

diff --git a/src/components/Verification/CredDefSelection.tsx b/src/components/Verification/CredDefSelection.tsx
@@ -14,6 +14,7 @@ import type { TableData } from "../../commonComponents/datatable/interface";
 import DataTable from "../../commonComponents/datatable";
 import { getCredentialDefinitionsForVerification } from "../../api/verification";
 import CustomSpinner from "../CustomSpinner";
+import BackButton from  '../../commonComponents/backbutton'
 
 const CredDefSelection = () => {
 	const [schemaState, setSchemaState] = useState({ schemaName: '', version: '' })
@@ -63,7 +64,6 @@ const CredDefSelection = () => {
 		{ columnName: 'check' }
 	]
 
-	//Fetch credential definitions against schemaId
 	const getCredDefs = async (schemaId: string) => {
 		setLoading(true)
 		const response = await getCredentialDefinitionsForVerification(schemaId,31);
@@ -125,20 +125,7 @@ const CredDefSelection = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="hidden sm:block"> Back</span>
-          </Button>
+					<BackButton path={pathRoutes.back.verification.schemas}/>
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Schema

diff --git a/src/components/Verification/Verification.tsx b/src/components/Verification/Verification.tsx
@@ -11,6 +11,7 @@ import type { TableData } from "../../commonComponents/datatable/interface";
 import { verifyCredential } from "../../api/verification";
 import { pathRoutes } from "../../config/pathRoutes";
 import CustomSpinner from "../CustomSpinner";
+import BackButton from '../../commonComponents/backbutton'
 
 interface SchemaDetails {
 	schemaName: string,
@@ -198,20 +199,7 @@ const VerificationCred = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.verification}`
-            }}
-			className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black dark:hover:bg-primary-50'             
-			style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.verification.verification} />
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Verification