From 4ae84d5e1ade815cb88679f064e946559d7cd0fc Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 24 Jan 2017 14:25:21 -0800
Subject: [PATCH] Styled <select>

---
 app/ui/components/settings/SettingsGeneral.js | 41 ++++++++++---------
 app/ui/css/components/forms.less              | 12 ++++--
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/app/ui/components/settings/SettingsGeneral.js b/app/ui/components/settings/SettingsGeneral.js
index 6f3715d96..f8e8fe2cc 100644
--- a/app/ui/components/settings/SettingsGeneral.js
+++ b/app/ui/components/settings/SettingsGeneral.js
@@ -50,26 +50,29 @@ const SettingsGeneral = ({settings, updateSetting}) => (
       </label>
     </div>
 
-    <div className="form-control form-control--outlined pad-top-sm">
-      <label>Text Editor Font Size (px)
-        <input type="number"
-               min={8}
-               max={20}
-               defaultValue={settings.editorFontSize}
-               onChange={e => updateSetting('editorFontSize', parseInt(e.target.value, 10))}/>
-      </label>
-    </div>
+    <div className="form-row">
+      <div className="form-control form-control--outlined pad-top-sm">
+        <label>Text Editor Font Size (px)
+          <input type="number"
+                 min={8}
+                 max={20}
+                 defaultValue={settings.editorFontSize}
+                 onChange={e => updateSetting('editorFontSize', parseInt(e.target.value, 10))}/>
+        </label>
+      </div>
 
-    <div className="form-control form-control--outlined pad-top-sm">
-      <label>Text Editor Key Map
-        <select defaultValue={settings.editorKeyMap}
-                onChange={e => updateSetting('editorKeyMap', e.target.value)}>
-          <option value="default">Default</option>
-          <option value="vim">Vim</option>
-          <option value="emacs">Emacs</option>
-          <option value="sublime">Sublime</option>
-        </select>
-      </label>
+      <div className="form-control form-control--outlined pad-top-sm">
+        <label>
+          Text Editor Key Map
+          <select defaultValue={settings.editorKeyMap}
+                  onChange={e => updateSetting('editorKeyMap', e.target.value)}>
+            <option value="default">Default</option>
+            <option value="vim">Vim</option>
+            <option value="emacs">Emacs</option>
+            <option value="sublime">Sublime</option>
+          </select>
+        </label>
+      </div>
     </div>
 
     <div className="form-control form-control--outlined">
diff --git a/app/ui/css/components/forms.less b/app/ui/css/components/forms.less
index 60cbe84ab..e92b5a7b2 100644
--- a/app/ui/css/components/forms.less
+++ b/app/ui/css/components/forms.less
@@ -10,6 +10,7 @@
 
   input,
   textarea,
+  select,
   button {
     width: 100%;
     height: 100%;
@@ -57,14 +58,17 @@
   &.form-control--outlined,
   &.form-control--underlined {
     textarea,
-    input {
+    input,
+    select {
+      height: @line-height-xs;
       border: 1px solid @hl-md;
-      padding: @padding-sm;
+      padding: 0 @padding-sm;
       border-radius: @radius-md;
       background-color: @hl-xxs;
     }
 
     textarea:focus,
+    select:focus,
     input:focus {
       background-color: transparent;
       border-color: @hl-lg;
@@ -78,6 +82,7 @@
 
   &.form-control--padded {
     textarea,
+    select,
     input {
       border: 0;
     }
@@ -85,6 +90,7 @@
 
   &.form-control--underlined {
     textarea,
+    select,
     input {
       border-radius: 0;
       border-top: 0;
@@ -181,7 +187,7 @@
   }
 }
 
-textarea, input, button {
+textarea, input, button, select {
   box-sizing: border-box;
   text-align: left;
   font-size: inherit;