Feedback modal (WIP)

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/Navbar.jsx

@@ -4,6 +4,8 @@ import Gear from '@material-ui/icons/SettingsRounded';
 import NewReleases from '@material-ui/icons/NewReleasesRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
+import Report from '@material-ui/icons/SmsFailed';
+import * as Constants from '../modules/Constants';
 
 const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load
 const renderLoader = () => <div></div>;
@@ -18,14 +20,23 @@ export default class Navbar extends React.PureComponent {
     );
     if (localStorage.getItem('refresh') === 'false') refreshHTML = null;
 
+    // toggle feedback button
+    let feedbackHTML = (
+      <Tooltip title='Feedback' placement='top'>
+        <Report className='topicons' onClick={this.props.feedbackModalOpen} />
+      </Tooltip>
+    );
+    if (Constants.BETA_VERSION === false) feedbackHTML = null;
+
     return (
       <div className='navbar-container'>
         <div className='notes'>
-          <NotesIcon className='topicons' />
+          <NotesIcon className='topicons'/>
           <React.Suspense fallback={renderLoader()}>
             <Notes language={this.props.language.navbar.notes} />
           </React.Suspense>
         </div>
+        {feedbackHTML}
         <Tooltip title={this.props.language.navbar.tooltips.update} placement='top'>
           <NewReleases className='refreshicon topicons' onClick={this.props.updateModalOpen} />
         </Tooltip>

src/components/modals/Feedback.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default class Feedback extends React.PureComponent {
+    render() {
+        return <div className='feedback'>
+           <h1>Give us feedback</h1>
+           <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+            <label>How would you rate your experience of this Mue Build?</label>
+            <br/><br/>
+            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+            <br/><br/>
+            <label>What bugs did you encounter in your use of Mue?</label>
+            <br/><br/>
+            <input type='text' />
+            <br/><br/>
+            <label>How likely would you be to recommend this version of Mue to a friend or colleague?</label>
+            <br/><br/>
+            <label className='values'>0</label><input className='range' type='range' min='0' max='100' /><label className='values'>10</label>
+            <br/><br/><br/>
+            <button>Submit</button>
+        </div>;
+    }
+}