refactor: codacy and some style changes etc

src/components/modals/feedback/Feedback.jsx

@@ -6,35 +6,51 @@ export default class FeedbackModal extends PureComponent {
   constructor() {
     super();
     this.state = {
-      questionone: 5,
-      questionthree: 5,
-      questiontwoerror: '',
-      questionfourerror: '',
+      question_one: 5,
+      question_two: {
+        value: '',
+        error: ''
+      },
+      question_three: 5,
+      question_four: {
+        value: '',
+        error: ''
+      },
       formsubmit: ''
     };
     this.language = window.language.modals.feedback;
   }
 
-  async submitForm () {
-    let questiontwoerror, questionfourerror;
+  async submitForm(e) {
+    e.preventDefault();
 
-    if (document.getElementById('questiontwo').value.length <= 0) {
-      questiontwoerror = this.language.not_filled;
+    let question_two_error, question_four_error;
+
+    if (this.state.question_two.value.length <= 0) {
+      question_two_error = this.language.not_filled;
     }
 
-    if (document.getElementById('questionfour').value.length <= 0) {
-      questionfourerror = this.language.not_filled;
+    if (this.state.question_four.value.length <= 0) {
+      question_four_error = this.language.not_filled;
     }
 
-    if (questiontwoerror || questionfourerror) {
+    if (question_two_error || question_four_error) {
       this.setState({
-        questiontwoerror: questiontwoerror,
-        questionfourerror: questionfourerror
+        question_two: {
+          error: question_two_error
+        },
+        question_four: {
+          error: question_four_error
+        }
       });
     } else {
       this.setState({
-        questiontwoerror: '',
-        questionfourerror: ''
+        question_two: {
+          error: ''
+        },
+        question_four: {
+          error: ''
+        }
       });
 
       await fetch(window.constants.FEEDBACK_FORM, {
@@ -56,37 +72,35 @@ export default class FeedbackModal extends PureComponent {
       <div className='feedback'>
         <h1>{this.language.title}</h1>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <>
+        <form>
           <input type='hidden' name='version' value={window.constants.VERSION} />
-          <>
+          <div className='question'>
             <label>{this.language.question_one}</label>
             <br/><br/>
             <label className='values'>0</label>
-            <input className='range' type='range' min='0' max='10' name='question1' value={this.state.questionone} onChange={(e) => this.setState({ questionone: e.target.value })}/>
-            <label className='values'>10 ({this.state.questionone})</label>
-          </>
-          <br/><br/>
-          <>
+            <input className='range' type='range' min='0' max='10' name='questionone' value={this.state.question_one} onChange={(e) => this.setState({ question_one: e.target.value })}/>
+            <label className='values'>10 ({this.state.question_one})</label>
+          </div>
+          <div className='question'>
             <label>{this.language.question_two}</label>
-            <textarea name='question2' id='questiontwo'/>
-            <p className='feedbackerror'>{this.state.questiontwoerror}</p>
-          </>
-          <>
+            <textarea name='questiontwo' onChange={(e) => this.setState({ question_two: { value: e.target.value }})}/>
+            <p className='feedbackerror'>{this.state.question_two.error}</p>
+          </div>
+          <div className='question'>
             <label>{this.language.question_three}</label>
             <br/><br/>
             <label className='values'>0</label>
-            <input className='range' type='range' min='0' max='10' name='question3' value={this.state.questionthree} onChange={(e) => this.setState({ questionthree: e.target.value })}/>
-            <label className='values'>10 ({this.state.questionthree})</label>
-          </>
-          <br/><br/>
-          <>
+            <input className='range' type='range' min='0' max='10' name='questionthree' value={this.state.question_three} onChange={(e) => this.setState({ question_three: e.target.value })}/>
+            <label className='values'>10 ({this.state.question_three})</label>
+          </div>
+          <div className='question'>
             <label>{this.language.question_four}</label>
-            <textarea name='question4' id='questionfour'/>
-            <p className='feedbackerror'>{this.state.questionfourerror}</p>
-          </>
+            <textarea name='questionfour' value={this.state.question_four.value} onChange={(e) => this.setState({ question_four: { value: e.target.value }})}/>
+            <p className='feedbackerror'>{this.state.question_four.error}</p>
+          </div>
           <p>{this.state.formsubmit}</p>
-          <button onClick={() => this.submitForm()}>{this.language.submit}</button>
-        </>
+          <button onClick={(e) => this.submitForm(e)}>{this.language.submit}</button>
+        </form>
       </div>
     );
   }

src/components/modals/feedback/feedback.scss

@@ -62,6 +62,10 @@
     background-color: var(--sidebar) !important;
   }
 
+  .question {
+    margin-bottom: 20px;
+  }
+
   .feedbackerror {
     color: red;
   }

src/components/modals/main/settings/Dropdown.jsx

@@ -25,7 +25,7 @@ export default class Dropdown extends PureComponent {
     window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
 
     this.setState({
-      value: value,
+      value,
       title: e.target[e.target.selectedIndex].text
     });
   

src/components/modals/main/settings/Radio.jsx

@@ -28,7 +28,7 @@ export default class Radio extends PureComponent {
     localStorage.setItem(this.props.name, value);
   
     this.setState({
-      value: value
+      value
     });
 
     window.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);

src/components/modals/main/settings/Slider.jsx

@@ -36,7 +36,7 @@ export default class Slider extends PureComponent {
   
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value: value,
+      value,
       numberWidth: ((value.length + 1) * this.widthCalculation)
     });
 

src/components/modals/main/settings/Text.jsx

@@ -22,7 +22,7 @@ export default class Text extends PureComponent {
 
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value: value
+      value
     });
 
     if (this.props.element) {

src/components/modals/main/settings/sections/About.jsx

@@ -47,17 +47,17 @@ export default class About extends PureComponent {
 
     const newVersion = versionData[0].tag_name;
 
-    let updateMsg = this.language.version.no_update;
+    let update = this.language.version.no_update;
     if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
-      updateMsg = `${this.language.version.update_available}: ${newVersion}`;
+      update = `${this.language.version.update_available}: ${newVersion}`;
     }
 
     this.setState({
       // exclude bots
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
-      sponsors: sponsors,
-      update: updateMsg,
-      other_contributors: other_contributors,
+      sponsors,
+      update,
+      other_contributors,
       photographers: photographers.sort().join(', '), 
       loading: null
     });

src/components/modals/main/settings/sections/Changelog.jsx

@@ -32,7 +32,7 @@ export default class Changelog extends PureComponent {
 
     this.setState({
       title: data.title,
-      date: date,
+      date,
       image: data.featured_image || null,
       author: 'By ' + data.authors.join(', '),
       html: data.html

src/components/modals/main/tabs/Settings.jsx

@@ -35,13 +35,13 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
-        <div label='Keybinds' name='keybinds'><Keybinds/></div>
+        <div label={sections.keybinds.title} name='keybinds'><Keybinds/></div>
         <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>
         <div label={sections.about.title} name='about'><About/></div>
       </Tabs>
-      <div className='reminder-info' style={{ display: display }}>
+      <div className='reminder-info' style={{ display }}>
         <h1>{reminder.title}</h1>
         <p>{reminder.message}</p>
         <button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -42,12 +42,10 @@ function Tab(props) {
 
   let icon, divider;
   switch (props.label) {
-    // Navbar
     case navbar.settings: icon = <Settings/>; break;
     case navbar.addons: icon = <Addons/>; break;
     case navbar.marketplace: icon = <Marketplace/>; break;
 
-    // Settings
     case settings.time.title: icon = <Time/>; break;
     case settings.greeting.title: icon = <Greeting/>; break;
     case settings.quote.title: icon = <Quote/>; break;
@@ -59,18 +57,16 @@ function Tab(props) {
     case settings.order.title: icon = <Order/>; break;
     case settings.language.title: icon = <Language/>; divider = true; break;
     case settings.advanced.title: icon = <Advanced/>; break;
-    case 'Keybinds': icon = <Keybinds/>; break;
+    case settings.keybinds.title: icon = <Keybinds/>; break;
     case settings.stats.title: icon = <Stats/>; break;
     case settings.experimental.title: icon = <Experimental/>; divider = true; break;
     case settings.changelog: icon = <Changelog/>; break;
     case settings.about.title: icon = <About/>; break;
 
-    // Addons
     case addons.added: icon = <Added/>; break;
     case addons.sideload: icon = <Sideload/>; break;
     case addons.create.title: icon = <Create/>; break;
 
-    // Marketplace
     case marketplace.photo_packs: icon = <Background/>; break;
     case marketplace.quote_packs: icon = <Quote/>; break;
     case marketplace.preset_settings: icon = <Advanced/>; break;

src/components/modals/welcome/welcome.scss

@@ -77,7 +77,6 @@
   }
 }
 
-
 .themesToggleArea {
   .active {
     background: var(--tab-active) !important;
@@ -123,6 +122,30 @@
   }
 }
 
+.upload {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  padding: 50px;
+  background: var(--sidebar);
+  color: var(--modal-text);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--tab-active);
+  }
+
+  svg {
+    font-size: 4em;
+  }
+
+  span {
+    font-size: 2em;
+  }
+}
+
 a.privacy {
   text-decoration: none;
   color: var(--modal-text);