Commit 633e5a9a authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel
Browse files

Update 404 error page

parent bf4dd9be
Pipeline #197533 passed with stages
in 4 minutes and 19 seconds
......@@ -46,7 +46,7 @@
font-size: 12px;
}
.reloadButton {
.reloadButton, .homeButton {
padding-top: 40px;
}
......@@ -78,8 +78,8 @@
text-align: right;
span {
margin-right: 83px;
margin-left: 30px;
margin-right: 77px;
margin-left: 25px;
}
}
......@@ -88,16 +88,24 @@
text-align: left;
span {
margin-right: 15px;
margin-left: 30px;
margin-left: 25px;
}
}
.infoIcon {
.vennIntersection{
padding-left: 19px;
svg {
fill: $red;
width: 24px;
height: 24px;
.infoText{
font-size: 18px;
font-weight: bold;
}
.infoIcon {
svg {
fill: $red;
width: 24px;
height: 24px;
}
}
}
}
......@@ -59,8 +59,10 @@ const GeneralErrorScreen = () => {
<div
className={classNames(styles.vennCircle, styles.vennCircleRight)}
>
<div className={styles.infoIcon}>
<InfoIcon />
<div className={styles.vennIntersection}>
<div className={styles.infoIcon}>
<InfoIcon />
</div>
</div>
<span>...now we need you to do something</span>
</div>
......
......@@ -15,30 +15,43 @@
*/
import React from 'react';
import classNames from 'classnames';
import * as urlFor from 'src/shared/helpers/urlHelper';
import { PrimaryButton } from '../button/Button';
import styles from './ErrorScreen.scss';
const NotFoundErrorScreen = () => {
const containerStyles = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh'
} as const;
const firstLineStyles = {
fontSize: '72px',
margin: 0
};
// TODO: 404s should be logged in the service monitoring system being developed by BE.
const secondLineStyles = {
fontSize: '32px'
const goToHomePage = () => {
window.location.replace(urlFor.home());
};
return (
<div style={containerStyles}>
<p style={firstLineStyles}>404</p>
<p style={secondLineStyles}>page not found</p>
</div>
<section className={styles.generalErrorScreen}>
<div className={styles.generalErrorBody}>
<p className={styles.generalErrorTopMessage}>Venn of the not found</p>
<div className={styles.generalErrorImage}>
<div className={classNames(styles.vennCircle, styles.vennCircleLeft)}>
<span> We may have moved this page...</span>
</div>
<div
className={classNames(styles.vennCircle, styles.vennCircleRight)}
>
<div className={styles.vennIntersection}>
<div className={styles.infoText}>404</div>
</div>
<span>...or your link has changed or gone</span>
</div>
</div>
<div className={styles.homeButton}>
<PrimaryButton onClick={goToHomePage}>Home page</PrimaryButton>
</div>
</div>
</section>
);
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment