From 8713e297dd9bf45a7777662225a280cd1f5de433 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 22 Aug 2016 12:35:59 -0400
Subject: [PATCH] add about modal to link to github

---
 client/components/Nav.js               |  7 +++++
 client/modules/IDE/components/About.js | 41 ++++++++++++++++++++++++++
 client/modules/IDE/pages/IDEView.js    | 10 +++++++
 client/routes.js                       |  1 +
 client/styles/components/_about.scss   | 20 +++++++++++++
 client/styles/main.scss                |  1 +
 server/routes/server.routes.js         |  4 +++
 7 files changed, 84 insertions(+)
 create mode 100644 client/modules/IDE/components/About.js
 create mode 100644 client/styles/components/_about.scss

diff --git a/client/components/Nav.js b/client/components/Nav.js
index cdf3cccb..d8ebd07c 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -67,6 +67,13 @@ function Nav(props) {
             );
           }
         })()}
+        <li className="nav__item">
+          <p className="nav__about">
+            <Link to="/about">
+              About
+            </Link>
+          </p>
+        </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
diff --git a/client/modules/IDE/components/About.js b/client/modules/IDE/components/About.js
new file mode 100644
index 00000000..1565e9aa
--- /dev/null
+++ b/client/modules/IDE/components/About.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+import { browserHistory } from 'react-router';
+
+class About extends React.Component {
+  closeAboutModal() {
+    browserHistory.push('/');
+  }
+
+  render() {
+    return (
+      <div className="about">
+        <header className="about__header">
+          <h2>About</h2>
+          <button className="about__exit-button" onClick={this.closeAboutModal}>
+            <InlineSVG src={exitUrl} alt="Close About Overlay" />
+          </button>
+        </header>
+        <div className="about__copy">
+          <p>
+            The p5.js Web Editor is an open source project.
+          </p>
+          <p>
+            <a
+              href="https://github.com/processing/p5.js-web-editor"
+              target="_blank"
+            >Contribute </a>
+            or
+            <a
+              href="https://github.com/processing/p5.js-web-editor/issues/new"
+              target="_blank"
+            > report a bug.</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default About;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 996d9fa0..d02a0cd5 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -19,6 +19,7 @@ import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '
 import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
+import About from '../components/About';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -263,6 +264,15 @@ class IDEView extends React.Component {
             );
           }
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.location.pathname === '/about') {
+            return (
+              <Overlay>
+                <About />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );
diff --git a/client/routes.js b/client/routes.js
index 45a5afd8..b47056bc 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -22,6 +22,7 @@ const routes = (store) =>
     <Route path="/full/:project_id" component={FullView} />
     <Route path="/sketches" component={IDEView} />
     <Route path="/:username/sketches" component={IDEView} />
+    <Route path="/about" component={IDEView} />
   </Route>
   );
 
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
new file mode 100644
index 00000000..b04fc160
--- /dev/null
+++ b/client/styles/components/_about.scss
@@ -0,0 +1,20 @@
+.about {
+  @extend %modal;
+  display: flex;
+  flex-wrap: wrap;
+  flex-flow: column;
+}
+
+.about__header {
+  display: flex;
+  justify-content: space-between;
+  padding: #{20 / $base-font-size}rem;
+}
+
+.about__exit-button {
+  @extend %icon;
+}
+
+.about__copy {
+  padding: #{20 / $base-font-size}rem;
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 59cfba80..be6f4a1f 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -22,6 +22,7 @@
 @import 'components/console';
 @import 'components/resizer';
 @import 'components/overlay';
+@import 'components/about';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index f29c6b39..37a2d2d2 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -29,6 +29,10 @@ router.route('/sketches').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });
 
+router.route('/about').get((req, res) => {
+  res.sendFile(path.resolve(`${__dirname}/../../index.html`));
+});
+
 router.route('/:username/sketches').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });