chore: default page styling + error page refactor (#61)

* style: 💅 dark background with crosses pattern on default page * style: 💅 added heading to default page * refactor: 🔍 small tweaks to default page * refactor: 🔍 optimized code structure and added home button to error page * refactor(requested-changes): 🔍 implemented requested changes Co-authored-by: Doeke Leeuwis <[email protected]> Co-authored-by: Mitchel van Bever <[email protected]> Co-authored-by: Mitchel van Bever <[email protected]> Co-authored-by: MitchelvanBever <[email protected]>
storyofams · Feb 27, 2021 · 74e911f · 74e911f · vercel · Feb 27, 2021
1 parent 71dbb29
commit 74e911f
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 55 deletions.
diff --git a/src/components/home/background/CrossPattern.tsx b/src/components/home/background/CrossPattern.tsx
@@ -0,0 +1,17 @@
+export const CrossPattern = () => (
+  <svg width="100%" height="100%">
+    <pattern
+      id="cross-pattern"
+      width="32"
+      height="32"
+      patternUnits="userSpaceOnUse"
+    >
+      <path
+        d="M4.00667 0L9.99334 5.99333L15.9933 0L20 3.99333L14 10L20 15.9933L15.9933 20L9.99334 13.9933L4.00667 20L0 15.9933L6 10L0 3.99333L4.00667 0Z"
+        fill="#343434"
+      />
+    </pattern>
+
+    <rect fill="url(#cross-pattern)" height="100%" width="100%" y="0" x="0" />
+  </svg>
+);
diff --git a/src/components/home/background/index.tsx b/src/components/home/background/index.tsx
@@ -0,0 +1,33 @@
+import { Flex } from 'rebass/styled-components';
+
+import { CrossPattern } from './CrossPattern';
+
+export const Background = () => (
+  <Flex
+    bg="black"
+    flexWrap="wrap"
+    alignContent="start"
+    justifyContent="space-evenly"
+    flex={1}
+    overflow="hidden"
+    sx={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      '&:after': {
+        content: "''",
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        background:
+          'radial-gradient(circle, rgba(0,0,0,0.75) 0%, rgba(0,0,0,75) 80%);',
+      },
+    }}
+  >
+    <CrossPattern />
+  </Flex>
+);
diff --git a/src/components/home/index.ts b/src/components/home/index.ts
@@ -0,0 +1 @@
+export * from './background';
diff --git a/src/config/seo.ts b/src/config/seo.ts
@@ -11,11 +11,11 @@ const defaultSeo = {
     handle: '@Boilerplate',
     cardType: 'summary_large_image',
   },
-  titleTemplate: `%s | ${siteTitle}`,
+  titleTemplate: `%s - ${siteTitle}`,
 };
 
 if (process.env.NODE_ENV === 'development') {
-  defaultSeo.titleTemplate = `%s | dev-${siteTitle}`;
+  defaultSeo.titleTemplate = `DEV: %s - ${siteTitle}`;
 }
 
 export default defaultSeo;
diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
@@ -1,47 +1,46 @@
-import { Flex, Text } from 'rebass/styled-components';
+import { NextSeo } from 'next-seo';
+import { Button, Flex, Link, Text } from 'rebass/styled-components';
 
 const getError = ({ res, err }) => {
-  let statusCode = 404;
-
-  if (res) {
-    statusCode = res?.statusCode || err?.statusCode || 500;
-  }
-
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
   return { statusCode };
 };
 
 const getContent = ({ statusCode }) => {
-  let content = "Even we don't know what happened 🤯";
-
-  if (statusCode === 404)
-    content = 'We could not find the page you were looking for 🛰'; // not found
-
-  if (statusCode === 500)
-    content = 'Our server had some trouble processing that request 🔥'; // internal
-
-  if (statusCode === 401)
-    content = "It looks like you're not supposed to be here 👀"; // unAuthorized
-
-  return content;
+  switch (statusCode) {
+    case 401:
+      return "It looks like you're not supposed to be here 👀";
+    case 404:
+      return 'We could not find the page you were looking for 🛰';
+    case 500:
+      return 'Our server had some trouble processing that request 🔥';
+    default:
+      return "Even we don't know what happened 🤯";
+  }
 };
 
 const Error = ({ statusCode }) => {
+  const content = getContent({ statusCode });
+
   return (
-    <Flex
-      flex={1}
-      height="100vh"
-      backgroundColor="grey900"
-      justifyContent=""
-      alignItems="center"
-      flexDirection="column"
-    >
-      <Text fontFamily="mono" fontSize={8} color="grey800">
-        {statusCode}
-      </Text>
-      <Text fontFamily="mono" color="white">
-        {getContent({ statusCode })}
-      </Text>
-    </Flex>
+    <>
+      <NextSeo title={statusCode} description={content} />
+      <Flex
+        height="100vh"
+        backgroundColor="black"
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
+      >
+        <Text fontFamily="mono" fontSize={9} color="white">
+          {statusCode}
+        </Text>
+        <Text color="white">{content}</Text>
+        <Link href="/">
+          <Button mt={3}>Take me home</Button>
+        </Link>
+      </Flex>
+    </>
   );
 };
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,26 +1,22 @@
 import { NextSeo } from 'next-seo';
-import { Flex, Heading, Text } from 'rebass/styled-components';
+import { Heading, Box } from 'rebass/styled-components';
+import { Background } from '~components/home';
 
 const Home = () => (
-  <div>
-    <NextSeo title="Home" description="This is a Home page" />
-    <Flex bg="grey100" p={2} width="100%" height="100vh" variant="center">
-      <Flex
-        bg="grey800"
-        minHeight="50vh"
-        minWidth="50%"
-        variant="center"
-        sx={{ borderRadius: 'lg', boxShadow: 'sm' }}
+  <>
+    <NextSeo title="Home" description="What will your Story be?" />
+    <Background />
+    <Box pt="50vh" sx={{ position: 'relative' }}>
+      <Heading
+        fontSize={[6, 9]}
+        color="white"
+        textAlign="center"
+        sx={{ transform: 'translateY(-50%)' }}
       >
-        <Heading textAlign="center" px={3} py={4} variant="h2" color="white">
-          What will your Story be
-          <Text display="inline-block" color="primary500">
-            ?
-          </Text>
-        </Heading>
-      </Flex>
-    </Flex>
-  </div>
+        What will your Story be?
+      </Heading>
+    </Box>
+  </>
 );
 
 export default Home;
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
@@ -12,6 +12,7 @@ const theme = {
     secondary400: '#984EF9',
     secondary500: '#862EF7',
     white: '#fff',
+    black: '#111',
     grey100: '#F9F9F8',
     grey200: '#E2E2E0',
     grey300: '#bdbdbd',