Unverified Commit c5089410 authored by Jyothish's avatar Jyothish Committed by GitHub
Browse files

new general error screen with venn diagram (#566)

parent 67e3de66
Pipeline #190168 passed with stages
in 6 minutes and 49 seconds
@import 'src/styles/common';
$generalErrorImageWidth: 170px;
$generalErrorImageGap: 60px;
$generalErrorImagesTotalWidth: calc(
3 * #{$generalErrorImageWidth} + 2 * #{$generalErrorImageGap}
);
.newTechErrorWrapper {
padding-top: 10vh;
display: flex;
......@@ -36,36 +30,74 @@ $generalErrorImagesTotalWidth: calc(
flex: 0 0 auto;
}
.generalErrorTopMessage {
font-weight: bold;
}
.generalErrorBody {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 100px;
}
.generalErrorBottomMessage {
font-size: 12px;
}
.reloadButton {
padding-top: 40px;
}
.generalErrorImages {
img {
width: 170px;
height: 170px;
.moreOptions {
padding: 50px 0 20px 0;
}
.resetOption {
color: $red;
button {
margin-top: 24px;
}
}
.generalErrorImage {
display: flex;
font-size: 12px;
.vennCircle {
display: flex;
width: 195px;
height: 195px;
align-items: center;
border-radius: 50%;
background-color: rgba(183, 192, 200, 0.24);
position: relative;
}
@media screen and (min-width: $generalErrorImagesTotalWidth) {
margin-top: 10vh;
margin-bottom: calc(#{$generalErrorImageGap} / 2);
.vennCircleLeft {
left: 32px;
text-align: right;
img:not(:last-child) {
margin-right: $generalErrorImageGap;
span {
margin-right: 83px;
margin-left: 30px;
}
}
@media screen and (max-width: $generalErrorImagesTotalWidth) {
display: inline-flex;
flex-direction: column;
img:not(:last-child) {
margin-bottom: calc(#{$generalErrorImageGap} / 2);
.vennCircleRight {
right: 32px;
text-align: left;
span {
margin-right: 15px;
margin-left: 30px;
}
}
.infoIcon {
padding-left: 19px;
svg {
fill: $red;
width: 24px;
height: 24px;
}
}
}
......@@ -14,34 +14,84 @@
* limitations under the License.
*/
import React from 'react';
import React, { useState } from 'react';
import classNames from 'classnames';
import storageService from 'src/services/storage-service';
import * as urlFor from 'src/shared/helpers/urlHelper';
import { Topbar } from 'src/header/Header';
import generalErrorImage1 from './images/general-error-1.jpg';
import generalErrorImage2 from './images/general-error-2.jpg';
import generalErrorImage3 from './images/general-error-3.jpg';
import { ReactComponent as InfoIcon } from 'static/img/shared/icon_alert_circle.svg';
import { PrimaryButton } from '../button/Button';
import ShowHide from '../show-hide/ShowHide';
import styles from './ErrorScreen.scss';
const GeneralErrorScreen = () => (
<section className={styles.generalErrorScreen}>
<Topbar />
<div className={styles.generalErrorBody}>
<p className={styles.generalErrorTopMessage}>
Sorry, something seems to have gone wrong
</p>
<div className={styles.generalErrorImages}>
<img src={generalErrorImage1} />
<img src={generalErrorImage2} />
<img src={generalErrorImage3} />
</div>
<div className={styles.generalErrorBottomMessage}>
<p>We‘re trying to fix it right now</p>
<p>Please try again later...</p>
const GeneralErrorScreen = () => {
const [moreOptionExpanded, setMoreOptionExpanded] = useState(false);
const toggleChevron = () => {
setMoreOptionExpanded(!moreOptionExpanded);
};
const reloadPage = () => {
window.location.reload();
};
const resetPage = () => {
storageService.clearAll();
window.location.replace(urlFor.home());
};
return (
<section className={styles.generalErrorScreen}>
<Topbar />
<div className={styles.generalErrorBody}>
<p className={styles.generalErrorTopMessage}>
Venn of the current issue
</p>
<div className={styles.generalErrorImage}>
<div className={classNames(styles.vennCircle, styles.vennCircleLeft)}>
<span> We've made some changes...</span>
</div>
<div
className={classNames(styles.vennCircle, styles.vennCircleRight)}
>
<div className={styles.infoIcon}>
<InfoIcon />
</div>
<span>...now we need you to do something</span>
</div>
</div>
<div className={styles.reloadButton}>
<PrimaryButton isDisabled={moreOptionExpanded} onClick={reloadPage}>
Reload
</PrimaryButton>
</div>
<div className={styles.generalErrorBottomMessage}>
<div className={styles.moreOptions}>
<ShowHide
onClick={toggleChevron}
isExpanded={moreOptionExpanded}
label="If the site still fails to load"
/>
</div>
{moreOptionExpanded && (
<div className={styles.resetOption}>
<div>Unfortunately we need to reset everything</div>
<div>
All your species, configuration of views &amp; history will be
lost
</div>
<PrimaryButton onClick={resetPage}>Reset the site</PrimaryButton>
</div>
)}
</div>
</div>
</div>
</section>
);
</section>
);
};
export default GeneralErrorScreen;
......@@ -16,6 +16,7 @@
import queryString from 'query-string';
export const home = () => '/';
export const speciesSelector = () => '/species-selector';
export const customDownload = () => '/custom-download';
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="alert_x5F_circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M16,31C7.7,31,1,24.3,1,16S7.7,1,16,1s15,6.7,15,15S24.3,31,16,31z M18.2,13.7v-1.9V7.3c0-0.5-0.4-0.8-0.8-0.8h-2.9
c-0.5,0-0.8,0.4-0.8,0.8v4.5v1.9v3.2c0,0.5,0.4,0.8,0.8,0.8h2.9c0.5,0,0.8-0.4,0.8-0.8V13.7z M16,20.3c-1.4,0-2.6,1.2-2.6,2.6
s1.2,2.6,2.6,2.6s2.6-1.1,2.6-2.6S17.4,20.3,16,20.3z"/>
</svg>
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