From eefc594ec116ca7365fbd3e51ff75a675872f4ce Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Thu, 5 Aug 2021 17:25:46 +0100
Subject: [PATCH] fix: improvements to feedback modal

---
 src/components/modals/Modals.jsx             | 6 +++---
 src/components/modals/feedback/Feedback.jsx  | 6 +++---
 src/components/modals/feedback/feedback.scss | 9 +++++++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index 665d50e6..e4d66321 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -3,14 +3,14 @@ import React from 'react';
 import EventBus from '../../modules/helpers/eventbus';
 
 import Main from './main/Main';
+import Feedback from './feedback/Feedback';
 import Navbar from '../widgets/navbar/Navbar';
 
 import Modal from 'react-modal';
 
-// These modals are lazy loaded as the user won't use them every time they open a tab
-// We used to lazy load the main modal, but doing so broke the main modal open animation on first click
+// Welcome modal is lazy loaded as the user won't use it every time they open a tab
+// We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click
 const Welcome = React.lazy(() => import('./welcome/Welcome'));
-const Feedback = React.lazy(() => import('./feedback/Feedback'));
 const renderLoader = () => <></>;
 
 export default class Modals extends React.PureComponent {
diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index 73b56590..4e8bd5d7 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/src/components/modals/feedback/Feedback.jsx
@@ -38,7 +38,7 @@ export default class FeedbackModal extends React.PureComponent {
       });
 
       await fetch(window.constants.FEEDBACK_FORM, {
-        'method': 'POST'
+        method: 'POST'
       });
 
       this.setState({
@@ -47,7 +47,7 @@ export default class FeedbackModal extends React.PureComponent {
 
       setTimeout(() => {
         this.props.modalClose();
-      }, 3000);
+      }, 5000);
     }
   }
 
@@ -84,7 +84,7 @@ export default class FeedbackModal extends React.PureComponent {
             <textarea name='question4' id='questionfour'/>
             <p className='feedbackerror'>{this.state.questionfourerror}</p>
           </>
-          {this.state.formsubmit}
+          <p>{this.state.formsubmit}</p>
           <button onClick={() => this.submitForm()}>{this.language.submit}</button>
         </>
       </div>
diff --git a/src/components/modals/feedback/feedback.scss b/src/components/modals/feedback/feedback.scss
index 5dd9f321..f7476ab1 100644
--- a/src/components/modals/feedback/feedback.scss
+++ b/src/components/modals/feedback/feedback.scss
@@ -31,10 +31,14 @@
     border: none;
     padding: 15px 20px;
     font-size: 1.5em;
-    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+    background: #5352ed;
     color: #fff;
     text-transform: uppercase;
     cursor: pointer;
+
+    &:hover {
+      background: rgba(83, 82, 237, 0.8);
+    }
   }
 
   input[type=text] {
@@ -54,7 +58,8 @@
 
   textarea {
     width: 80%;
-    background-color: var(--sidebar);
+    padding: 10px;
+    background-color: var(--sidebar) !important;
   }
 
   .feedbackerror {