adds: 404 concept styling

Seneca-CDOT · Apr 5, 2020 · 7f1d3aa · 7f1d3aa
1 parent 110c089
commit 7f1d3aa
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 18 deletions.
diff --git a/src/backend/web/app.js b/src/backend/web/app.js
@@ -73,9 +73,7 @@ app.use('/', router);
 app.use((req, res, _) => {
   const originalUrl = encodeURIComponent(req.originalUrl.trim());
   const redirectUrl = `/404?search=${originalUrl}`;
-  res
-    .status(404)
-    .redirect(redirectUrl)
+  res.status(404).redirect(redirectUrl);
 });
 
 module.exports = app;
diff --git a/src/frontend/src/pages/404.jsx b/src/frontend/src/pages/404.jsx
@@ -1,14 +1,32 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import PageBase from './PageBase';
 import Typography from '@material-ui/core/Typography';
 import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { Fab } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
 
 const useStyles = makeStyles((theme) => ({
+  root: {
+    zIndex: 100,
+    padding: theme.spacing(2, 4, 2, 4),
+    position: 'relative',
+    top: '40vh',
+    margin: 'auto',
+    backgroundColor: theme.palette.primary.main,
+    overflow: 'visible',
+    [theme.breakpoints.between('xs', 'sm')]: {
+      top: theme.spacing(24),
+    },
+  },
   h1: {
-    position: 'absolute',
-    color: 'white',
     fontFamily: 'Roboto',
     fontWeight: 'bold',
     opacity: 0.85,
+    color: theme.palette.grey[100],
     fontSize: '12rem',
     display: 'block',
     top: theme.spacing(20),
@@ -28,11 +46,11 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   h2: {
-    position: 'absolute',
-    color: 'white',
     fontFamily: 'Roboto',
     fontSize: '2rem',
     display: 'block',
+    color: theme.palette.grey[200],
+
     bottom: theme.spacing(12),
     left: theme.spacing(8),
     lineHeight: 'inherit',
@@ -51,24 +69,120 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '8rem',
     },
   },
+  link: {
+    color: 'white',
+    fontFamily: 'Roboto, sans-serif',
+    textDecoration: 'none',
+    fontSize: '1.5rem',
+    margin: '0 0.5rem 0 0.5rem',
+  },
+  errorImg: {
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundAttachment: 'scroll',
+    backgroundSize: 'cover',
+    height: 'calc(100vh - 6em)',
+    transition: 'opacity 1s ease-in-out',
+    position: 'absolute',
+    height: '100vh',
+    width: '100vw',
+    top: 0,
+  },
+  actions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  fab: {
+    position: 'relative',
+    fontSize: '1.5rem',
+    color: 'white',
+    padding: theme.spacing(4, 4, 4, 4),
+    bottom: -45,
+    zIndex: 200,
+    backgroundColor: theme.palette.secondary.light,
+
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.dark,
+    },
+
+    [theme.breakpoints.only('xs')]: {
+      fontSize: '1rem',
+      padding: theme.spacing(2, 4, 2, 4),
+      right: '-2rem',
+    },
+  },
 }));
 
+function RetrieveBackgroundAsset() {
+  const [backgroundImgSrc, setBackgroundImgSrc] = useState('');
+  const [transitionBackground, setTransitionBackground] = useState(true);
+  const classes = useStyles();
+
+  useEffect(() => {
+    async function getBackgroundImgSrc() {
+      // Uses https://unsplash.com/collections/1538150/milkyway collection
+      /* Other Options:
+        - https://unsplash.com/collections/291422/night-lights
+        */
+
+      // Ensure we are using an image which fits correctly to user's viewspace
+      const dimensions = `${window.innerWidth}x${window.innerHeight}`;
+      const response = await fetch(`https://source.unsplash.com/collection/1538150/${dimensions}`);
+
+      if (response.status !== 200) {
+        setBackgroundImgSrc('../../images/hero-banner.png');
+        throw new Error(response.statusText);
+      }
+
+      setBackgroundImgSrc(response.url);
+      setTransitionBackground(false);
+    }
+
+    getBackgroundImgSrc();
+  }, []);
+
+  return (
+    <div
+      className={classes.errorImg}
+      style={{
+        backgroundImage: `url(${backgroundImgSrc})`,
+        opacity: transitionBackground ? 0 : 0.4,
+      }}
+    ></div>
+  );
+}
+
 const ErrorPage = (props) => {
   const classes = useStyles();
   const params = new URLSearchParams(props.location.search);
   let originalUrl = decodeURIComponent(params.get('search')).replace('/', '');
 
   return (
-    <div>
-      <ThemeProvider>
-        <Typography variant="h1" className={classes.h1}>
-          Sorry!
-        </Typography>
-        <Typography variant="body1" className={classes.h2}>
-          Could Not Find: <pre>{originalUrl}</pre>
-        </Typography>
-      </ThemeProvider>
-    </div>
+    <PageBase title="404">
+      <Grid container spacing={0} direction="column" alignItems="center" justify="center">
+        <Grid item xs={8}>
+          <ThemeProvider>
+            <Card className={classes.root} elevation={8}>
+              <CardContent>
+                <Typography variant="h1" className={classes.h1}>
+                  404
+                </Typography>
+                <Typography variant="body1" className={classes.h2}>
+                  Could Not Find: {originalUrl}
+                </Typography>
+              </CardContent>
+              <CardActions className={classes.actions}>
+                <Fab size="large" variant="extended" elevation={0} href="/" className={classes.fab}>
+                  <ArrowBack />
+                  Let's Go Back
+                </Fab>
+              </CardActions>
+            </Card>
+          </ThemeProvider>
+        </Grid>
+      </Grid>
+      <RetrieveBackgroundAsset />
+    </PageBase>
   );
 };