Merge pull request #789 from rsandb/Style-500-Page

style 500 page
This commit is contained in:
Keith Stevens
2023-01-18 14:26:24 +09:00
committed by GitHub
3 changed files with 28 additions and 19 deletions
-4
View File
@@ -28,7 +28,3 @@ export const EmptyState = (props: EmptyStateProps) => {
export const TaskEmptyState = () => {
return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
};
export const PageEmptyState = () => {
return <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />;
};
+3 -4
View File
@@ -1,8 +1,7 @@
import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { FiAlertTriangle } from "react-icons/fi";
import { PageEmptyState } from "src/components/EmptyState";
import { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
function Error() {
@@ -13,7 +12,7 @@ function Error() {
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<PageEmptyState />
<EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />
<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
+25 -11
View File
@@ -1,32 +1,46 @@
import { Button, Link, Stack } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import Head from "next/head";
import NextLink from "next/link";
import { FiAlertTriangle } from "react-icons/fi";
import { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
export default function Error() {
function ServerError() {
return (
<>
<Head>
<title>500 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
<Stack>
<p>Sorry, We encountered a server error. We&apos;re not sure what went wrong</p>
<p>Please file a but below and describe what you were trying to accomplish</p>
<Button leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />} variant="solid">
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<EmptyState
text="Sorry, we encountered a server error. We're not sure what went wrong."
icon={FiAlertTriangle}
/>
<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={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
variant="solid"
size="xs"
>
<Link
as={NextLink}
key="Report a Bug"
href="https://github.com/LAION-AI/Open-Assistant/issues/new/choose"
aria-label="Report a Bug"
className="flex items-center"
_hover={{ textDecoration: "none" }}
isExternal
>
Report a Bug
</Link>
</Button>
</Stack>
</main>
</Box>
</Center>
</>
);
}
ServerError.getLayout = getTransparentHeaderLayout;
export default ServerError;