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)} /> - value)} - settings={settings} - /> +
+
+ + value)} + settings={settings} + /> +
+
+ +
diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 9829ce280..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 { @@ -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; + } +}