chore: adjust header and footer style
This commit is contained in:
parent
4876decb26
commit
03ebc48fbf
@ -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",
|
||||
|
@ -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">
|
||||
|
@ -1,9 +1,5 @@
|
||||
import { Container, Heading } from "@chakra-ui/react";
|
||||
import { Heading } from "@chakra-ui/react";
|
||||
|
||||
export const HomePage = () => {
|
||||
return (
|
||||
<Container maxW="container.lg">
|
||||
<Heading>Hello World!</Heading>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
export default function HomePage() {
|
||||
return <Heading>Hello World!</Heading>;
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user