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,10 +204,15 @@ class SoapboxConfig extends ImmutablePureComponent {
                     value={soapbox.get('brandColor')}
                     onChange={this.handleChange(['brandColor'], (e) => e.hex)}
                   />
-                  <ThemeToggle
+                  <div className='input with_label toggle'>
-                    onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
+                    <div className='label_input'>
-                    settings={settings}
+                      <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'>

app/styles/forms.scss

@@ -471,19 +471,23 @@ code {
     cursor: pointer;
   }
 
-  .select-wrapper::after {
+  .select-wrapper {
-    display: block;
+    display: flex;
-    font-family: 'ForkAwesome';
+    align-items: center;
-    content: '';
+
-    width: 10px;
+    &::after {
-    position: absolute;
+      display: flex;
-    right: 12px;
+      align-items: center;
-    top: 1px;
+      font-family: "ForkAwesome";
-    border-left: 1px solid var(--highlight-text-color);
+      content: "";
-    height: 39px;
+      position: absolute;
-    padding: 12px;
+      right: 12px;
-    box-sizing: border-box;
+      border-left: 1px solid var(--highlight-text-color);
-    pointer-events: none;
+      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;
+  }
+}