Improve design for the error pages

packages/web/components/templates/ErrorLayout.tsx

@@ -1,103 +1,42 @@
 import {
-  Box,
-  MediumBreakpointBox,
   VStack,
   HStack,
+  SpanBox,
 } from '../elements/LayoutPrimitives'
-import Image from 'next/image'
-import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { StyledText } from '../elements/StyledText'
 import Link from 'next/link'
-import { theme } from '../tokens/stitches.config'
+import { Button } from '../elements/Button'
+import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 
 type ErrorPageStatusCode = 404 | 500
 
 type ErrorLayoutProps = {
+  message?: string
   statusCode: ErrorPageStatusCode
 }
 
 export function ErrorLayout(props: ErrorLayoutProps): JSX.Element {
-  return (
-    <Box css={{ height: '100%' }}>
-      <MediumBreakpointBox
-        smallerLayoutNode={<MobileErrorLayout {...props} />}
-        largerLayoutNode={<MediumErrorLayout {...props} />}
-      />
-    </Box>
-  )
-}
+  const { viewerData } = useGetViewerQuery()
+  console.log(viewerData?.me)
 
-function MobileErrorLayout(props: ErrorLayoutProps) {
   return (
-    <VStack css={{ overflow: 'scroll' }}>
-      <HStack
-        distribution="center"
-        css={{
-          maxHeight: '180px',
-          width: '100%',
-        }}
-      >
-        <OmnivoreIllustration />
+    <VStack alignment="center" distribution="start" css={{ height: '100%' }}>
+      <HStack alignment="center" css={{ mt: '64px', verticalAlign: 'middle' }}>
+        <StyledText style="headline" css={{
+          marginRight: '25px',
+          padding: '32px',
+          borderRight: '1px solid $grayText',
+        }}>
+          {props.statusCode}
+        </StyledText>
+        <StyledText style="body">
+          {props.message ? props.message : 'An error occurred.'}
+        </StyledText>
       </HStack>
-      <VStack
-        alignment="center"
-        distribution="center"
-        css={{
-          bg: '$yellow5',
-          width: '100%',
-          flexGrow: 1,
-        }}
-      >
-        <StyledText>{props.statusCode}</StyledText>
-      </VStack>
+      <SpanBox css={{ height: '64px' }} />
+      <Link passHref href={viewerData?.me ? "/home" : "/login"}>
+        <Button style="ctaDarkYellow">{viewerData?.me ? "Go Home" : "Login"}</Button>
+      </Link>
     </VStack>
   )
-}
-
-function MediumErrorLayout(props: ErrorLayoutProps) {
-  return (
-    <Box
-      css={{
-        display: 'grid',
-        gridTemplateColumns: '1fr 3fr',
-        bg: '$omnivoreYellow',
-        height: '100%',
-      }}
-    >
-      <VStack
-        alignment="start"
-        distribution="start"
-        css={{ height: '100%', m: '$2', '@md': { m: '$3' } }}
-      >
-        <Box>
-          <Link passHref href="/">
-            <a style={{ textDecoration: 'none' }}>
-            <OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
-            </a>
-          </Link>
-        </Box>
-        <StyledText>{props.statusCode}</StyledText>
-      </VStack>
-      <VStack alignment="center" distribution="center">
-        <OmnivoreIllustration isLargeLayout={true} />
-      </VStack>
-    </Box>
-  )
-}
-
-type OmnivoreIllustrationProps = {
-  isLargeLayout?: boolean
-}
-
-function OmnivoreIllustration({ isLargeLayout }: OmnivoreIllustrationProps) {
-  return (
-    <Image
-      src={`/static/images/landing-illustration${
-        isLargeLayout ? '.png' : '-mobile.svg'
-      }`}
-      alt="Illustration of Woman Reading"
-      width={isLargeLayout ? 1280 : 375}
-      height={isLargeLayout ? 1164 : 230}
-    />
-  )
-}
+}

packages/web/pages/404.tsx

@@ -1,16 +1,17 @@
-import { ErrorLayout } from '../components/templates/ErrorLayout'
-import { Box } from '../components/elements/LayoutPrimitives'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { ErrorLayout } from '../components/templates/ErrorLayout'
+import { SettingsLayout } from '../components/templates/SettingsLayout'
 
 export default function Custom404(): JSX.Element {
   return (
-    <Box
-      css={{ bg: '$omnivoreYellow', height: '100vh', overflow: 'hidden', m: 0, p: 0 }}
-    >
+    <>
       <Head>
         <title>Page Not Found</title>
       </Head>
-      <ErrorLayout statusCode={404} />;
-    </Box>
+      <SettingsLayout>
+       <ErrorLayout statusCode={404} message="This page could not be found." />
+      </SettingsLayout>
+    </>
   )
 }

packages/web/pages/500.tsx

@@ -1,16 +1,16 @@
 import { ErrorLayout } from '../components/templates/ErrorLayout'
-import { Box } from '../components/elements/LayoutPrimitives'
 import Head from 'next/head'
+import { SettingsLayout } from '../components/templates/SettingsLayout'
 
 export default function Custom500(): JSX.Element {
   return (
-    <Box
-      css={{ bg: '$omnivoreYellow', height: '100vh', overflow: 'hidden', m: 0, p: 0 }}
-    >
+    <>
       <Head>
-        <title>Page Not Found</title>
+        <title>An unknown error occurred.</title>
       </Head>
-      <ErrorLayout statusCode={500} />;
-    </Box>
+      <SettingsLayout>
+       <ErrorLayout statusCode={404} message="An unknown error occurred." />
+      </SettingsLayout>
+    </>
   )
 }

packages/web/pages/[username]/index.tsx

@@ -1,4 +0,0 @@
-// TODO: implement page
-export default function UserIndexPage(): JSX.Element {
-  return <p>unimplemented</p>
-}