From b4e1d00633fae454d8b6673a6b0791f3e852540d Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Tue, 23 Mar 2021 12:23:21 +0000
Subject: [PATCH] perf: improve dropdowns

---
 .../modals/main/scss/settings/_dropdown.scss  | 22 +++++++----------
 .../modals/main/settings/Dropdown.jsx         | 10 ++++----
 .../main/settings/sections/Appearance.jsx     | 22 ++++++++---------
 .../main/settings/sections/Background.jsx     |  4 ++--
 .../main/settings/sections/Language.jsx       |  4 ++--
 .../modals/main/settings/sections/Search.jsx  | 14 +++++------
 .../modals/main/settings/sections/Time.jsx    | 24 +++++++++----------
 7 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/src/components/modals/main/scss/settings/_dropdown.scss b/src/components/modals/main/scss/settings/_dropdown.scss
index c2c13bc7..137e1160 100644
--- a/src/components/modals/main/scss/settings/_dropdown.scss
+++ b/src/components/modals/main/scss/settings/_dropdown.scss
@@ -1,17 +1,11 @@
-.dropdown {
-  select {
-    margin-left: 10px;
-    width: 120px;
-    color: var(--modal-text);
-    background: var(--sidebar);
-    border: none;
-    padding: 10px 10px;
-    border-radius: 5px;
-  }
-
-  select#language {
-    float: right;
-  }
+select {
+  margin-left: 10px;
+  width: 120px;
+  color: var(--modal-text);
+  background: var(--sidebar);
+  border: none;
+  padding: 10px 10px;
+  border-radius: 5px;
 }
 
 // firefox dropdown
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index c1fb64fb..96e6a6e8 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/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)}>
-            {this.props.children}
-          </select>
-        </div>
+        <select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
+          {this.props.children}
+        </select>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 06c26fb8..75683336 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/Background.jsx b/src/components/modals/main/settings/sections/Background.jsx
index 4e39033f..86f7e504 100644
--- a/src/components/modals/main/settings/sections/Background.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index 41249d23..8aaeb8b2 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/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>
     </>
   );
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 38d2994d..db09ca51 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/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 className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
-          </Dropdown>
-        </ul>
+        <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>
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 172a83d2..296e6fdb 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/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}