new general error screen with venn diagram (#566)

src/ensembl/src/shared/components/error-screen/ErrorScreen.scss

 @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;
     }
   }
 }

src/ensembl/src/shared/components/error-screen/GeneralErrorScreen.tsx

@@ -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;

src/ensembl/src/shared/helpers/urlHelper.ts

@@ -16,6 +16,7 @@
 
 import queryString from 'query-string';
 
+export const home = () => '/';
 export const speciesSelector = () => '/species-selector';
 export const customDownload = () => '/custom-download';
 

src/ensembl/static/img/shared/icon_alert_circle.svg

+<?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>