style 500 page

website/src/components/EmptyState.tsx

@@ -13,7 +13,7 @@ export const EmptyState = (props: EmptyStateProps) => {
   const router = useRouter();
 
   return (
-    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
+    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base" maxWidth="3xl">
       <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
         <props.icon size="30" color="DarkOrange" />
         <Text>{props.text}</Text>
@@ -32,3 +32,9 @@ export const TaskEmptyState = () => {
 export const PageEmptyState = () => {
   return <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />;
 };
+
+export const ServerEmptyState = () => {
+  return (
+    <EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={FiAlertTriangle} />
+  );
+};

website/src/pages/500.tsx

@@ -1,7 +1,8 @@
-import { Button, Link, Stack } from "@chakra-ui/react";
+import { Button, Box, Text, Center, Link, Stack } from "@chakra-ui/react";
 import Head from "next/head";
 import NextLink from "next/link";
 import { FiAlertTriangle } from "react-icons/fi";
+import { ServerEmptyState } from "src/components/EmptyState";
 
 export default function Error() {
   return (
@@ -10,23 +11,29 @@ export default function Error() {
         <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">
+        <ServerEmptyState />
+        <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>
     </>
   );
 }