Fixed color picker and image uploaders in design settings

ghost/admin/app/components/gh-nav-menu/design.hbs

@@ -4,7 +4,7 @@
 <section class="gh-nav-body gh-nav-design">
     <div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
         <div class="gh-nav-list gh-nav-main">
-            <button type="button" {{on "click" (fn this.toggleSection "brand")}}>
+            <button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection "brand")}}>
                 {{svg-jar "paintbrush" class="w4"}}Brand
                 {{!-- <span class="db">{{svg-jar (if (set-has this.openSections "brand") "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
             </button>
@@ -18,7 +18,7 @@
 
             {{#if this.themeSettings}}
                 {{#each this.settingGroups as |group|}}
-                    <button type="button" {{on "click" (fn this.toggleSection group.key)}}>
+                    <button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection group.key)}}>
                         {{svg-jar group.icon class="w4"}} {{group.name}}
                         {{!-- <span class="db">{{svg-jar (if (set-has this.openSections group.key) "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
                     </button>
@@ -37,6 +37,6 @@
     </div>
 
     <div class="gh-nav-bottom">
-        <LinkTo @route="settings.design.change-theme">{{svg-jar "settings"}}Change theme</LinkTo>
+        <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme">{{svg-jar "settings"}}Change theme</LinkTo>
     </div>
 </section>

ghost/admin/app/components/settings/design/general-settings-form.hbs

@@ -84,7 +84,7 @@
         >
         <div class="gh-setting-content">
             <div class="gh-setting-title">Publication icon</div>
-            <div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
+            <div class="gh-setting-desc">A square, social icon, at least 60x60px</div>
             {{#each uploader.errors as |error|}}
                 <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
             {{/each}}
@@ -119,7 +119,7 @@
         >
         <div>
             <div class="gh-setting-title">Publication logo</div>
-            <div class="gh-setting-desc mb3">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
+            <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">
                 {{#each uploader.errors as |error|}}

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

@@ -1410,13 +1410,13 @@ p.theme-validation-details {
     fill: var(--black);
 }
 
-.gh-nav-design .gh-nav-list button,
+.gh-nav-design-tab {
-.gh-nav-design .gh-nav-bottom a {
     display: flex;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
     margin: 0;
+    padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
     color: var(--darkgrey-l1);
     font-weight: 400;
     font-size: 1.45rem;
@@ -1424,8 +1424,8 @@ p.theme-validation-details {
     transition: none;
 }
 
-.gh-nav-design .gh-nav-list button {
+.gh-nav-bottom .gh-nav-design-tab {
-    padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
+    padding: 0;
 }
 
 .gh-nav-design .gh-nav-bottom svg {
@@ -1442,6 +1442,78 @@ p.theme-validation-details {
     padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
 }
 
+.gh-nav-design .gh-stack-item {
+    flex-direction: column;
+}
+
+.gh-nav-design .gh-setting-title {
+    font-size: 1.45rem;
+}
+
+.gh-nav-design .gh-setting-action {
+    align-self: flex-start;
+}
+
+.gh-nav-design .input-color input {
+    position: relative;
+    height: 30px;
+    width: 102px;
+    padding: 3px 4px 3px 44px;
+    font-size: 1.3rem;
+}
+
+.gh-nav-design .input-color::after {
+    top: 5px;
+    left: 34px;
+}
+
+.gh-nav-design .color-box-container {
+    height: 26px;
+    width: 26px;
+    position: absolute;
+    overflow: hidden;
+    top: 2px;
+    left: 2px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+.gh-nav-design .color-box-container .color-picker {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    width: 50px;
+    height: 50px;
+}
+
+.gh-nav-design .gh-setting-action-largeimg-delete,
+.gh-nav-design .gh-setting-action-smallimg-delete {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: rgba(0, 0, 0, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    padding: 5px;
+    margin: 0;
+    border-radius: 3px;
+    opacity: 0;
+}
+
+.gh-nav-design .gh-setting-action-largeimg-delete:hover,
+.gh-nav-design .gh-setting-action-smallimg-delete:hover {
+    background: var(--red);
+    border-color: transparent;
+}
+
+.gh-nav-design .gh-setting-action-largeimg-delete svg,
+.gh-nav-design .gh-setting-action-smallimg-delete svg {
+    margin: 0;
+}
+
 .gh-theme-setting-title {
     margin-bottom: 1rem;
 }