From d65eedb67b4cca7d78420f808ca509777e2071c4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Oct 2020 20:53:11 -0500
Subject: [PATCH 1/2] SoapboxConfig: style improvements

---
 app/soapbox/features/soapbox_config/index.js | 15 +++++++++++----
 app/styles/forms.scss                        | 11 +++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 50ba5257d..bb81deb33 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -204,10 +204,15 @@ class SoapboxConfig extends ImmutablePureComponent {
                     value={soapbox.get('brandColor')}
                     onChange={this.handleChange(['brandColor'], (e) => e.hex)}
                   />
-                  <ThemeToggle
-                    onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
-                    settings={settings}
-                  />
+                  <div className='input with_label toggle'>
+                    <div className='label_input'>
+                      <label>Default theme</label>
+                      <ThemeToggle
+                        onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
+                        settings={settings}
+                      />
+                    </div>
+                  </div>
                 </div>
                 <div className='fields-row__column fields-group fields-row__column-6'>
                   <FileChooserLogo
@@ -269,6 +274,8 @@ class SoapboxConfig extends ImmutablePureComponent {
                   </div>
                 </div>
               </div>
+            </FieldsGroup>
+            <FieldsGroup>
               <div className='input with_block_label'>
                 <label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
                 <span className='hint'>
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 9829ce280..85cccb476 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -704,6 +704,7 @@ code {
   right: 7px;
   cursor: pointer;
   color: $error-red;
+  transform: translateY(9px);
 }
 
 .site-preview {
@@ -735,3 +736,13 @@ code {
     height: 100%;
   }
 }
+
+.input.with_label.toggle .label_input {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+
+  .theme-toggle {
+    margin-left: 10px;
+  }
+}

From 5d5ca6ed8595b234479830e15d0fe21f6d9cba69 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Oct 2020 21:04:00 -0500
Subject: [PATCH 2/2] Forms: improve select arrow CSS

---
 app/styles/forms.scss | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 85cccb476..aef92b3d2 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -471,19 +471,23 @@ code {
     cursor: pointer;
   }
 
-  .select-wrapper::after {
-    display: block;
-    font-family: 'ForkAwesome';
-    content: '';
-    width: 10px;
-    position: absolute;
-    right: 12px;
-    top: 1px;
-    border-left: 1px solid var(--highlight-text-color);
-    height: 39px;
-    padding: 12px;
-    box-sizing: border-box;
-    pointer-events: none;
+  .select-wrapper {
+    display: flex;
+    align-items: center;
+
+    &::after {
+      display: flex;
+      align-items: center;
+      font-family: "ForkAwesome";
+      content: "";
+      position: absolute;
+      right: 12px;
+      border-left: 1px solid var(--highlight-text-color);
+      height: calc(100% - 8px);
+      padding-left: 12px;
+      pointer-events: none;
+      margin-top: 8px;
+    }
   }
 
   .label_input {