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] 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;
+  }
+}