fixes #528 (#536)

client/components/Nav.jsx

@@ -341,12 +341,12 @@ class Nav extends React.PureComponent {
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
             >
-              <span className="nav__item-header">Help</span>
+              <span className="nav__item-header">Help & Feedback</span>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
               <li className="nav__dropdown-heading">
-                <span>Help</span>
+                <span>Help & Feedback</span>
                 <InlineSVG src={triangleUrl} />
               </li>
               <li className="nav__dropdown-item">
@@ -379,6 +379,16 @@ class Nav extends React.PureComponent {
                   About
                 </Link>
               </li>
+              <li className="nav__dropdown-item">
+                <Link
+                  to="/feedback"
+                  onFocus={this.handleFocus.bind(this, 'help')}
+                  onBlur={this.handleBlur}
+                  onClick={this.setDropdown.bind(this, 'none')}
+                >
+                  Feedback
+                </Link>
+              </li>
             </ul>
           </li>
         </ul>

client/modules/IDE/components/Feedback.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+import githubLogoUrl from '../../../images/github.svg';
+
+function Feedback(props) {
+  return (
+    <div className="feedback__content">
+      <div className="feedback__content-pane">
+        <h2 className="feedback__content-pane-header">
+          Via Github Issues
+        </h2>
+        <p className="feedback__content-pane-copy">
+          {'If you\'re familiar with Github, this is our preferred method for receiving bug reports and feedback.'}
+        </p>
+        <p className="feedback__content-pane-copy">
+          <a
+            href="https://github.com/processing/p5.js-web-editor"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="feedback__github-link"
+          >
+            Go to Github
+            <InlineSVG className="feedback__github-logo" src={githubLogoUrl} />
+          </a>
+        </p>
+      </div>
+      <div className="feedback__content-pane">
+        <h2 className="feedback__content-pane-header">
+          Via Google Form
+        </h2>
+        <p className="feedback__content-pane-copy">
+          You can also submit this quick form.
+        </p>
+        <p className="feedback__content-pane-copy">
+          <a
+            href="https://docs.google.com/forms/d/e/1FAIpQLSexU8W2EIhXjktl-_XzwjH6vgnelHirH4Yn4liN5BXltPWqBg/viewform"
+            target="_blank"
+            rel="noopener noreferrer"
+          >Go to Form</a>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Feedback;

client/modules/IDE/pages/IDEView.jsx

@@ -33,6 +33,7 @@ import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
 import AssetList from '../components/AssetList';
 import About from '../components/About';
+import Feedback from '../components/Feedback';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -456,6 +457,15 @@ class IDEView extends React.Component {
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
+        { this.props.location.pathname === '/feedback' &&
+          <Overlay
+            previousPath={this.props.ide.previousPath}
+            title="Submit Feedback"
+            ariaLabel="submit-feedback"
+          >
+            <Feedback previousPath={this.props.ide.previousPath} />
+          </Overlay>
+        }
         { this.props.ide.shareModalVisible &&
           <Overlay
             title="Share This Sketch"

client/routes.jsx

@@ -52,6 +52,7 @@ const routes = (store) => {
       <Route path="/:username/assets" component={IDEView} />
       <Route path="/:username/account" component={forceToHttps(AccountView)} />
       <Route path="/about" component={IDEView} />
+      <Route path="/feedback" component={IDEView} />
     </Route>
   );
 };

client/styles/components/_feedback.scss

@@ -0,0 +1,37 @@
+.feedback__content {
+  display: flex;
+  width: #{650 / $base-font-size}rem;
+  padding-top: #{17 / $base-font-size}rem;
+  padding-right: #{20 / $base-font-size}rem;
+  padding-bottom: #{20 / $base-font-size}rem;
+  padding-left: #{20 / $base-font-size}rem;
+}
+
+.feedback__content-pane {
+  flex: 1;
+  & + & {
+    margin-left: #{20 / $base-font-size}rem;
+  }
+}
+
+.feedback__content-pane-header {
+  margin-bottom: #{20 / $base-font-size}rem;
+}
+
+.feedback__content-pane-copy {
+  margin-bottom: #{20 / $base-font-size}rem;
+}
+
+.feedback__github-logo svg {
+  width: #{12 / $base-font-size}rem;
+  height: #{12 / $base-font-size}rem;
+  @include themify() {
+    fill: getThemifyVariable('inactive-text-color');
+  }
+}
+
+.feedback__github-link:hover svg {
+  @include themify() {
+    fill: getThemifyVariable('primary-text-color');
+  }
+}

client/styles/main.scss

@@ -39,6 +39,7 @@
 @import 'components/asset-list';
 @import 'components/keyboard-shortcuts';
 @import 'components/copyable-input';
+@import 'components/feedback';
 
 @import 'layout/ide';
 @import 'layout/fullscreen';

server/routes/server.routes.js

@@ -59,6 +59,10 @@ router.get('/about', (req, res) => {
   res.send(renderIndex());
 });
 
+router.get('/feedback', (req, res) => {
+  res.send(renderIndex());
+});
+
 router.get('/:username/sketches', (req, res) => {
   userExists(req.params.username, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))