From 6b9a0028c6f1e839328e1ccae0d1fcf8b2a961c6 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 7 Nov 2020 12:44:25 +0000 Subject: [PATCH] Feedback modal (WIP) Co-authored-by: Alex Sparkes --- public/index.html | 2 +- src/App.jsx | 15 ++++-- src/components/Navbar.jsx | 13 ++++- src/components/modals/Feedback.jsx | 23 ++++++++ .../modals/{MainModal.jsx => Main.jsx} | 0 src/modules/constants.js | 3 +- src/scss/modules/_modal.scss | 52 +++++++++++++++++++ 7 files changed, 100 insertions(+), 8 deletions(-) create mode 100644 src/components/modals/Feedback.jsx rename src/components/modals/{MainModal.jsx => Main.jsx} (100%) diff --git a/public/index.html b/public/index.html index c81fe2ec..846cd177 100644 --- a/public/index.html +++ b/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) { diff --git a/src/App.jsx b/src/App.jsx index e3a9b5cd..1f027034 100644 --- a/src/App.jsx +++ b/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 = () =>
; 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 {
- this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} language={language} /> + this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} feedbackModalOpen={() => this.setState({ feedbackModal: true })} language={language} /> @@ -74,7 +76,7 @@ export default class App extends React.PureComponent {
this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ mainModal: false })} /> @@ -83,9 +85,12 @@ export default class App extends React.PureComponent { language={language.update} modalClose={() => this.setState({ updateModal: false })} /> - this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}> + this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> this.closeWelcome()} language={language.welcome} /> + this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> + this.setState({ feedbackModal: false })} /> + diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 7f1db7e7..35a44e27 100644 --- a/src/components/Navbar.jsx +++ b/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 = () =>
; @@ -18,14 +20,23 @@ export default class Navbar extends React.PureComponent { ); if (localStorage.getItem('refresh') === 'false') refreshHTML = null; + // toggle feedback button + let feedbackHTML = ( + + + + ); + if (Constants.BETA_VERSION === false) feedbackHTML = null; + return (
- +
+ {feedbackHTML} diff --git a/src/components/modals/Feedback.jsx b/src/components/modals/Feedback.jsx new file mode 100644 index 00000000..3cdf8dbe --- /dev/null +++ b/src/components/modals/Feedback.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export default class Feedback extends React.PureComponent { + render() { + return
+

Give us feedback

+ × + +

+ +

+ +

+ +

+ +

+ +


+ +
; + } +} diff --git a/src/components/modals/MainModal.jsx b/src/components/modals/Main.jsx similarity index 100% rename from src/components/modals/MainModal.jsx rename to src/components/modals/Main.jsx diff --git a/src/modules/constants.js b/src/modules/constants.js index bc9068e6..3d3bd189 100644 --- a/src/modules/constants.js +++ b/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; \ No newline at end of file +export const OFFLINE_IMAGES = 20; +export const BETA_VERSION = true; \ No newline at end of file diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 86c01bfa..1d008987 100644 --- a/src/scss/modules/_modal.scss +++ b/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; + } } \ No newline at end of file