Feedback modal (WIP)

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

public/index.html

@@ -19,7 +19,7 @@
         *, a {
           font-family: 'Lexend Deca', sans-serif;
           text-align: center;
-          color: black
+          color: black;
         }
 
         @media (prefers-color-scheme: dark) {

src/App.jsx

@@ -18,9 +18,10 @@ import Modal from 'react-modal';
 import merge from 'lodash.merge';
 
 // Modals are lazy loaded as the user won't use them every time they open a tab
-const MainModal = React.lazy(() => import('./components/modals/MainModal'));
+const Main = React.lazy(() => import('./components/modals/Main'));
 const Update = React.lazy(() => import('./components/modals/Update'));
 const Welcome = React.lazy(() => import('./components/modals/Welcome'));
+const Feedback = React.lazy(() => import('./components/modals/Feedback'));
 const renderLoader = () => <div></div>;
 
 export default class App extends React.PureComponent {
@@ -29,7 +30,8 @@ export default class App extends React.PureComponent {
     this.state = {
       mainModal: false,
       updateModal: false,
-      welcomeModal: false
+      welcomeModal: false,
+      feedbackModal: false
     };
   }
 
@@ -62,7 +64,7 @@ export default class App extends React.PureComponent {
         <ToastContainer position='bottom-right' autoClose={2500} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
         <div id='center'>
           <Search language={language.search} />
-          <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} language={language} />
+          <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} feedbackModalOpen={() => this.setState({ feedbackModal: true })} language={language} />
           <Greeting language={language.greeting} />
           <Clock/>
           <Date/>
@@ -74,7 +76,7 @@ export default class App extends React.PureComponent {
           </div>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
-              <MainModal
+              <Main
                 language={language}
                 modalClose={() => this.setState({ mainModal: false })} />
             </Modal>
@@ -83,9 +85,12 @@ export default class App extends React.PureComponent {
                 language={language.update}
                 modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
-            <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
+            <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Welcome modalClose={() => this.closeWelcome()} language={language.welcome} />
             </Modal>
+            <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+              <Feedback modalClose={() => this.setState({ feedbackModal: false })} />
+            </Modal>
           </React.Suspense>
         </div>
       </React.Fragment>

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>;
+    }
+}

src/modules/constants.js

@@ -2,4 +2,5 @@ export const API_URL = 'https://api.muetab.com';
 export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const WEBSITE_URL = 'https://muetab.com';
-export const OFFLINE_IMAGES = 20;
+export const OFFLINE_IMAGES = 20;
+export const BETA_VERSION = true;

src/scss/modules/_modal.scss

@@ -180,4 +180,56 @@
 .tablinks svg {
   top: 0.125em;
   position: relative;
+}
+
+#feedbackmodal {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 400px;
+  height: 100px;
+}
+
+.feedback {
+  width: 400px;
+  padding: 5px;
+
+  h1, .closeModal {
+    font-size: 2.5em;
+  }
+
+  span {
+    font-size: 6em;
+  }
+
+  button {
+    width: 100%;
+    border-radius: 48px;
+    outline: none;
+    border: none;
+    padding: 15px 20px;
+    font-size: 1.5em;
+    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+    color: #ffffff;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  input[type=text] {
+    width: 100%;
+    font-size: 1em;
+  }
+
+  input[type=range] {
+    margin-left: 20px;
+    margin-right: 20px;
+    vertical-align: middle;
+  }
+
+  label.values {
+    font-weight: 700;
+  }
 }