Custom theme settings improvements (#18101)

no issues

- removed (default) label from the custom theme settings
- the label was redundant especially when multiple select settings are next to each other
- instead, the default value should always be the first option in the select fields
- more consistent spacing between settings with/without description
- less spacing between boolean settings

ghost/admin/app/components/custom-theme-settings/boolean.hbs

@@ -1,18 +1,20 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}} gh-setting-boolean">
     <div class="flex-grow-1">
-        <div class="flex justify-between items-center relative">
-            <span class="gh-setting-title mb0" for={{this.checkboxId}}>
-                {{humanize-setting-key @setting.key}}
-            </span>
-            <div class="for-switch x-small">
+        <div class="flex justify-between items-start relative">
+            <div class="flex flex-column mr5">
+                <span class="gh-setting-title {{if @setting.description '' 'mb0'}}" for={{this.checkboxId}}>
+                    {{humanize-setting-key @setting.key}}
+                </span>
+                {{#if @setting.description}}
+                    <div class="gh-setting-desc">{{truncate @setting.description 100}}</div>
+                {{/if}}
+            </div>
+            <div class="for-switch x-small" style={{html-safe (concat "margin-top: " (unless @setting.description '-6px' '0') ";")}}>
                 <label for={{this.checkboxId}} class="switch">
                     <input type="checkbox" class="gh-input" id={{this.checkboxId}} checked={{@setting.value}} {{on "input" this.toggleValue}}>
                     <span class="input-toggle-component mt1"></span>
                 </label>
             </div>
         </div>
-        {{#if @setting.description}}
-            <div class="gh-setting-desc" style="margin-top: 1px">{{truncate @setting.description 100}}</div>
-        {{/if}}
     </div>
 </div>

ghost/admin/app/components/custom-theme-settings/select.hbs

@@ -8,7 +8,6 @@
                 {{#each @setting.options as |settingOption|}}
                     <option value={{settingOption}} selected={{eq settingOption @setting.value}}>
                         {{settingOption}}
-                        {{#if (eq settingOption @setting.default)}}(default){{/if}}
                     </option>
                 {{/each}}
             </select>

ghost/admin/app/components/settings/form-fields/publication-logo.hbs

@@ -8,7 +8,7 @@
             <label class="gh-setting-title" for="publication-logo">Publication logo</label>
             <div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
 
-            <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
+            <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column" style="margin-top: 12px;">
                 {{#each uploader.errors as |error|}}
                     <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
                 {{/each}}

ghost/admin/app/styles/layouts/settings.css

@@ -217,7 +217,7 @@
     letter-spacing: 0.3px;
     font-size: 1.3rem;
     font-weight: 400;
-    margin: 8px 0 12px;
+    margin: 8px 0 0;
 }
 
 .gh-setting-desc.mb0 {
@@ -225,7 +225,7 @@
 }
 
 .gh-setting-title + .gh-setting-desc {
-    margin-top: -4px;
+    margin-top: -6px;
 }
 
 .gh-setting-error {
@@ -2000,11 +2000,15 @@ p.theme-validation-details {
 }
 
 .gh-nav-design .gh-setting {
-    padding: 12px 0;
+    padding: 16px 0;
 }
 
 .gh-nav-design .gh-setting-first {
-    padding-bottom: 12px;
+    padding-bottom: 16px;
+}
+
+.gh-nav-design .gh-setting-boolean + .gh-setting-boolean {
+    padding-top: 8px;
 }
 
 .gh-nav-design .gh-setting-title {