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 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))