From a5dc2c98a0b205757404902087a8d141e3e8604f Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Thu, 30 Sep 2021 17:48:38 +0100
Subject: [PATCH] fix: various settings tabs

---
 .../modals/main/settings/sections/Date.jsx    |  2 +-
 .../main/settings/sections/Keybinds.jsx       | 47 ++++++++++---------
 .../modals/main/settings/sections/Navbar.jsx  |  3 +-
 .../sections/background/Background.jsx        |  2 +-
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index e194c134..66e29b1d 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -51,7 +51,7 @@ export default class DateSettings extends PureComponent {
 
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.date.title')} category='date' element='.date' zoomSetting='zoomDate'/>
+        <Header title={getMessage('modals.main.settings.sections.date.title')} setting='date' category='date' element='.date' zoomSetting='zoomDate'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
           <option value='long'>{getMessage('modals.main.settings.sections.date.type.long')}</option>
           <option value='short'>{getMessage('modals.main.settings.sections.date.type.short')}</option>
diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx
index 4684ec96..f93ddb27 100644
--- a/src/components/modals/main/settings/sections/Keybinds.jsx
+++ b/src/components/modals/main/settings/sections/Keybinds.jsx
@@ -61,8 +61,10 @@ export default class KeybindSettings extends PureComponent {
   cancel(type) {
     document.removeEventListener('keydown', this.keydown);
     document.removeEventListener('keyup', this.keyup);
+
     const currentKeybinds = this.state.keybinds;
     delete currentKeybinds[type];
+
     this.setState({
       keybinds: currentKeybinds
     });
@@ -73,6 +75,7 @@ export default class KeybindSettings extends PureComponent {
     const keybinds = this.state.keybinds;
     keybinds[type] = '';
     localStorage.setItem('keybinds', JSON.stringify(keybinds));
+
     this.setState({
       keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
     });
@@ -101,27 +104,29 @@ export default class KeybindSettings extends PureComponent {
       <>
         <Header title={this.getMessage('modals.main.settings.sections.keybinds.title')} setting='keybindsEnabled' element='.other' />
         <table className='keybind-table'>
-          <tr>  
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
-          </tr> 
-          <tr>  
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
-          </tr> 
-          <tr>  
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
-          </tr> 
-          <tr>  
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
-            <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
-          </tr>  
-      </table>
+          <tbody>
+            <tr>  
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
+            </tr> 
+            <tr>  
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
+            </tr> 
+            <tr>  
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
+            </tr> 
+            <tr>  
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
+              <th><KeybindInput name={this.getMessage('modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
+            </tr>  
+          </tbody>
+        </table>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 2e5e04a2..0b355b62 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -2,7 +2,6 @@ import variables from 'modules/variables';
 
 import { PureComponent } from 'react';
 
-import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Slider from '../Slider';
@@ -13,7 +12,7 @@ export default class Navbar extends PureComponent {
 
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.appearance.navbar.title')} />
+        <h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
         <Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
         <Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
         <Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index 5e83bf08..d48a8b2e 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -123,7 +123,7 @@ export default class BackgroundSettings extends PureComponent {
   
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.background.title')} category='background' element='#backgroundImage'/>
+        <Header title={getMessage('modals.main.settings.sections.background.title')} setting='background' category='background' element='#backgroundImage'/>
         <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
         <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
         <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />