From c9c62007dbd6d29e00a2a4be8ab39403a6e202a2 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 10 Feb 2021 11:54:27 +0100
Subject: [PATCH] Updated code injection styles

---
 ghost/admin/app/styles/layouts/apps.css       |  4 ---
 ghost/admin/app/styles/layouts/main.css       | 29 ++++++++++---------
 ghost/admin/app/styles/layouts/settings.css   |  4 +--
 ghost/admin/app/styles/patterns/boxes.css     | 14 +++------
 .../app/templates/integrations/zapier.hbs     |  2 +-
 .../settings/code-injection-loading.hbs       |  6 ++--
 .../app/templates/settings/code-injection.hbs | 14 +++++----
 7 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css
index d511aa088d..25e51b12bb 100644
--- a/ghost/admin/app/styles/layouts/apps.css
+++ b/ghost/admin/app/styles/layouts/apps.css
@@ -412,10 +412,6 @@
     color: #f04600;
 }
 
-.gh-settings-zapier-templates {
-    margin-top: -25px;
-}
-
 .gh-settings-zapier-templates .apps-card-app-title {
     margin-left: 8px;
     white-space: unset;
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index f12d839063..ac2ed4622c 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -960,7 +960,7 @@
 .gh-main-section.bb { border-bottom: 1px solid var(--whitegrey); }
 
 .gh-main-section-header {
-    font-size: 1.9rem;
+    font-size: 1.7rem;
     font-weight: 600;
     text-transform: none;
     letter-spacing: unset;
@@ -982,26 +982,27 @@
     border: none;
 }
 
-.gh-main-section .header-description,
-.gh-main-section-block .header-description {
-    font-size: 1.2rem;
-    font-weight: 400;
+.gh-main-section-description {
     color: var(--middarkgrey);
     border-bottom: 1px solid var(--whitegrey);
     padding: 0 0 8px;
-    margin: 0;
-}
-
-.gh-main-section-header + .description {
-    margin-top: -10px;
-}
-
-.gh-main-section-header.large + .description {
     font-size: 1.3rem;
-    margin-top: -8px;
+    margin: 0;
+    font-weight: 400;
+}
+
+.gh-main-section-description.bn { border-bottom: none; }
+
+.gh-main-section-header + .gh-main-section-description {
+    margin-top: -6px;
     padding-bottom: 12px;
 }
 
+.gh-main-section-header.small + .gh-main-section-description {
+    font-size: 1.2rem;
+    margin-top: -10px;
+}
+
 .gh-main-section.columns-2 {
     grid-template-columns: 1fr 1fr;
 }
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 9c7b716fb5..356b9334aa 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -701,7 +701,7 @@
     padding: 0;
     min-width: 250px;
     min-height: 300px;
-    max-width: 1130px;
+    max-width: 1224px;
     width: calc(100vw - 360px);
     height: auto;
     line-height: 22px;
@@ -1078,7 +1078,7 @@ p.theme-validation-details {
     justify-content: space-between;
     border-bottom: 1px solid var(--whitegrey);
     margin: -20px -24px;
-    padding: 20px 24px;
+    padding: 16px 24px;
 }
 
 .gh-branding-settings-header h4 {
diff --git a/ghost/admin/app/styles/patterns/boxes.css b/ghost/admin/app/styles/patterns/boxes.css
index fea334dbeb..e7128f6f69 100644
--- a/ghost/admin/app/styles/patterns/boxes.css
+++ b/ghost/admin/app/styles/patterns/boxes.css
@@ -5,18 +5,16 @@
     position: relative;
     padding: 12px 10px 14px 40px;
     border: 1px solid transparent;
-    border-left-width: 5px;
-    color: var(--midgrey);
+    color: var(--black);
     line-height: 1.55em;
     letter-spacing: 0.2px;
-    background: #fff;
+    background: color-mod(var(--blue) a(5%));
     border-radius: 5px;
-    border-color: var(--whitegrey);
-    box-shadow: 0 6px 10px -8px rgba(0,0,0,.15)
+    border-color: color-mod(var(--blue) a(30%));
 }
 
 .gh-box a {
-    color: var(--middarkgrey);
+    color: var(--black);
     text-decoration: underline;
 }
 
@@ -26,10 +24,6 @@
     width: auto;
 }
 
-.gh-box-tip {
-    border-left-color: var(--blue);
-}
-
 .gh-box-tip svg:first-of-type {
     top: 12px;
     height: 2rem;
diff --git a/ghost/admin/app/templates/integrations/zapier.hbs b/ghost/admin/app/templates/integrations/zapier.hbs
index 063c38fd55..bf8561c408 100644
--- a/ghost/admin/app/templates/integrations/zapier.hbs
+++ b/ghost/admin/app/templates/integrations/zapier.hbs
@@ -71,7 +71,7 @@
 
         <section id="zapier-toggle" class="gh-main-section">
             <h4 class="gh-main-section-header large bn">Zapier templates</h4>
-            <p class="header-description">Explore pre-built templates for common automation tasks</p>
+            <p class="gh-main-section-description">Explore pre-built templates for common automation tasks</p>
             <div class="gh-setting-content gh-setting-content--no-action">
                 <div class="gh-setting-content-extended">                    
                     <div class="apps-grid gh-settings-zapier-templates">
diff --git a/ghost/admin/app/templates/settings/code-injection-loading.hbs b/ghost/admin/app/templates/settings/code-injection-loading.hbs
index a2f048b296..df3b559ebc 100644
--- a/ghost/admin/app/templates/settings/code-injection-loading.hbs
+++ b/ghost/admin/app/templates/settings/code-injection-loading.hbs
@@ -1,14 +1,14 @@
 <section class="gh-canvas">
-    <header class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
             <LinkTo @route="settings">Settings</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             Code injection
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{save}} @class="gh-btn gh-btn-blue gh-btn-icon" @disabled={{true}} data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
-    </header>
+    </GhCanvasHeader>
 
     <section class="gh-content">
         <GhLoadingSpinner />
diff --git a/ghost/admin/app/templates/settings/code-injection.hbs b/ghost/admin/app/templates/settings/code-injection.hbs
index f7fe5aa8f3..59f87a31d6 100644
--- a/ghost/admin/app/templates/settings/code-injection.hbs
+++ b/ghost/admin/app/templates/settings/code-injection.hbs
@@ -6,7 +6,7 @@
             Code injection
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
@@ -25,16 +25,18 @@
                     Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags.
                 </p>
 
-                <div class="br3 shadow-1 bg-grouped-table pa5 pt3 pb1">
+                <div class="gh-main-section">
+                    <label for="ghost-head" class="gh-main-section-header bn">Site Header</label>
+                    <p class="gh-main-section-description bn">Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of the site</p>
                     <div class="form-group settings-code">
-                        <label for="ghost-head">Site Header</label>
-                        <p>Code here will be injected into the <code>\{{ghost_head}}</code> tag on every page of the site</p>
                         <GhCmEditor @value={{this.settings.codeinjectionHead}} @id="ghost-head" @class="gh-input settings-code-editor" @name="codeInjection[ghost_head]" @type="text" @update={{action (mut this.settings.codeinjectionHead)}} />
                     </div>
+                </div>
 
+                <div class="gh-main-section">
+                    <label for="ghost-foot" class="gh-main-section-header bn">Site Footer</label>
+                    <p class="gh-main-section-description bn">Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of the site</p>
                     <div class="form-group settings-code">
-                        <label for="ghost-foot">Site Footer</label>
-                        <p>Code here will be injected into the <code>\{{ghost_foot}}</code> tag on every page of the site</p>
                         <GhCmEditor @value={{this.settings.codeinjectionFoot}} @id="ghost-foot" @class="gh-input settings-code-editor" @name="codeInjection[ghost_foot]" @type="text" @update={{action (mut this.settings.codeinjectionFoot)}} />
                     </div>
                 </div>