Dropdowns are now standalone class

src/components/modals/settings/Dropdown.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default class Dropdown extends React.PureComponent {
+  getLabel() {
+    return this.props.label ? <label htmlFor={this.props.name}>{this.props.label} </label> : null;
+  }
+
+  render() {
+    return (
+      <>
+        {this.getLabel()}
+        <div className='dropdown' style={{ display: 'inline' }}>
+          <select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
+            {this.props.children}
+          </select>
+        </div>
+      </>
+    );
+  }
+}

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 Dropdown from '../Dropdown';
 import Section from '../Section';
 
 export default class BackgroundSettings extends React.PureComponent {
@@ -160,13 +161,15 @@ export default class BackgroundSettings extends React.PureComponent {
             <Checkbox name='refresh' text={this.props.language.background.refresh} />
           </ul>
           <ul>
-            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
+            <Dropdown
-            <label className='dropdown'>
+              label={this.props.language.background.API}
-              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+              name='backgroundapi'
-                <option className='choices' value='mue'>Mue</option>
+              id='backgroundAPI'
-                <option className='choices' value='unsplash'>Unsplash</option>
+              onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
-              </select>
+            >
-            </label>
+              <option className='choices' value='mue'>Mue</option>
+              <option className='choices' value='unsplash'>Unsplash</option>
+            </Dropdown>
           </ul>
           <ul>
             <p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>

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

@@ -1,18 +1,23 @@
 import React from 'react';
+import Dropdown from '../Dropdown';
 
 export default class LanguageSettings extends React.PureComponent {
   render() {
     return (
-        <div className='section'>
+      <div className='section'>
         <h4 htmlFor='language' className='nodropdown'>{this.props.language.language}</h4>
-          <select className='select-css' name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+        <Dropdown
-            <option className='choices' value='en'>English</option>
+          name='language'
-            <option className='choices' value='nl'>Nederlands</option>
+          id='language'
-            <option className='choices' value='fr'>Français</option>
+          onChange={() => localStorage.setItem('language', document.getElementById('language').value)}
-            <option className='choices' value='no'>Norsk</option>
+        >
-            <option className='choices' value='ru'>Pусский</option>
+          <option className='choices' value='en'>English</option>
-          </select>
+          <option className='choices' value='nl'>Nederlands</option>
-        </div>
+          <option className='choices' value='fr'>Français</option>
+          <option className='choices' value='no'>Norsk</option>
+          <option className='choices' value='ru'>Pусский</option>
+        </Dropdown>
+      </div>
     );
   }
 }

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

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