Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: 404 Error Page Redesign #476 and #480 #665

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+187 −115
Open

Feature: 404 Error Page Redesign #476 and #480 #665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
315b222
Issues 476 and 480: 404 page redesign
zhiyanz Apr 18, 2023
e3869f5
updated class names
zhiyanz Apr 19, 2023
1658321
Merge branch 'main' into zhiyanz/feature/404page/redesign
zoobot May 2, 2023
3c30c29
Merge branch 'main' into zhiyanz/feature/404page/redesign
zoobot May 13, 2023
2489863
Merge branch 'main' into zhiyanz/feature/404page/redesign
zoobot May 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added client/src/assets/fonts/Montserrat.ttf
View file
Open in desktop
Binary file not shown.
Binary file added client/src/assets/fonts/Nunito.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed client/src/assets/images/404.jpg
View file
Open in desktop
Binary file not shown.
48 changes: 48 additions & 0 deletions client/src/assets/images/404image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 25 additions & 40 deletions client/src/pages/NotFound/NotFound.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,34 @@
import React from 'react';
import { Grid, Typography, Button, Container } from '@mui/material';
import { Footer } from '@/components/Footer/Footer';
import './NotFound.scss';
import { Link } from 'react-router-dom';
import ErrorImage from '../../assets/images/404image.svg';

export default function NotFound() {
return (
<div className="not-found">
<div className="background-overlay"></div>
<Container>
<Grid
container
justifyContent={{ md: 'center', sm: 'flex-start' }}
alignItems="flex-start"
direction="column"
sx={{ height: '100vh' }}
>
<Grid item>
<Typography variant="h1">404</Typography>
</Grid>
<Grid item sx={{ mb: 5 }}>
<Typography paragraph>
Sorry, we can&apos;t find that page! Don&apos;t worry though,
there are still plenty of trees to water!
</Typography>
</Grid>
<Grid item>
<Button
variant="outlined"
size="large"
sx={{
color: 'white',
backgroundColor: 'black',
border: '2px solid white',
fontSize: '1.5rem',
fontWeight: '800',
}}
>
<Link to="/">water the trees</Link>
</Button>
</Grid>
<Footer />
</Grid>
<Footer />
</Container>
<div className="not-found-page">
<div className="content-container">
<div className="error-messages">
<div className="image-container">
<div className="alert-text">404</div>
<img src={ErrorImage} alt="404" />
</div>

<div className="error-text">
<p className="error-text-top">Aww, nuts.</p>
<p className="error-text-bottom">
Looks like you got off track. <br />
Don’t worry though, there are <br />
plenty of trees to water!
</p>
</div>
</div>

<button type="button" className="home-button">
<Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
Go to Map
</Link>
</button>
</div>
</div>
);
}
189 changes: 114 additions & 75 deletions client/src/pages/NotFound/NotFound.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,119 @@
.not-found {
.not-found-page {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's an article about sass nesting to control scope if you want to go that route
https://css-tricks.com/using-sass-control-scope-bem-naming/

Here's some examples in our code base of what it looks like:
https://github.com/waterthetrees/wtt_front/blob/main/client/src/components/Button/Button.scss

height: 100vh;
background-image: url("/client/src/assets/images/404.jpg");

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

.MuiGrid-root {
z-index: 2;

h1,
p {
color: white;
}

button {
font-weight: 900;

a {
color: white;
text-decoration: none;
}
}

h1 {
font-size: 20rem;
}

p {
font-size: 1.7rem;
font-weight: 600;
}

@media (max-width: 900px) {
h1 {
font-size: 15rem;
margin-top: 10rem;
}

p {
font-size: 1.5rem;
margin-bottom: 0;
}
}

@media (max-width: 768px) {
h1 {
font-size: 10rem;
}

p {
font-size: 1.5rem;
margin-bottom: 0;
}
}

.MuiGrid-item {
button:hover {
background-color: white;
border: 2px solid white;

a {
color: black;
}
}
}
background-color: #FFDBBC;
}

.content-container {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

.error-messages {
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: center;
height: 50%;
width: 100%;
min-height: 500px;
}

.image-container {
display: flex;
position: relative;
height: 100%;
min-width: 574px;
}

.alert-text {
font-size: 300px;
font-family: "Nunito";
font-weight: 600;
position: absolute;
color: #FFFFFF;
text-align:center;
}

img {
position: absolute;
right: 50px;
top: 19%;
}

.error-text {
margin: 5%;
min-width: 360px;
}

.error-text-top {
font-size: 40px;
font-weight: 600;
font-family: 'Montserrat';
color: #FFFFFF;
}

.error-text-bottom {
font-size: 24px;
font-weight: 400;
font-family: "Montserrat";
color: #FFFFFF;
}

.home-button {
height: 48px;
width: 160px;
background-color: #FFFFFF;
border-color: #808080;
border-width: 0.5px;
border-radius: 4px;
font-family: "Montserrat";
font-size: 24px;
color: #808080;
}

.home-button:hover {
background-color: #EEEEEE;
}

@media (max-width: 900px) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's the media query breakpoints we've been using:

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV

.error-messages {
flex-direction: column;
margin: 24px;
}

.image-container {
justify-content: center;
min-height: 230px;
min-width: 308px;
}

.alert-text {
right: auto;
font-size: 180px;
}

.background-overlay {
background: rgb(0 0 0 / 20%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
img {
right: auto;
height: 230px;
top: 14%;
}

.error-text{
margin: auto;
margin-bottom: 40px;
}
}

@font-face {
font-family: "Montserrat";
src: url(../../assets/fonts/Montserrat.ttf);
}

@font-face {
font-family: "Nunito";
src: url(../../assets/fonts/Nunito.ttf);
}