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.
LAION-AI · Feb 6, 2023 · 9adc485 · 9adc485
1 parent b23d91e
commit 9adc485
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
@@ -1,24 +1,26 @@
-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";
 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"
           >

diff --git a/website/src/pages/500.tsx b/website/src/pages/500.tsx
@@ -1,24 +1,27 @@
-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";
 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"
           >