Merge pull request #182 from alexlee-dev/develop

Small fixes to documentation site

documentation/src/components/header.js

@@ -5,7 +5,6 @@ import styled from 'styled-components'
 
 const StyledContainer = styled.div`
   flex-grow: 1;
-  margin-left: 240px;
   width: calc(100% - 240px);
 `
 
@@ -30,10 +29,14 @@ const StyledSearchIconContainer = styled.div`
   width: 56px;
 `
 
+const StyledAppBar = styled(AppBar)`
+  margin-left: 240px;
+`
+
 const Header = () => {
   return (
     <StyledContainer>
-      <AppBar position="static">
+      <StyledAppBar position="static">
         <Toolbar>
           <StyledSearchContainer>
             <StyledSearchIconContainer>
@@ -49,7 +52,7 @@ const Header = () => {
             />
           </StyledSearchContainer>
         </Toolbar>
-      </AppBar>
+      </StyledAppBar>
     </StyledContainer>
   )
 }

documentation/src/html.js

@@ -13,7 +13,7 @@ export default function HTML(props) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         <link
-          href="https://raw.githack.com/alexlee-dev/pickitt/rewrite/documentation/prism.css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css"
           rel="stylesheet"
         />
         {props.headComponents}

documentation/src/pages/404.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Box, Button, Divider, Typography } from '@material-ui/core'
+import styled from 'styled-components'
+import Helmet from '../components/helmet'
+import HomeIcon from '@material-ui/icons/Home'
+import NotFoundImage from '../static/dog404.png'
+import { Link } from 'gatsby'
+
+const StyledTitle = styled(Typography)`
+  font-size: 2rem;
+`
+
+const StyledSubTitle = styled(Typography)`
+  margin-top: 20px;
+`
+
+const StyledDivider = styled(Divider)`
+  margin-bottom: 25px;
+  margin-top: 25px;
+`
+
+const StyledImage = styled.img`
+  width: 50%;
+`
+
+const StyledImageContainer = styled(Box)`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`
+
+const NotFoundPage = () => {
+  return (
+    <Box>
+      <Helmet title="Page Not Found" />
+      <Box>
+        <StyledTitle variant="h2">Page Not Found</StyledTitle>
+        <StyledImageContainer>
+          <StyledImage alt="Page Not Found" src={NotFoundImage} />
+        </StyledImageContainer>
+        <StyledSubTitle>
+          Your dog is cute but honestly a menace. Where are my shoes? Where is
+          my graduation certificate? Where is the chocolate cake I baked for my
+          Aunt’s birthday? And why did you take your dog to the vet on that same
+          Thursday?!
+        </StyledSubTitle>
+        <StyledDivider />
+        <StyledLink>
+          <Button color="default" startIcon={<HomeIcon />} variant="contained">
+            Home
+          </Button>
+        </StyledLink>
+      </Box>
+    </Box>
+  )
+}
+
+export default NotFoundPage