perf: improve dropdowns

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

@@ -1,4 +1,3 @@
-.dropdown {
 select {
   margin-left: 10px;
   width: 120px;
@@ -9,11 +8,6 @@
   border-radius: 5px;
 }
 
-  select#language {
-    float: right;
-  }
-}
-
 // firefox dropdown
 @supports (-moz-appearance: none) {
   select {

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

@@ -9,7 +9,7 @@ export default class Dropdown extends React.PureComponent {
   }
 
   getLabel() {
-    return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
+    return this.props.label ? <label>{this.props.label}</label> : null;
   }
 
   onChange(value) {
@@ -28,11 +28,9 @@ export default class Dropdown extends React.PureComponent {
     return (
       <>
         {this.getLabel()}
-        <div className='dropdown' style={{ display: 'inline' }}>
-          <select name={this.props.name} value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
+        <select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
           {this.props.children}
         </select>
-        </div>
       </>
     );
   }

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

@@ -39,20 +39,20 @@ export default function AppearanceSettings() {
       <Checkbox name='fontGoogle' text={appearance.font.google} />
       <Dropdown label='Font Weight' name='fontweight'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-        <option className='choices' value='100'>Thin</option>
-        <option className='choices' value='200'>Extra-Light</option>
-        <option className='choices' value='300'>Light</option>
-        <option className='choices' value='400'>Normal</option>
-        <option className='choices' value='500'>Medium</option>
-        <option className='choices' value='600'>Semi-Bold</option>
-        <option className='choices' value='700'>Bold</option>
-        <option className='choices' value='800'>Extra-Bold</option>
+        <option value='100'>Thin</option>
+        <option value='200'>Extra-Light</option>
+        <option value='300'>Light</option>
+        <option value='400'>Normal</option>
+        <option value='500'>Medium</option>
+        <option value='600'>Semi-Bold</option>
+        <option value='700'>Bold</option>
+        <option value='800'>Extra-Bold</option>
       </Dropdown>
       <br/><br/>
       <Dropdown label='Font Style' name='fontstyle'>
-        <option className='choices' value='normal'>Normal</option>
-        <option className='choices' value='italic'>Italic</option>
-        <option className='choices' value='oblique'>Oblique</option>
+        <option value='normal'>Normal</option>
+        <option value='italic'>Italic</option>
+        <option value='oblique'>Oblique</option>
       </Dropdown>
 
       <h3>{appearance.accessibility.title}</h3>

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

@@ -213,8 +213,8 @@ export default class BackgroundSettings extends React.PureComponent {
 
         <h3>{background.source.title}</h3>
         <Dropdown label={background.source.api} name='backgroundAPI'>
-          <option className='choices' value='mue'>Mue</option>
-          <option className='choices' value='unsplash'>Unsplash</option>
+          <option value='mue'>Mue</option>
+          <option value='unsplash'>Unsplash</option>
         </Dropdown>
         {/* <Text title={background.source.custom_url} name='customBackground' /> */ }
         <ul>

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

@@ -14,8 +14,8 @@ export default function LanguageSettings() {
       <Radio name='language' options={languages} />
       <br/>
       <Dropdown label={language.quote} name='quotelanguage'>
-        <option className='choices' value='English'>English</option>
-        <option className='choices' value='French'>Français</option>
+        <option value='English'>English</option>
+        <option value='French'>Français</option>
       </Dropdown>
     </>
   );

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

@@ -62,14 +62,12 @@ export default class SearchSettings extends React.PureComponent {
         <h2>{search.title}</h2>
         <Switch name='searchBar' text={language.enabled} />
         <Checkbox name='voiceSearch' text={search.voice_search} />
-        <ul>
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) =>
-              <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
+            <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
           )}
-            <option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
+          <option value='custom'>{search.custom.split(' ')[0]}</option>
         </Dropdown>
-        </ul>
         <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>

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

@@ -71,16 +71,16 @@ export default class TimeSettings extends React.PureComponent {
       <>
         <br/>
         <Dropdown label={time.date.short_format} name='dateFormat'>
-          <option className='choices' value='DMY'>DMY</option>
-          <option className='choices' value='MDY'>MDY</option>
-          <option className='choices' value='YMD'>YMD</option>
+          <option value='DMY'>DMY</option>
+          <option value='MDY'>MDY</option>
+          <option value='YMD'>YMD</option>
         </Dropdown>
         <br/><br/>
         <Dropdown label={time.date.short_separator.title} name='shortFormat'>
-          <option className='choices' value='dots'>{time.date.short_separator.dots}</option>
-          <option className='choices' value='dash'>{time.date.short_separator.dash}</option>
-          <option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
-          <option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
+          <option value='dots'>{time.date.short_separator.dots}</option>
+          <option value='dash'>{time.date.short_separator.dash}</option>
+          <option value='gaps'>{time.date.short_separator.gaps}</option>
+          <option value='slashes'>{time.date.short_separator.slashes}</option>
        </Dropdown>
       </>
     );
@@ -95,17 +95,17 @@ export default class TimeSettings extends React.PureComponent {
         <h2>{time.title}</h2>
         <Switch name='time' text={this.language.enabled} />
         <Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
-          <option className='choices' value='digital'>{time.digital.title}</option>
-          <option className='choices' value='analogue'>{time.analogue.title}</option>
-          <option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
+          <option  value='digital'>{time.digital.title}</option>
+          <option  value='analogue'>{time.analogue.title}</option>
+          <option  value='percentageComplete'>{time.percentage_complete}</option>
         </Dropdown>
         {timeSettings}
 
         <h3>{time.date.title}</h3>
         <Switch name='date' text={this.language.enabled} />
         <Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
-          <option className='choices' value='long'>Long</option>
-          <option className='choices' value='short'>Short</option>
+          <option  value='long'>Long</option>
+          <option  value='short'>Short</option>
         </Dropdown>
         <br/>
         {dateSettings}