diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 000c1d68..f8f19848 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -341,12 +341,12 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
onFocus={this.clearHideTimeout}
>
- Help
+ Help & Feedback
-
- Help
+ Help & Feedback
-
@@ -379,6 +379,16 @@ class Nav extends React.PureComponent {
About
+ -
+
+ Feedback
+
+
diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
new file mode 100644
index 00000000..10c62024
--- /dev/null
+++ b/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 (
+
+
+
+ Via Github Issues
+
+
+ {'If you\'re familiar with Github, this is our preferred method for receiving bug reports and feedback.'}
+
+
+
+ Go to Github
+
+
+
+
+
+
+ Via Google Form
+
+
+ You can also submit this quick form.
+
+
+ Go to Form
+
+
+
+ );
+}
+
+export default Feedback;
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index eef3c5eb..eb34660e 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/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 {
}
+ { this.props.location.pathname === '/feedback' &&
+
+
+
+ }
{ this.props.ide.shareModalVisible &&
{
+
);
};
diff --git a/client/styles/components/_feedback.scss b/client/styles/components/_feedback.scss
new file mode 100644
index 00000000..8fad23ab
--- /dev/null
+++ b/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');
+ }
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index c3bf7498..01069b3e 100644
--- a/client/styles/main.scss
+++ b/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';
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index e990ccf7..105d149e 100644
--- a/server/routes/server.routes.js
+++ b/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))