cleanup

src/components/modals/settings/Section.jsx

@@ -22,7 +22,7 @@ export default class Section extends React.PureComponent {
   }
 
   render() {
-    let extraHTML, expandMore, slider;
+    let extraHTML, expandMore, slider, noDropdown;
     if (this.props.children) {
         extraHTML = <li className='extraSettings'>{this.props.children}</li>
         expandMore = <ExpandMore
@@ -33,10 +33,11 @@ export default class Section extends React.PureComponent {
     }
 
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;
+    if (this.props.noDropdown) noDropdown = 'nodropdown';
 
     return (
         <div className='section'>
-            <h4 onClick={() => this.toggleSection()}>{this.props.title}</h4>
+            <h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
             {slider}
             <div style={{display: this.state.display}}>

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { toast } from 'react-toastify';
 import Checkbox from '../Checkbox';
+import Section from '../Section';
 
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
@@ -151,44 +152,46 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     return (
-      <div>
-        <ul>
-          <Checkbox name='view' text={this.props.language.background.view} />
-          <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
-          <Checkbox name='refresh' text={this.props.language.background.refresh} />
-        </ul>
-        <ul>
-          <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
-          <label className='dropdown'>
-            <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
-              <option className='choices' value='mue'>Mue</option>
-              <option className='choices' value='unsplash'>Unsplash</option>
-            </select>
-          </label>
-        </ul>
-        <ul>
-          <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
-          <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
-          <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-          <input type='text' id='customBackground'></input>
-        </ul>
-        <ul>
-          <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
-          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
-          <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
-        </ul>
-        <ul>
-          <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
-          <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
-          {colourSettings}
-        </ul>
-      </div>
+      <React.Fragment>
+        <Section title={this.props.language.background.title} name='background'>
+          <ul>
+            <Checkbox name='view' text={this.props.language.background.view} />
+            <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
+            <Checkbox name='refresh' text={this.props.language.background.refresh} />
+          </ul>
+          <ul>
+            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
+            <label className='dropdown'>
+              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+                <option className='choices' value='mue'>Mue</option>
+                <option className='choices' value='unsplash'>Unsplash</option>
+              </select>
+            </label>
+          </ul>
+          <ul>
+            <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' id='blurRange' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+            <input className='range' type='range' min='0' max='100' id='brightnessRange' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <input type='text' id='customBackground'></input>
+          </ul>
+          <ul>
+            <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+            <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
+            <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
+          </ul>
+          <ul>
+            <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
+            {colourSettings}
+          </ul>
+        </Section>
+      </React.Fragment>
     );
   }
 }

src/components/modals/settings/sections/SearchSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import SettingsFunctions from '../../../../modules/settingsFunctions';
 import { toast } from 'react-toastify';
+import Section from '../Section';
 
 const searchEngines = require('../../../../modules/searchEngines.json');
 
@@ -24,21 +25,23 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <div>
-          <ul>
-            <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
-              <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
-                {searchEngines.map((engine) =>
-                  <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
-                )}
-                <option className='choices' value='custom'>Custom</option>
-              </select>
-            </ul>
-            <ul id='searchEngineInput' style={{ display: 'none' }}>
-              <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
-              <input type='text' id='customSearchEngine'></input>
-            </ul>
-        </div>
+        <React.Fragment>
+          <Section title={this.props.language.searchbar.title} name='searchBar'>
+            <ul>
+              <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
+                <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                  {searchEngines.map((engine) =>
+                    <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+                  )}
+                  <option className='choices' value='custom'>Custom</option>
+                </select>
+              </ul>
+              <ul id='searchEngineInput' style={{ display: 'none' }}>
+                <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+                <input type='text' id='customSearchEngine'></input>
+              </ul>
+            </Section>
+        </React.Fragment>
     );
   }
 }

src/components/modals/tabs/Settings.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import SettingsFunctions from '../../../modules/settingsFunctions';
 import Checkbox from '../settings/Checkbox';
-import Slider from '../settings/Slider';
 import Section from '../settings/Section';
 import { toast } from 'react-toastify';
 
@@ -50,6 +49,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='zero' text={this.props.language.time.zero} />
             <Checkbox name='analog' text={this.props.language.time.analog} />
           </Section>
+
           <Section title={this.props.language.greeting.title} name='greeting'>
             <Checkbox name='events' text={this.props.language.greeting.events} />
             <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
@@ -58,31 +58,27 @@ export default class Settings extends React.PureComponent {
               <input type='text' id='greetingName'></input>
             </ul>
           </Section>
+
           <Section title={this.props.language.quote.title} name='quote'>
             <Checkbox name='copyButton' text={this.props.language.quote.copy} />
             <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
             <Checkbox name='favouriteQuoteEnabled' text={this.props.language.experimental.favourite} />
           </Section>
-          <Section title={this.props.language.background.title} name='background'>
-            <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          </Section>
-          <Section title={this.props.language.searchbar.title} name='searchBar'>
-            <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          </Section>
-          <div className='section'>
-            <h4 className='nodropdown'>{this.props.language.offline}</h4>
-            <Slider name='offlineMode'/>
-          </div>
-          <div className='section'>
-            <h4 className='nodropdown'>{this.props.language.experimental.dark}</h4>
-            <Slider name='darkTheme'/>
-          </div>
+
+          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+
+          <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+
+          <Section title={this.props.language.offline} name='offlineMode' noDropdown={true} />
+          <Section title={this.props.language.dark} name='darkTheme' noDropdown={true} />
+
           <Section title={this.props.language.experimental.title} name='experimental' slider={false}>
             <Checkbox name='webp' text={this.props.language.experimental.webp} />
             <Checkbox name='animations' text={this.props.language.experimental.animations} />
             <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
-            <Checkbox name='brightnessTime' text='Automatic Night Mode' newFeature={true} />
+            <Checkbox name='brightnessTime' text={this.props.language.experimental.nightmode} newFeature={true} />
           </Section>
+
           <LanguageSettings language={this.props.language} />
 
           <button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>