From f8dd5300db0d3380711e91caa4e4eda2b48d843b Mon Sep 17 00:00:00 2001
From: Chirag <157453139+Chirag-S-Kotian@users.noreply.github.com>
Date: Wed, 23 Oct 2024 21:55:07 +0530
Subject: [PATCH] Add Home link placement in the header for better
 accessibility (#76)

* add Home link to header for easy navigation to first page

* Add Home link placement in the header for better accessibility

* Updated link UX in PageContainer

* fixed prettier problem

* apply Prettier to fix code formatting issues

* removed yarn.lock and package-lock.json files and updated package.json file

* "Updated version specifiers in package.json"

* updated yarn.lock file

* Updated yarn.lock file with yarn command
---
 apps/web-app/src/components/PageContainer.tsx | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/web-app/src/components/PageContainer.tsx b/apps/web-app/src/components/PageContainer.tsx
index 686123c..387b6d7 100644
--- a/apps/web-app/src/components/PageContainer.tsx
+++ b/apps/web-app/src/components/PageContainer.tsx
@@ -5,6 +5,7 @@ import shortenString from "@/utils/shortenString"
 import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react"
 import { usePathname } from "next/navigation"
 import { FaGithub } from "react-icons/fa"
+import NextLink from "next/link"
 
 export default function PageContainer({
     children
@@ -27,25 +28,30 @@ export default function PageContainer({
 
     return (
         <>
-            <HStack align="center" justify="right" p="2">
-                <Link
-                    href={getExplorerLink(
-                        process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string,
-                        process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string
-                    )}
-                    isExternal
-                >
-                    <Text>{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}</Text>
-                </Link>
-                <Link href="https://github.com/semaphore-protocol/boilerplate" isExternal>
-                    <IconButton
-                        aria-label="Github repository"
-                        variant="link"
-                        py="3"
-                        color="text.100"
-                        icon={<Icon boxSize={6} as={FaGithub} />}
-                    />
-                </Link>
+            <HStack align="center" justify="space-between" p="2">
+                <NextLink href="/">Feedback</NextLink>
+                <HStack>
+                    <Link
+                        href={getExplorerLink(
+                            process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string,
+                            process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string
+                        )}
+                        isExternal
+                    >
+                        <Text>
+                            {shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
+                        </Text>
+                    </Link>
+                    <Link href="https://github.com/semaphore-protocol/boilerplate" isExternal>
+                        <IconButton
+                            aria-label="Github repository"
+                            variant="link"
+                            py="3"
+                            color="text.100"
+                            icon={<Icon boxSize={6} as={FaGithub} />}
+                        />
+                    </Link>
+                </HStack>
             </HStack>
 
             <Container maxW="xl" flex="1" display="flex" alignItems="center">