🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/src/components/Common/NotFound.tsx

@@ -1,39 +1,55 @@
-import { Button, Container, Text } from "@chakra-ui/react"
+import { Button, Center, Flex, Text } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
 
 const NotFound = () => {
   return (
     <>
-      <Container
-        h="100vh"
-        alignItems="stretch"
-        justifyContent="center"
-        textAlign="center"
-        maxW="sm"
-        centerContent
+      <Flex
+        height="100vh"
+        align="center"
+        justify="center"
+        flexDir="column"
+        data-testid="not-found"
+        p={4}
       >
+        <Flex alignItems="center" zIndex={1}>
+          <Flex flexDir="column" ml={4} align="center" justify="center" p={4}>
+            <Text
+              fontSize={{ base: "6xl", md: "8xl" }}
+              fontWeight="bold"
+              lineHeight="1"
+              mb={4}
+            >
+              404
+            </Text>
+            <Text fontSize="2xl" fontWeight="bold" mb={2}>
+              Oops!
+            </Text>
+          </Flex>
+        </Flex>
+
         <Text
-          fontSize="8xl"
-          color="ui.main"
-          fontWeight="bold"
-          lineHeight="1"
+          fontSize="lg"
+          color="gray.600"
           mb={4}
+          textAlign="center"
+          zIndex={1}
         >
-          404
+          The page you are looking for was not found.
         </Text>
-        <Text fontSize="md">Oops!</Text>
-        <Text fontSize="md">Page not found.</Text>
-        <Button
-          as={Link}
-          to="/"
-          color="ui.main"
-          borderColor="ui.main"
-          variant="outline"
-          mt={4}
-        >
-          Go back
-        </Button>
-      </Container>
+        <Center zIndex={1}>
+          <Link to="/">
+            <Button
+              variant="solid"
+              colorScheme="teal"
+              mt={4}
+              alignSelf="center"
+            >
+              Go Back
+            </Button>
+          </Link>
+        </Center>
+      </Flex>
     </>
   )
 }