fix: various bug fixes and refactor search settings

src/components/modals/main/scss/settings/_main.scss

@@ -144,6 +144,13 @@ input[type=color]::-moz-color-swatch {
 .radio-title {
   text-transform: uppercase;
   font-weight: bold;
+  font-size: 1.17rem;
+}
+
+.radio-title-small {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1rem;
 }
 
 .sortableitem {

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

@@ -27,7 +27,7 @@ export default class Radio extends React.PureComponent {
   render() {
     return (
       <FormControl component='fieldset'>
-        <FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
+        <FormLabel className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'} component='legend'>{this.props.title}</FormLabel>
         <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
           {this.props.options.map((option) => (
             <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />

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

@@ -1,55 +1,62 @@
 import React from 'react';
 
-import { isChrome } from 'react-device-detect';
-import { toast } from 'react-toastify';
-
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 
+import { isChrome } from 'react-device-detect';
+import { toast } from 'react-toastify';
+
 const searchEngines = require('../../../../widgets/search/search_engines.json');
 
 export default class SearchSettings extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      customEnabled: false,
+      customDisplay: 'none',
+      customValue: localStorage.getItem('customSearchEngine') || ''
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
   resetSearch() {
     localStorage.removeItem('customSearchEngine');
-    document.getElementById('customSearchEngine').value = '';
+    this.setState({
+      customValue: ''
+    });
 
-    toast(this.props.language.toasts.reset);
+    toast(window.language.modals.main.settings.toasts.reset);
   }
 
   componentDidMount() {
-    const searchEngine = localStorage.getItem('searchEngine');
-
-    if (searchEngine === 'custom') {
-      const input = document.getElementById('searchEngineInput');
-
-      input.style.display = 'block';
-      input.enabled = 'true';
-
-      document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
+    if (localStorage.getItem('searchEngine') === 'custom') {
+      this.setState({
+        customDisplay: 'block',
+        customEnabled: true
+      });
     } else {
       localStorage.removeItem('customSearchEngine');
     }
   }
 
   componentDidUpdate() {
-    if (document.getElementById('searchEngineInput').enabled === 'true') {
-      const input = document.getElementById('customSearchEngine').value;
-      if (input) {
-        localStorage.setItem('searchEngine', 'custom');
-        localStorage.setItem('customSearchEngine', input);
-      }
+    if (this.state.customEnabled === true && this.state.customValue !== '') {
+      localStorage.setItem('customSearchEngine', this.state.customValue);
     }
   }
 
   setSearchEngine(input) {
-    const searchEngineInput = document.getElementById('searchEngineInput');
     if (input === 'custom') {
-      searchEngineInput.enabled = 'true';
-      searchEngineInput.style.display = 'block';
+      this.setState({
+        customDisplay: 'block',
+        customEnabled: true
+      });
     } else {
-      searchEngineInput.style.display = 'none';
-      searchEngineInput.enabled = 'false';
+      this.setState({
+        customDisplay: 'none',
+        customEnabled: false
+      });
       localStorage.setItem('searchEngine', input);
     }
   }
@@ -63,15 +70,18 @@ export default class SearchSettings extends React.PureComponent {
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} />
         {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
+
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) => (
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
           ))}
           <option value='custom'>{search.custom.split(' ')[0]}</option>
         </Dropdown>
-        <ul id='searchEngineInput' style={{ display: 'none' }}>
-          <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.reset}</span></p>
-          <input type='text' id='customSearchEngine'></input>
+
+        <br/><br/>
+        <ul id='searchEngineInput' style={{ display: this.state.customDisplay }}>
+          <p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
+          <input type='text' id='customSearchEngine' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
         </ul>
       </>
     );

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

@@ -34,7 +34,7 @@ export default class TimeSettings extends React.PureComponent {
     const digitalSettings = (
       <>
         <h3>{time.digital.title}</h3>
-        <Radio title={time.format} name='timeformat' options={digitalOptions} />
+        <Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} />
         <br/>
         <Checkbox name='seconds' text={time.digital.seconds} />
         <Checkbox name='zero' text={time.digital.zero} />

src/components/modals/main/settings/sections/background/Background.jsx

@@ -42,8 +42,8 @@ export default class BackgroundSettings extends React.PureComponent {
     if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
       return (
         <>
-          <Checkbox name='backgroundVideoLoop' text='Loop Video'/>
-          <Checkbox name='backgroundVideoMute' text='Mute Video'/>
+          <Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
+          <Checkbox name='backgroundVideoMute' text={this.language.sections.background.source.mute_video}/>
         </>
       )
     } else {
@@ -53,7 +53,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
   marketplaceType = () => {
     if (localStorage.getItem('photo_packs')) {
-      return <option value='photo_pack'>Marketplace</option>
+      return <option value='photo_pack'>{window.language.modals.main.navbar.marketplace}</option>
     }
   }
 
@@ -120,6 +120,17 @@ export default class BackgroundSettings extends React.PureComponent {
         <Switch name='background' text={this.language.enabled} />
         <Checkbox name='ddgProxy' text={background.ddg_proxy} />
 
+        <h3>{background.source.title}</h3>
+        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
+          {this.marketplaceType()}
+          <option value='api'>{background.type.api}</option>
+          <option value='custom'>{background.type.custom_image}</option>
+          <option value='colour'>{background.type.custom_colour}</option>
+        </Dropdown>
+        <br/>
+
+        {backgroundSettings}
+
         <h3>{background.buttons.title}</h3>
         <Checkbox name='view' text={background.buttons.view} />
         <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
@@ -129,16 +140,6 @@ export default class BackgroundSettings extends React.PureComponent {
         <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
         <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
         <br/><br/>
-  
-        <Dropdown label='Type' name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
-          {this.marketplaceType()}
-          <option value='api'>{background.type.api}</option>
-          <option value='custom'>{background.type.custom_image}</option>
-          <option value='colour'>{background.type.custom_colour}</option>
-        </Dropdown>
-        <br/>
-
-        {backgroundSettings}
       </>
     );
   }

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -21,19 +21,11 @@ export default class ColourSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  resetItem(key) {
-    switch (key) {
-      case 'customBackgroundColour':
-        localStorage.setItem('customBackgroundColour', '');
-        this.setState({
-          gradientSettings: this.DefaultGradientSettings
-        });
-        break;
-
-      default:
-        toast('resetItem requires a key!');
-    }
-
+  resetColour() {
+    localStorage.setItem('customBackgroundColour', '');
+    this.setState({
+      gradientSettings: this.DefaultGradientSettings
+    });
     toast(this.language.toasts.reset);
   }
 
@@ -177,7 +169,7 @@ export default class ColourSettings extends React.PureComponent {
 
     return (
       <>
-        <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.language.buttons.reset}</span></p>
+        <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
         <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
         {colourSettings}
       </>