From 1f4797055877a03e8a11bd19808c5e6168ccd581 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:22:04 -0600
Subject: [PATCH 1/3] style 500 page

---
 website/src/components/EmptyState.tsx |  8 +++++++-
 website/src/pages/500.tsx             | 25 ++++++++++++++++---------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index 8d82163c..825dc610 100644
--- a/website/src/components/EmptyState.tsx
+++ b/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} />
+  );
+};
diff --git a/website/src/pages/500.tsx b/website/src/pages/500.tsx
index d6e68074..ebbcee67 100644
--- a/website/src/pages/500.tsx
+++ b/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>
     </>
   );
 }

From 0c1bb8df05bc3e6c47da861c897f5af0de8cc998 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Tue, 17 Jan 2023 21:14:10 -0600
Subject: [PATCH 2/3] update emptystate to be used in specific pages

---
 website/src/components/EmptyState.tsx | 15 ---------------
 website/src/pages/404.tsx             |  7 +++----
 website/src/pages/500.tsx             | 17 ++++++++++++-----
 website/src/pages/tasks/random.tsx    |  5 +++--
 4 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index 825dc610..f6245204 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,6 +1,5 @@
 import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
 type EmptyStateProps = {
@@ -24,17 +23,3 @@ export const EmptyState = (props: EmptyStateProps) => {
     </Box>
   );
 };
-
-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} />;
-};
-
-export const ServerEmptyState = () => {
-  return (
-    <EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={FiAlertTriangle} />
-  );
-};
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index f4c09bbf..afe1d080 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -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
diff --git a/website/src/pages/500.tsx b/website/src/pages/500.tsx
index ebbcee67..49eb2950 100644
--- a/website/src/pages/500.tsx
+++ b/website/src/pages/500.tsx
@@ -1,10 +1,10 @@
-import { Button, Box, Text, Center, 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 { ServerEmptyState } from "src/components/EmptyState";
+import { EmptyState } from "src/components/EmptyState";
+import { getTransparentHeaderLayout } from "src/components/Layout";
 
-export default function Error() {
+function ServerError() {
   return (
     <>
       <Head>
@@ -12,7 +12,10 @@ export default function Error() {
         <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
       <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
-        <ServerEmptyState />
+        <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
@@ -37,3 +40,7 @@ export default function Error() {
     </>
   );
 }
+
+ServerError.getLayout = getTransparentHeaderLayout;
+
+export default ServerError;
diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx
index d2e850f5..55310cfc 100644
--- a/website/src/pages/tasks/random.tsx
+++ b/website/src/pages/tasks/random.tsx
@@ -1,5 +1,6 @@
 import Head from "next/head";
-import { TaskEmptyState } from "src/components/EmptyState";
+import { FiAlertTriangle } from "react-icons/fi";
+import { EmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -13,7 +14,7 @@ const RandomTask = () => {
   }
 
   if (tasks.length === 0) {
-    return <TaskEmptyState />;
+    return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
   }
 
   return (

From bc1fdbe89f99694a4c28461a80b06d10ba564b9f Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Tue, 17 Jan 2023 21:18:46 -0600
Subject: [PATCH 3/3] add task empty state back as it's being used by multiple
 pages

---
 website/src/components/EmptyState.tsx | 7 ++++++-
 website/src/pages/tasks/random.tsx    | 5 ++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index f6245204..14715518 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,5 +1,6 @@
 import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
 type EmptyStateProps = {
@@ -12,7 +13,7 @@ export const EmptyState = (props: EmptyStateProps) => {
   const router = useRouter();
 
   return (
-    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base" maxWidth="3xl">
+    <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
       <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
         <props.icon size="30" color="DarkOrange" />
         <Text>{props.text}</Text>
@@ -23,3 +24,7 @@ export const EmptyState = (props: EmptyStateProps) => {
     </Box>
   );
 };
+
+export const TaskEmptyState = () => {
+  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+};
diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx
index 55310cfc..d2e850f5 100644
--- a/website/src/pages/tasks/random.tsx
+++ b/website/src/pages/tasks/random.tsx
@@ -1,6 +1,5 @@
 import Head from "next/head";
-import { FiAlertTriangle } from "react-icons/fi";
-import { EmptyState } from "src/components/EmptyState";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
@@ -14,7 +13,7 @@ const RandomTask = () => {
   }
 
   if (tasks.length === 0) {
-    return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+    return <TaskEmptyState />;
   }
 
   return (