From 7534dbc7a6cb33ae74644bd9f2d32195535c2503 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 19 Oct 2021 16:26:27 +0200
Subject: [PATCH] Updated general and custom theme settings design

---
 .../custom-theme-settings/boolean.hbs         |  6 +--
 .../custom-theme-settings/color.hbs           |  8 ++--
 .../custom-theme-settings/image.hbs           | 46 ++++++++++---------
 .../custom-theme-settings/select.hbs          |  2 +-
 .../components/custom-theme-settings/text.hbs |  2 +-
 ghost/admin/app/components/gh-nav-menu.hbs    |  2 +-
 .../settings/design/general-settings-form.hbs |  4 +-
 ghost/admin/app/styles/layouts/settings.css   | 21 ++++++++-
 8 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/ghost/admin/app/components/custom-theme-settings/boolean.hbs b/ghost/admin/app/components/custom-theme-settings/boolean.hbs
index 4fdc58abb7..f8b26f69aa 100644
--- a/ghost/admin/app/components/custom-theme-settings/boolean.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/boolean.hbs
@@ -1,10 +1,10 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
     <div class="flex-grow-1">
         <div class="flex justify-between items-center relative">
-            <span class="gh-setting-title gh-theme-setting-title" for={{this.checkboxId}}>
+            <span class="gh-setting-title" for={{this.checkboxId}}>
                 {{humanize-setting-key @setting.key}}
             </span>
-            <div class="for-switch small">
+            <div class="for-switch x-small">
                 <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>
diff --git a/ghost/admin/app/components/custom-theme-settings/color.hbs b/ghost/admin/app/components/custom-theme-settings/color.hbs
index 0a0bcb280b..ddc4f845b9 100644
--- a/ghost/admin/app/components/custom-theme-settings/color.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/color.hbs
@@ -1,11 +1,11 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
-    <div class="flex-grow-1">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
+    <div class="flex flex-grow-1 justify-between">
         <div class="flex justify-between items-center relative">
-            <span class="gh-setting-title gh-theme-setting-title" for={{this.inputId}}>
+            <span class="gh-setting-title" for={{this.inputId}}>
                 {{humanize-setting-key @setting.key}}
             </span>
         </div>
-        <div class="form-group">
+        <div>
             <div class="input-color">
                 <input
                     type="text"
diff --git a/ghost/admin/app/components/custom-theme-settings/image.hbs b/ghost/admin/app/components/custom-theme-settings/image.hbs
index c08201001d..71bd3ae357 100644
--- a/ghost/admin/app/components/custom-theme-settings/image.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/image.hbs
@@ -1,32 +1,34 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
     <GhUploader
         @extensions={{this.imageExtensions}}
         @onComplete={{this.imageUploaded}}
         as |uploader|
     >
-        <div class="gh-setting-content">
-            <div class="gh-setting-title">{{humanize-setting-key @setting.key}}</div>
-            {{#each uploader.errors as |error|}}
-                <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
-            {{/each}}
-        </div>
-        <div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
-            {{#if uploader.isUploading}}
-                {{uploader.progressBar}}
-            {{else if @setting.value}}
-                <div class="gh-branding-image-container largeimg justify-start">
-                    <img class="blog-cover" src={{@setting.value}} {{on "click" uploader.triggerFileDialog}}>
-                    <button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.updateValue null)}} data-test-delete-image="icon">
-                        {{svg-jar "trash" class="w4 h4 fill-white"}}
+        <div class="{{if @setting.value "" "flex items-center justify-between"}}">
+            <div class="gh-setting-content">
+                <div class="gh-setting-title {{if @setting.value "gh-theme-setting-title"}}">{{humanize-setting-key @setting.key}}</div>
+                {{#each uploader.errors as |error|}}
+                    <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
+                {{/each}}
+            </div>
+            <div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
+                {{#if uploader.isUploading}}
+                    {{uploader.progressBar}}
+                {{else if @setting.value}}
+                    <div class="gh-branding-image-container largeimg justify-start">
+                        <img class="blog-cover" src={{@setting.value}} {{on "click" uploader.triggerFileDialog}}>
+                        <button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.updateValue null)}} data-test-delete-image="icon">
+                            {{svg-jar "trash" class="w4 h4 fill-white"}}
+                        </button>
+                    </div>
+                {{else}}
+                    <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
+                        <span>Upload</span>
                     </button>
+                {{/if}}
+                <div style="display:none">
+                    <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{uploader.registerFileInput}} data-test-file-input="icon" />
                 </div>
-            {{else}}
-                <button type="button" class="gh-btn self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="icon">
-                    <span>Upload image</span>
-                </button>
-            {{/if}}
-            <div style="display:none">
-                <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{uploader.registerFileInput}} data-test-file-input="icon" />
             </div>
         </div>
     </GhUploader>
diff --git a/ghost/admin/app/components/custom-theme-settings/select.hbs b/ghost/admin/app/components/custom-theme-settings/select.hbs
index 1cd47d4a19..4d2807bfae 100644
--- a/ghost/admin/app/components/custom-theme-settings/select.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/select.hbs
@@ -1,4 +1,4 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
     <div class="flex-grow-1">
         <label class="gh-setting-title gh-theme-setting-title" for={{this.selectId}}>
             {{humanize-setting-key @setting.key}}
diff --git a/ghost/admin/app/components/custom-theme-settings/text.hbs b/ghost/admin/app/components/custom-theme-settings/text.hbs
index 97f2a291b0..ca8d0d1507 100644
--- a/ghost/admin/app/components/custom-theme-settings/text.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/text.hbs
@@ -1,4 +1,4 @@
-<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first"}}">
+<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
     <div class="flex-grow-1">
         <label class="gh-setting-title gh-theme-setting-title" for={{this.inputId}}>
             {{humanize-setting-key @setting.key}}
diff --git a/ghost/admin/app/components/gh-nav-menu.hbs b/ghost/admin/app/components/gh-nav-menu.hbs
index 1f454050d8..e3ed74b09d 100644
--- a/ghost/admin/app/components/gh-nav-menu.hbs
+++ b/ghost/admin/app/components/gh-nav-menu.hbs
@@ -1,4 +1,4 @@
-<nav class="gh-nav" ...attributes>
+<nav class="gh-nav {{if this.ui.contextualNavMenu "gh-nav-contextual"}}" ...attributes>
     {{#if this.ui.contextualNavMenu}}
         {{component (concat "gh-nav-menu/" ui.contextualNavMenu)}}
     {{else}}
diff --git a/ghost/admin/app/components/settings/design/general-settings-form.hbs b/ghost/admin/app/components/settings/design/general-settings-form.hbs
index 6bbd11e9da..50a6de0a24 100644
--- a/ghost/admin/app/components/settings/design/general-settings-form.hbs
+++ b/ghost/admin/app/components/settings/design/general-settings-form.hbs
@@ -90,7 +90,7 @@
                     </button>
                 </div>
             {{else}}
-                <button type="button" class="gh-btn self-center" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
+                <button type="button" class="gh-btn gh-btn-white self-center" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
                     <span>Upload icon</span>
                 </button>
             {{/if}}
@@ -125,7 +125,7 @@
                         </button>
                     </div>
                 {{else}}
-                    <button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
+                    <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
                         <span>Upload logo</span>
                     </button>
                 {{/if}}
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 53890faed6..ac4d9ab087 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -170,7 +170,7 @@
 }
 
 .gh-setting-first .description-container-labs {
-    margin-bottom: 12px;
+    margin-bottom: 0;
 }
 
 .gh-setting-last {
@@ -1371,6 +1371,11 @@ p.theme-validation-details {
 
 /* Design (Labs)
 /* ---------------------------------------------------- */
+
+.gh-nav-contextual {
+    flex: 0 0 400px;
+}
+
 .gh-nav-header {
     height: 100px;
     padding: 32px 32px 16px;
@@ -1504,13 +1509,19 @@ p.theme-validation-details {
 }
 
 .gh-nav-design-settings {
-    padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
+    padding: 32px var(--mainmenu-padding) 16px calc(var(--mainmenu-padding) + 7px);
+    background: var(--mainmenu-color-hover-bg);
+    border-radius: var(--border-radius);
 }
 
 .gh-nav-design .gh-stack-item {
     flex-direction: column;
 }
 
+.gh-nav-design .gh-setting {
+    padding: 12px 0;
+}
+
 .gh-nav-design .gh-setting-title {
     font-size: 1.45rem;
     font-weight: 500;
@@ -1580,6 +1591,12 @@ p.theme-validation-details {
     margin: 0;
 }
 
+.gh-nav-design .for-switch label {
+    width: 34px !important;
+    height: 22px !important;
+    margin: 0;
+}
+
 .gh-theme-setting-title {
     margin-bottom: 1rem;
 }