fix: settings tab bugs

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

@@ -14,7 +14,7 @@ export default class Header extends PureComponent {
         <h2>{this.props.title}</h2>
         <Switch name={this.props.setting} text={getMessage('modals.main.settings.enabled')} category={this.props.category} element={this.props.element || null} />
         {this.props.zoomSetting ? 
-          <><Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name={this.props.zoomSetting} min='10' max='400' default='100' display='%' category={this.props.category} /><br/><br/></>
+          <><Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name={this.props.zoomSetting} min='10' max='400' default='100' display='%' category={this.props.zoomCategory || this.props.category} /><br/><br/></>
         : null}
       </>
     );

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' category='date'/>
+        <Header title={getMessage('modals.main.settings.sections.date.title')} 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>

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

@@ -27,7 +27,7 @@ export default class GreetingSettings extends PureComponent {
 
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.greeting.title')} category='greeting' element='.greeting' zoomSetting='zoomGreeting' category='greeting'/>
+        <Header title={getMessage('modals.main.settings.sections.greeting.title')} category='greeting' element='.greeting' zoomSetting='zoomGreeting'/>
         <Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
         <Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
         <Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>

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

@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
-import Switch from '../Switch';
+import Header from '../Header';
 import KeybindInput from '../KeybindInput';
 
 export default class KeybindSettings extends PureComponent {
@@ -99,8 +99,7 @@ export default class KeybindSettings extends PureComponent {
   render() {
     return (
       <>
-        <h2>{this.getMessage('modals.main.settings.sections.keybinds.title')}</h2>
-        <Switch name='keybindsEnabled' text={this.getMessage('modals.main.settings.enabled')} element='.other' />
+        <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>

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

@@ -4,7 +4,6 @@ import { Cancel } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 
 import Header from '../Header';
-import Slider from '../Slider';
 
 import EventBus from 'modules/helpers/eventbus';
 
@@ -61,7 +60,7 @@ export default class Message extends PureComponent {
   render() {
     return (
       <>
-        <Header title={this.getMessage('modals.main.settings.sections.message.title')} category='message' element='.message' zoomSetting='zoomMessage' category='message'/>
+        <Header title={this.getMessage('modals.main.settings.sections.message.title')} setting='message' category='message' element='.message' zoomSetting='zoomMessage'/>
         <p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
         {this.state.messages.map((_url, index) => (
           <Fragment key={index}>
@@ -73,7 +72,6 @@ export default class Message extends PureComponent {
           </Fragment>
         ))}
         <button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')}</button>
-        <Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
       </>
     );
   }

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

@@ -2,19 +2,17 @@ import variables from 'modules/variables';
 
 import Header from '../Header';
 import Checkbox from '../Checkbox';
-import Slider from '../Slider';
 
 export default function QuickLinks() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   return (
     <>
-      <Header title={getMessage('modals.main.settings.sections.quicklinks.title')} category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks' category='quicklinks'/>
+      <Header title={getMessage('modals.main.settings.sections.quicklinks.title')} setting='quicklinksenabled' category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks'/>
       <Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
       <Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
       <Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
       <Checkbox name='quicklinkstooltip' text={getMessage('modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>
-      <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
     </>
   );
 }

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

@@ -119,7 +119,7 @@ export default class QuoteSettings extends PureComponent {
 
     return (
       <>
-        <Header title={this.getMessage('modals.main.settings.sections.quote.title')} category='quote' element='.quotediv' zoomSetting='zoomQuote' category='quote'/>
+        <Header title={this.getMessage('modals.main.settings.sections.quote.title')} setting='quote' category='quote' element='.quotediv' zoomSetting='zoomQuote'/>
         <Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
         <Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
           {this.marketplaceType()}

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

@@ -72,7 +72,7 @@ export default class SearchSettings extends PureComponent {
   render() {
     return (
       <>
-        <Header title={this.getMessage('modals.main.settings.sections.search.title')} category='widgets'/>
+        <Header title={this.getMessage('modals.main.settings.sections.search.title')} setting='searchBar' category='widgets'/>
         {/* not supported on firefox */}
         {(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ? 
           <Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/> 

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

@@ -59,7 +59,7 @@ export default class TimeSettings extends PureComponent {
 
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.time.title')} category='clock' element='.clock-container' zoomSetting='zoomClock' category='clock'/>
+        <Header title={getMessage('modals.main.settings.sections.time.title')} setting='time' category='clock' element='.clock-container' zoomSetting='zoomClock'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
           <option value='digital'>{getMessage('modals.main.settings.sections.time.digital.title')}</option>
           <option value='analogue'>{getMessage('modals.main.settings.sections.time.analogue.title')}</option>

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

@@ -1,10 +1,9 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
-import Switch from '../Switch';
+import Header from '../Header';
 import Radio from '../Radio';
 import Checkbox from '../Checkbox';
-import Slider from '../Slider';
 
 export default class TimeSettings extends PureComponent {
   constructor() {
@@ -67,15 +66,13 @@ export default class TimeSettings extends PureComponent {
       
     return (
       <>
-        <h2>{getMessage('modals.main.settings.sections.weather.title')}</h2>
-        <Switch name='weatherEnabled' text={getMessage('modals.main.settings.enabled')} category='widgets'/>
+        <Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather'/>
         <ul>
           <p>{getMessage('modals.main.settings.sections.weather.location')} <span className='modalLink' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span></p>
           <input type='text' value={this.state.location} onChange={(e) => this.changeLocation(e)}></input>
         </ul>
         <br/>
         <Radio name='tempformat' title={getMessage('modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
-        <Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
 
         <h3>{getMessage('modals.main.settings.sections.weather.extra_info.title')}</h3>
         <Checkbox name='showlocation' text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')} category='weather'/>