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}
       </>

src/components/widgets/Widgets.jsx

@@ -22,20 +22,7 @@ export default class Widgets extends React.PureComponent {
   }
 
   enabled(key) {
-    const stringValue = localStorage.getItem(key);
-    let enabled = true;
-
-    if (stringValue !== null) {
-      if (stringValue === 'true') {
-        enabled = true;
-      }
-
-      if (stringValue === 'false') {
-        enabled = false;
-      }
-    }
-
-    return enabled;
+    return (localStorage.getItem(key) === 'true');
   }
 
   componentDidMount() {

src/components/widgets/background/Background.jsx

@@ -226,12 +226,12 @@ export default class Background extends React.PureComponent {
 
   render() {
     if (this.state.video === true) {
-      const checkValue = (setting) => {
+      const enabled = (setting) => {
         return (localStorage.getItem(setting) === 'true');
       };
 
       return (
-        <video autoPlay muted={checkValue('backgroundVideoMute')} loop={checkValue('backgroundVideoLoop')} id='backgroundVideo'>
+        <video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} id='backgroundVideo'>
           <source src={this.state.url}/>
         </video>
       );

src/components/widgets/time/Clock.jsx

@@ -91,7 +91,7 @@ export default class Clock extends React.PureComponent {
   render() {
     let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
 
-    const checkValue = (setting) => {
+    const enabled = (setting) => {
       return (localStorage.getItem(setting) === 'true');
     };
 
@@ -100,11 +100,11 @@ export default class Clock extends React.PureComponent {
         <Analog 
           className='analogclock' 
           value={this.state.time} 
-          renderHourMarks={checkValue('hourMarks')} 
-          renderMinuteMarks={checkValue('minuteMarks')} 
-          renderSecondHand={checkValue('secondHand')} 
-          renderMinuteHand={checkValue('minuteHand')} 
-          renderHourHand={checkValue('hourHand')} 
+          renderHourMarks={enabled('hourMarks')} 
+          renderMinuteMarks={enabled('minuteMarks')} 
+          renderSecondHand={enabled('secondHand')} 
+          renderMinuteHand={enabled('minuteHand')} 
+          renderHourHand={enabled('hourHand')} 
         />
       );
     }

src/components/widgets/weather/Weather.jsx

@@ -68,7 +68,7 @@ export default class Weather extends React.PureComponent {
   }
 
   render() {
-    const checkValue = (setting) => {
+    const enabled = (setting) => {
       return (localStorage.getItem(setting) === 'true');
     };
 
@@ -92,12 +92,11 @@ export default class Weather extends React.PureComponent {
         <WeatherIcon name={this.state.icon}/>
         <span>{this.state.weather.temp + this.state.temp_text}</span>
         <span className='minmax'>{minmax()}</span>
-        {checkValue('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
-        {checkValue('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span> : null}
-        {checkValue('atmosphericpressure') ? <span className='loc'><br/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
+        {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
+        {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span> : null}
+        {enabled('atmosphericpressure') ? <span className='loc'><br/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
         <span className='loc'>{this.state.location}</span>
-        {/*<span>{this.state.weather.title}</span>*/}
       </div>
     );
   }

src/translations/en_GB.json

@@ -132,18 +132,22 @@
               "brightness": "Adjust Brightness"
             },
             "type": {
+              "title": "Type",
               "api": "API",
               "custom_image": "Custom Image",
               "custom_colour": "Custom Colour/Gradient"
             },
             "source": {
+              "title": "Source",
               "api": "Background API",
               "custom_url": "Custom Background URL",
               "custom_background": "Custom Background",
               "custom_colour": "Custom Background Colour",
               "upload": "Upload",
               "add_colour": "Add colour",
-              "disabled": "Disabled"
+              "disabled": "Disabled",
+              "loop_video": "Loop Video",
+              "mute_video": "Mute Video"
             }
           },
           "search": {