Merge branch 'site-preview' into 'develop'

SoapboxConfig: style improvements

See merge request soapbox-pub/soapbox-fe!287

app/soapbox/features/soapbox_config/index.js

@@ -204,11 +204,16 @@ class SoapboxConfig extends ImmutablePureComponent {
                     value={soapbox.get('brandColor')}
                     onChange={this.handleChange(['brandColor'], (e) => e.hex)}
                   />
+                  <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
                     label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
@@ -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'>

app/styles/forms.scss

@@ -471,19 +471,23 @@ code {
     cursor: pointer;
   }
 
-  .select-wrapper::after {
-    display: block;
-    font-family: 'ForkAwesome';
-    content: '';
-    width: 10px;
+  .select-wrapper {
+    display: flex;
+    align-items: center;
+
+    &::after {
+      display: flex;
+      align-items: center;
+      font-family: "ForkAwesome";
+      content: "";
       position: absolute;
       right: 12px;
-    top: 1px;
       border-left: 1px solid var(--highlight-text-color);
-    height: 39px;
-    padding: 12px;
-    box-sizing: border-box;
+      height: calc(100% - 8px);
+      padding-left: 12px;
       pointer-events: none;
+      margin-top: 8px;
+    }
   }
 
   .label_input {
@@ -704,6 +708,7 @@ code {
   right: 7px;
   cursor: pointer;
   color: $error-red;
+  transform: translateY(9px);
 }
 
 .site-preview {
@@ -735,3 +740,13 @@ code {
     height: 100%;
   }
 }
+
+.input.with_label.toggle .label_input {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+
+  .theme-toggle {
+    margin-left: 10px;
+  }
+}