fix: dark theme background to 404 && 500 pages (#1234)

* fix: dark theme background to 404 && 500 pages

* fix: use oa-basic-theme instead of background color.
This commit is contained in:
MrlolDev
2023-02-06 20:37:31 +09:00
committed by GitHub
parent b23d91e081
commit 9adc4852b0
2 changed files with 11 additions and 6 deletions
+5 -3
View File
@@ -1,4 +1,4 @@
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text, useColorMode } from "@chakra-ui/react";
import { AlertTriangle } from "lucide-react";
import Head from "next/head";
import { EmptyState } from "src/components/EmptyState";
@@ -6,19 +6,21 @@ import { getTransparentHeaderLayout } from "src/components/Layout";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
function Error() {
const { colorMode } = useColorMode();
const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
return (
<>
<Head>
<title>404 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased oa-basic-theme">
<EmptyState text="Sorry, the page you are looking for does not exist." icon={AlertTriangle} />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
width="fit-content"
leftIcon={<AlertTriangle size={"1em"} className="text-blue-500" aria-hidden="true" />}
leftIcon={<AlertTriangle size={"1em"} color={titleColor} aria-hidden="true" />}
variant="solid"
size="xs"
>
+6 -3
View File
@@ -1,4 +1,4 @@
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text, useColorMode } from "@chakra-ui/react";
import { AlertTriangle } from "lucide-react";
import Head from "next/head";
import { EmptyState } from "src/components/EmptyState";
@@ -6,19 +6,22 @@ import { getTransparentHeaderLayout } from "src/components/Layout";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
function ServerError() {
const { colorMode } = useColorMode();
const backgroundColor = colorMode === "light" ? "white" : "gray.700";
const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
return (
<>
<Head>
<title>500 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased oa-basic-theme">
<EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={AlertTriangle} />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
width="fit-content"
leftIcon={<AlertTriangle size="1em" className="text-blue-500" aria-hidden="true" />}
leftIcon={<AlertTriangle size="1em" color={titleColor} aria-hidden="true" />}
variant="solid"
size="xs"
>