chore: adjust header and footer style

src/components/Footer.tsx

@@ -2,10 +2,10 @@ import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
 
 export default function Footer() {
     return (
-        <Box w="100%" bg={useColorModeValue("gray.50", "gray.900")} color={useColorModeValue("gray.700", "gray.200")}>
+        <Box as="footer" role="contentinfo" w="100%" bg={useColorModeValue("gray.100", "gray.900")}>
             <Flex
                 align="center"
-                pt="8"
+                py={8}
                 _before={{
                     content: '""',
                     borderBottom: "1px solid",

src/components/Header.tsx

@@ -4,7 +4,7 @@ import {
     Button,
     Center,
     Flex,
-    Link as ChakraLink,
+    Link,
     Menu,
     MenuButton,
     MenuDivider,
@@ -21,14 +21,14 @@ import { MoonIcon, SunIcon } from "@chakra-ui/icons";
 export const Header = () => {
     const { colorMode, toggleColorMode } = useColorMode();
     return (
-        <Box width="100%" bg={useColorModeValue("gray.100", "gray.900")} px={4}>
+        <Box as="nav" role="navigation" w="100%" bg={useColorModeValue("gray.100", "gray.900")} px={4}>
             <Flex h={16} alignItems="center" justifyContent="space-between">
                 <Box>
-                    <ChakraLink as={ReactRouterLink} to="/home">
+                    <Link as={ReactRouterLink} to="/home">
                         <Text as="b" fontSize="lg">
                             Woo Online Judge
                         </Text>
-                    </ChakraLink>
+                    </Link>
                 </Box>
 
                 <Flex alignItems="center">

src/pages/HomePage.tsx

@@ -1,9 +1,5 @@
-import { Container, Heading } from "@chakra-ui/react";
+import { Heading } from "@chakra-ui/react";
 
-export const HomePage = () => {
+export default function HomePage() {
-    return (
+    return <Heading>Hello World!</Heading>;
-        <Container maxW="container.lg">
+}
-            <Heading>Hello World!</Heading>
-        </Container>
-    );
-};

src/pages/Root.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+import { Box, Container, Flex, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
 import { Outlet } from "react-router-dom";
 
 import Footer from "../components/Footer";
@@ -16,11 +16,11 @@ export const Root = () => (
     <Flex direction="column" align="center" maxW={{ xl: "1200px" }} m="0 auto">
         <Header />
 
-        <Box width="100%" flex="1">
+        <Container w="100%" flex="1" maxW="container.lg" py={2}>
             <React.Suspense fallback={<SkeletonPage />}>
                 <Outlet />
             </React.Suspense>
-        </Box>
+        </Container>
 
         <Footer />
     </Flex>