From 3422e5abc4b2cb2aaad6709409b74886dc46ba7b Mon Sep 17 00:00:00 2001
From: Malte Modrow <modrow@ubilabs.net>
Date: Tue, 13 Apr 2021 18:11:38 +0200
Subject: [PATCH] feat(about): add route for about component

---
 .../about-project.tsx                         | 14 ++++++++++++++
 src/scripts/components/main/app/app.styl      |  5 +++--
 src/scripts/components/main/app/app.tsx       | 19 +++++++++++++++----
 3 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 src/scripts/components/main/about-project-standalone/about-project.tsx

diff --git a/src/scripts/components/main/about-project-standalone/about-project.tsx b/src/scripts/components/main/about-project-standalone/about-project.tsx
new file mode 100644
index 000000000..d1a310a6e
--- /dev/null
+++ b/src/scripts/components/main/about-project-standalone/about-project.tsx
@@ -0,0 +1,14 @@
+import React, {FunctionComponent} from 'react';
+import {useHistory} from 'react-router-dom';
+import AboutProject from '../about-project/about-project';
+import Overlay from '../overlay/overlay';
+
+const AboutProjectStandalone: FunctionComponent = () => {
+  const history = useHistory();
+
+  return (
+    <Overlay onClose={() => history.push('/')}>{<AboutProject />}</Overlay>
+  );
+};
+
+export default AboutProjectStandalone;
diff --git a/src/scripts/components/main/app/app.styl b/src/scripts/components/main/app/app.styl
index a4deb5fc8..d93837674 100644
--- a/src/scripts/components/main/app/app.styl
+++ b/src/scripts/components/main/app/app.styl
@@ -10,7 +10,9 @@
   font-family: NotesEsaBold
   src: url('../../../../../assets/fonts/NotesEsaBol.otf')
 
-:global(html), :global(body), :global(#app)
+:global(html),
+:global(body),
+:global(#app)
   overflow: hidden
   margin: 0
   height: 100%
@@ -37,7 +39,6 @@
   top: emCalc(19px)
   left: emCalc(22px)
   z-index: 4
-  pointer-events: none
   fill: $textWhite
 
 @media screen and (max-width: 480px)
diff --git a/src/scripts/components/main/app/app.tsx b/src/scripts/components/main/app/app.tsx
index 76c1189f0..eb6b30b9b 100644
--- a/src/scripts/components/main/app/app.tsx
+++ b/src/scripts/components/main/app/app.tsx
@@ -1,7 +1,7 @@
 import React, {FunctionComponent} from 'react';
 import {Provider as StoreProvider, useSelector} from 'react-redux';
 import {IntlProvider} from 'react-intl';
-import {HashRouter as Router, Switch, Route} from 'react-router-dom';
+import {HashRouter as Router, Switch, Route, Link} from 'react-router-dom';
 import {MatomoProvider, createInstance} from '@datapunt/matomo-tracker-react';
 
 import {languageSelector} from '../../../selectors/language';
@@ -21,6 +21,7 @@ import PresentationSelector from '../../stories/presentation-selector/presentati
 import ShowcaseSelector from '../../stories/showcase-selector/showcase-selector';
 import DataViewer from '../data-viewer/data-viewer';
 import Tracking from '../tracking/tracking';
+import AboutProjectStandalone from '../about-project-standalone/about-project';
 
 import translations from '../../../i18n';
 import {useStoryMarkers} from '../../../hooks/use-story-markers';
@@ -50,20 +51,30 @@ const TranslatedApp: FunctionComponent = () => {
   const markers = useStoryMarkers();
   const language = useSelector(languageSelector);
 
+  const logo = (
+    <Link to="/about">
+      <div className={styles.logo}>
+        <EsaLogo />
+      </div>
+    </Link>
+  );
+
   return (
     <Router>
       <IntlProvider locale={language} messages={translations[language]}>
         <Switch>
           <Route path="/" exact>
-            <div className={styles.logo}>
-              <EsaLogo />
-            </div>
+            {logo}
             <DataViewer markers={markers} backgroundColor={'#10161A'} />
             <Navigation />
             <TimeSlider />
             <DataSetInfo />
             <LayerSelector />
           </Route>
+          <Route path="/about" exact>
+            {logo}
+            <AboutProjectStandalone />
+          </Route>
           <Route path="/stories" exact>
             <StoriesSelector />
           </Route>