From af6739af720ff2b59eeee793bc1ea6df06e572dd Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 8 Feb 2021 19:54:16 +0100
Subject: [PATCH] Updated built-in integrations

---
 ghost/admin/app/styles/layouts/main.css       |  20 ++-
 ghost/admin/app/styles/layouts/settings.css   |   3 +-
 ghost/admin/app/styles/patterns/buttons.css   |   2 +-
 ghost/admin/app/styles/patterns/forms.css     |   2 +-
 ghost/admin/app/templates/integrations.hbs    |   4 +-
 .../admin/app/templates/integrations/amp.hbs  | 100 +++++++-------
 .../templates/integrations/firstpromoter.hbs  | 100 +++++++-------
 .../app/templates/integrations/slack.hbs      | 126 +++++++++---------
 .../app/templates/integrations/unsplash.hbs   |  64 ++++-----
 9 files changed, 221 insertions(+), 200 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index a0f4d1dbba..743a1868df 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -967,10 +967,13 @@
     grid-column-gap: 3vw;
 }
 
-.gh-main-section.no-heading {
+.gh-main-section.no-heading,
+.gh-main-section.bt {
     border-top: 1px solid var(--whitegrey);
 }
 
+.gh-main-section.bb { border-bottom: 1px solid var(--whitegrey); }
+
 .gh-main-section .heading,
 .gh-main-section-block .heading {
     font-size: 1.7rem;
@@ -981,17 +984,26 @@
     margin: 0;
 }
 
+.gh-main-section .heading.list,
+.gh-main-section .heading {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.2px;
+    font-weight: 500;
+    padding: 12px 0;
+}
+
 .gh-main-section .heading.bn {
     border: none;
 }
 
 .gh-main-section .description,
 .gh-main-section-block .description {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-weight: 400;
-    color: var(--darkgrey);
+    color: var(--middarkgrey);
     border-bottom: 1px solid var(--whitegrey);
-    padding: 2px 0 8px;
+    padding: 0 0 8px;
     margin: 0;
 }
 
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index a46c34e82f..5fe09d1ad7 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -202,10 +202,11 @@
 }
 
 .gh-setting-desc {
-    line-height: 1.3em;
+    line-height: 1.4em;
     color: var(--middarkgrey);
     letter-spacing: 0.3px;
     font-size: 1.3rem;
+    font-weight: 400;
 }
 
 .gh-setting-error {
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index c191cef4ae..4aa7b33fcb 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -65,7 +65,7 @@
 .gh-btn.disabled,
 .gh-btn[disabled],
 fieldset[disabled] .gh-btn {
-    opacity: 0.8;
+    opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
 }
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index acd94e9d86..4fc7253f1f 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -69,7 +69,7 @@ input {
     margin: 4px 0 0 0;
     color: var(--middarkgrey);
     font-size: 1.3rem;
-    font-weight: 300;
+    font-weight: 400;
 }
 
 .form-group p.green {
diff --git a/ghost/admin/app/templates/integrations.hbs b/ghost/admin/app/templates/integrations.hbs
index bffe1ebc82..104f7d55e7 100644
--- a/ghost/admin/app/templates/integrations.hbs
+++ b/ghost/admin/app/templates/integrations.hbs
@@ -60,7 +60,7 @@
     </div>
 
     <section class="gh-main-width gh-main-section">
-        <h4 class="heading">Built-in integrations</h4>
+        <h4 class="heading list">Built-in integrations</h4>
         <div class="apps-grid">
             <div class="apps-grid-cell" data-test-app="zapier">
                 <LinkTo @route="integrations.zapier" data-test-link="zapier">
@@ -181,7 +181,7 @@
     </section>
 
     <section class="gh-main-width gh-main-section">
-        <h4 class="heading">Custom integrations</h4>
+        <h4 class="heading list">Custom integrations</h4>
         <div class="apps-grid">
             {{#each this.integrations as |integration|}}
                 <div class="apps-grid-cell" data-test-custom-integration>
diff --git a/ghost/admin/app/templates/integrations/amp.hbs b/ghost/admin/app/templates/integrations/amp.hbs
index 24d71df21d..d2cee07ade 100644
--- a/ghost/admin/app/templates/integrations/amp.hbs
+++ b/ghost/admin/app/templates/integrations/amp.hbs
@@ -6,7 +6,7 @@
             AMP
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
@@ -17,63 +17,65 @@
             @modifier="action wide" />
     {{/if}}
 
-    <section class="view-container bt b--lightgrey-d1 pt5">
-        <section class="app-grid">
-            <div class="app-cell">
-                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
+    <section class="view-container gh-main-width">
+        <section class="gh-main-section bt app-grid">
+            <div class="gh-main-section-block app-detail-heading app-grid">
+                <div class="app-cell">
                     <img class="app-icon" src="assets/img/amp.svg" />
                 </div>
-            </div>
-            <div class="app-cell">
-                <h3>AMP</h3>
-                <p>Accelerated Mobile Pages</p>
+                <div class="app-cell">
+                    <h3>AMP</h3>
+                    <p>Accelerated Mobile Pages</p>
+                </div>
             </div>
         </section>
 
-        <div class="gh-setting-header gh-first-header">AMP configuration</div>
-        <div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
-            <div class="gh-setting-first">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Enable AMP</div>
-                    <div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
-                </div>
-                <div class="gh-setting-action">
-                    <div class="for-checkbox">
-                        <label for="amp" class="checkbox">
-                            <input
-                                type="checkbox"
-                                checked={{this.settings.amp}}
-                                id="amp"
-                                name="amp"
-                                onclick={{action "update" value="target.checked"}}
-                                data-test-amp-checkbox
-                            >
-                            <span class="input-toggle-component"></span>
-                        </label>
+        <section class="gh-main-section bb columns-2">
+            <h4 class="heading list">AMP configuration</h4>
+            <div class="gh-main-section-block">
+                <div class="gh-setting">
+                    <div class="gh-setting-content">
+                        <div class="gh-setting-title">Enable AMP</div>
+                        <div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
+                    </div>
+                    <div class="gh-setting-action">
+                        <div class="for-checkbox">
+                            <label for="amp" class="checkbox">
+                                <input
+                                    type="checkbox"
+                                    checked={{this.settings.amp}}
+                                    id="amp"
+                                    name="amp"
+                                    onclick={{action "update" value="target.checked"}}
+                                    data-test-amp-checkbox
+                                >
+                                <span class="input-toggle-component"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {{#liquid-if this.settings.amp class="nl5 nr5"}}
-            <div class="gh-setting-last gh-setting-amp-liquid">
-                <div class="gh-setting-content gh-setting-content--no-action">
-                    <div class="gh-setting-title">Google Analytics Tracking ID</div>
-                    <div class="gh-setting-desc">Tracks AMP traffic in Google Analytics, find your ID <a href="https://ghost.org/help/how-to-find-your-google-analytics-tracking-id/">here</a></div>
-                    <div class="gh-setting-content-extended">
-                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
-                            <GhTextInput
-                                @placeholder="UA-XXXXXXX-X"
-                                @name="amp_gtag_id"
-                                @value={{this.settings.ampGtagId}}
-                                @keyEvents={{hash
-                                    Enter=(action "save")
-                                }}
-                            />
-                            <GhErrorMessage @errors={{this.settings.errors}} @property="ampGtagId"/>
-                        </GhFormGroup>
+                {{#liquid-if this.settings.amp class="nl5 nr5"}}
+                <div class="gh-setting-last gh-setting-amp-liquid">
+                    <div class="gh-setting-content gh-setting-content--no-action">
+                        <div class="gh-setting-title">Google Analytics Tracking ID</div>
+                        <div class="gh-setting-desc">Tracks AMP traffic in Google Analytics, find your ID <a href="https://ghost.org/help/how-to-find-your-google-analytics-tracking-id/">here</a></div>
+                        <div class="gh-setting-content-extended">
+                            <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
+                                <GhTextInput
+                                    @placeholder="UA-XXXXXXX-X"
+                                    @name="amp_gtag_id"
+                                    @value={{this.settings.ampGtagId}}
+                                    @keyEvents={{hash
+                                        Enter=(action "save")
+                                    }}
+                                />
+                                <GhErrorMessage @errors={{this.settings.errors}} @property="ampGtagId"/>
+                            </GhFormGroup>
+                        </div>
                     </div>
                 </div>
+                {{/liquid-if}}
             </div>
-            {{/liquid-if}}
-        </div>
+        </section>
     </section>
 </section>
diff --git a/ghost/admin/app/templates/integrations/firstpromoter.hbs b/ghost/admin/app/templates/integrations/firstpromoter.hbs
index fa718cac11..afc6f0beae 100644
--- a/ghost/admin/app/templates/integrations/firstpromoter.hbs
+++ b/ghost/admin/app/templates/integrations/firstpromoter.hbs
@@ -6,7 +6,7 @@
             FirstPromoter
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
@@ -17,63 +17,65 @@
             @modifier="action wide" />
     {{/if}}
 
-    <section class="view-container bt b--lightgrey-d1 pt5">
-        <section class="app-grid">
-            <div class="app-cell">
-                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
+    <section class="view-container gh-main-width">
+        <section class="gh-main-section bt app-grid">
+            <div class="gh-main-section-block app-detail-heading app-grid">
+                <div class="app-cell">
                     <img class="app-icon" src="assets/img/firstpromoter.png" />
                 </div>
-            </div>
-            <div class="app-cell">
-                <h3>FirstPromoter</h3>
-                <p>Launch your own member referral program</p>
+                <div class="app-cell">
+                    <h3>FirstPromoter</h3>
+                    <p>Launch your own member referral program</p>
+                </div>
             </div>
         </section>
 
-        <div class="gh-setting-header gh-first-header">FirstPromoter configuration</div>
-        <div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
-            <div class="gh-setting-first">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Enable FirstPromoter</div>
-                    <div class="gh-setting-desc">Enable <a href="https://firstpromoter.com/?fpr=ghost&fp_sid=admin" target="_blank">FirstPromoter</a> for tracking referrals</div>
-                </div>
-                <div class="gh-setting-action">
-                    <div class="for-checkbox">
-                        <label for="firstpromoter" class="checkbox">
-                            <input
-                                type="checkbox"
-                                checked={{this.settings.firstpromoter}}
-                                id="firstpromoter"
-                                name="firstpromoter"
-                                onclick={{action "update" value="target.checked"}}
-                                data-test-firstpromoter-checkbox
-                            >
-                            <span class="input-toggle-component"></span>
-                        </label>
+        <section class="gh-main-section bb columns-2">
+            <h4 class="heading list">FirstPromoter configuration</h4>
+            <div class="gh-main-section-block">
+                <div class="gh-setting">
+                    <div class="gh-setting-content">
+                        <div class="gh-setting-title">Enable FirstPromoter</div>
+                        <div class="gh-setting-desc">Enable <a href="https://firstpromoter.com/?fpr=ghost&fp_sid=admin" target="_blank">FirstPromoter</a> for tracking referrals</div>
+                    </div>
+                    <div class="gh-setting-action">
+                        <div class="for-checkbox">
+                            <label for="firstpromoter" class="checkbox">
+                                <input
+                                    type="checkbox"
+                                    checked={{this.settings.firstpromoter}}
+                                    id="firstpromoter"
+                                    name="firstpromoter"
+                                    onclick={{action "update" value="target.checked"}}
+                                    data-test-firstpromoter-checkbox
+                                >
+                                <span class="input-toggle-component"></span>
+                            </label>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {{#liquid-if this.settings.firstpromoter class="nl5 nr5"}}
-            <div class="gh-setting-last gh-setting-firstpromoter-liquid">
-                <div class="gh-setting-content gh-setting-content--no-action">
-                    <div class="gh-setting-title">FirstPromoter Account ID</div>
-                    <div class="gh-setting-desc"> Affiliate and referral tracking, find your ID <a href="https://ghost.org/help/firstpromoter-id/">here</a></div>
-                    <div class="gh-setting-content-extended">
-                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="firstpromoterId">
-                            <GhTextInput
-                                @placeholder="XXXXXXXX"
-                                @name="firstpromoter_id"
-                                @value={{this.settings.firstpromoterId}}
-                                @keyEvents={{hash
-                                    Enter=(action "save")
-                                }}
-                            />
-                            <GhErrorMessage @errors={{this.settings.errors}} @property="firstpromoterId"/>
-                        </GhFormGroup>
+                {{#liquid-if this.settings.firstpromoter class="nl5 nr5"}}
+                <div class="gh-setting gh-setting-firstpromoter-liquid">
+                    <div class="gh-setting-content gh-setting-content--no-action">
+                        <div class="gh-setting-title">FirstPromoter Account ID</div>
+                        <div class="gh-setting-desc"> Affiliate and referral tracking, find your ID <a href="https://ghost.org/help/firstpromoter-id/">here</a></div>
+                        <div class="gh-setting-content-extended">
+                            <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="firstpromoterId">
+                                <GhTextInput
+                                    @placeholder="XXXXXXXX"
+                                    @name="firstpromoter_id"
+                                    @value={{this.settings.firstpromoterId}}
+                                    @keyEvents={{hash
+                                        Enter=(action "save")
+                                    }}
+                                />
+                                <GhErrorMessage @errors={{this.settings.errors}} @property="firstpromoterId"/>
+                            </GhFormGroup>
+                        </div>
                     </div>
                 </div>
+                {{/liquid-if}}
             </div>
-            {{/liquid-if}}
-        </div>
+        </section>
     </section>
 </section>
diff --git a/ghost/admin/app/templates/integrations/slack.hbs b/ghost/admin/app/templates/integrations/slack.hbs
index ef476d579d..2209c45e8a 100644
--- a/ghost/admin/app/templates/integrations/slack.hbs
+++ b/ghost/admin/app/templates/integrations/slack.hbs
@@ -6,7 +6,7 @@
             Slack
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
@@ -17,75 +17,77 @@
             @modifier="action wide" />
     {{/if}}
 
-    <section class="view-container bt b--lightgrey-d1 pt5">
-        <section class="app-grid">
-            <div class="app-cell">
-                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
+    <section class="view-container gh-main-width">
+        <section class="gh-main-section bt app-grid">
+            <div class="gh-main-section-block app-detail-heading app-grid">
+                <div class="app-cell">
                     <img class="app-icon" src="assets/img/slackicon.png" />
                 </div>
-            </div>
-            <div class="app-cell">
-                <h3>Slack</h3>
-                <p>A messaging app for teams</p>
+                <div class="app-cell">
+                    <h3>Slack</h3>
+                    <p>A messaging app for teams</p>
+                </div>
             </div>
         </section>
 
-        <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
-            <div class="gh-setting-header gh-first-header">Slack configuration</div>
+        <section class="gh-main-section bb columns-2">
+            <h4 class="heading list">Slack configuration</h4>
+            <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
 
-                <div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
-                <div class="gh-setting-first">
-                    <div class="gh-setting-content gh-setting-content--no-action">
-                        <div class="gh-setting-title">Webhook URL</div>
-                        <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
-                        <div class="gh-setting-content-extended">
-                            <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="url">
-                                <GhTextInput
-                                    @placeholder="https://hooks.slack.com/services/..."
-                                    @name="slack[url]"
-                                    @value={{readonly this.slackSettings.url}}
-                                    @input={{action "updateURL" value="target.value"}}
-                                    @keyEvents={{hash
-                                        Enter=(action "save")
-                                    }}
-                                    @focus-out={{action "triggerDirtyState"}}
-                                    data-test-slack-url-input={{true}}
-                                />
-                                {{#unless this.slackSettings.errors.url}}
-                                    <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
-                                {{else}}
-                                    <GhErrorMessage @errors={{this.slackSettings.errors}} @property="url" data-test-error="slack-url" />
-                                {{/unless}}
-                            </GhFormGroup>
+                <div class="gh-main-section-block">
+                    <div class="gh-setting-first">
+                        <div class="gh-setting-content gh-setting-content--no-action">
+                            <div class="gh-setting-title">Webhook URL</div>
+                            <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
+                            <div class="gh-setting-content-extended">
+                                <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="url">
+                                    <GhTextInput
+                                        @placeholder="https://hooks.slack.com/services/..."
+                                        @name="slack[url]"
+                                        @value={{readonly this.slackSettings.url}}
+                                        @input={{action "updateURL" value="target.value"}}
+                                        @keyEvents={{hash
+                                            Enter=(action "save")
+                                        }}
+                                        @focus-out={{action "triggerDirtyState"}}
+                                        data-test-slack-url-input={{true}}
+                                    />
+                                    {{#unless this.slackSettings.errors.url}}
+                                        <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
+                                    {{else}}
+                                        <GhErrorMessage @errors={{this.slackSettings.errors}} @property="url" data-test-error="slack-url" />
+                                    {{/unless}}
+                                </GhFormGroup>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="gh-setting">
+                        <div class="gh-setting-content gh-setting-content--no-action">
+                            <div class="gh-setting-title">Username</div>
+                            <div class="gh-setting-desc">The username to display messages from</div>
+                            <div class="gh-setting-content-extended">
+                                <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="username">
+                                    <GhTextInput
+                                        @placeholder="Ghost"
+                                        @name="slack[username]"
+                                        @value={{readonly this.slackSettings.username}}
+                                        @input={{action "updateUsername" value="target.value"}}
+                                        @keyEvents={{hash
+                                            Enter=(action "save")
+                                        }}
+                                        @focus-out={{action "triggerDirtyState"}}
+                                        data-test-slack-username-input={{true}}
+                                    />
+                                    {{#if this.slackSettings.errors.username}}
+                                        <GhErrorMessage @errors={{this.slackSettings.errors}} @property="username" />
+                                    {{/if}}
+                                </GhFormGroup>
+                            </div>
+                            <GhTaskButton @buttonText="Send test notification" @task={{this.sendTestNotification}} @successText="Sent" @class="gh-btn gh-btn-icon" @disabled={{this.testNotificationDisabled}} data-test-send-notification-button="true" />
                         </div>
                     </div>
                 </div>
-                <div class="gh-setting">
-                    <div class="gh-setting-content gh-setting-content--no-action">
-                        <div class="gh-setting-title">Username</div>
-                        <div class="gh-setting-desc">The username to display messages from</div>
-                        <div class="gh-setting-content-extended">
-                            <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="username">
-                                <GhTextInput
-                                    @placeholder="Ghost"
-                                    @name="slack[username]"
-                                    @value={{readonly this.slackSettings.username}}
-                                    @input={{action "updateUsername" value="target.value"}}
-                                    @keyEvents={{hash
-                                        Enter=(action "save")
-                                    }}
-                                    @focus-out={{action "triggerDirtyState"}}
-                                    data-test-slack-username-input={{true}}
-                                />
-                                {{#if this.slackSettings.errors.username}}
-                                    <GhErrorMessage @errors={{this.slackSettings.errors}} @property="username" />
-                                {{/if}}
-                            </GhFormGroup>
-                        </div>
-                        <GhTaskButton @buttonText="Send test notification" @task={{this.sendTestNotification}} @successText="Sent" @class="gh-btn gh-btn-green gh-btn-icon" @disabled={{this.testNotificationDisabled}} data-test-send-notification-button="true" />
-                    </div>
-                </div>
-            </div>
-        </form>
+            </form>
+        </section>
     </section>
 </section>
diff --git a/ghost/admin/app/templates/integrations/unsplash.hbs b/ghost/admin/app/templates/integrations/unsplash.hbs
index dde853de46..b605699f34 100644
--- a/ghost/admin/app/templates/integrations/unsplash.hbs
+++ b/ghost/admin/app/templates/integrations/unsplash.hbs
@@ -6,7 +6,7 @@
             Unsplash
         </h2>
         <section class="view-actions">
-            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
+            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
         </section>
     </GhCanvasHeader>
 
@@ -17,44 +17,46 @@
             @modifier="action wide" />
     {{/if}}
 
-    <section class="view-container bt b--lightgrey-d1 pt5">
-        <section class="app-grid">
-            <div class="app-cell">
-                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
+    <section class="view-container gh-main-width">
+        <section class="gh-main-section bt app-grid">
+            <div class="gh-main-section-block app-detail-heading app-grid">
+                <div class="app-cell">
                     <img class="app-icon pa2 id-unsplash" src="assets/icons/unsplash.svg" />
                 </div>
-            </div>
-            <div class="app-cell">
-                <h3>Unsplash</h3>
-                <p>Beautiful, free photos</p>
+                <div class="app-cell">
+                    <h3>Unsplash</h3>
+                    <p>Beautiful, free photos</p>
+                </div>
             </div>
         </section>
 
-        <div class="gh-setting-header gh-first-header">Unsplash configuration</div>
-        <div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
-            <div class="gh-setting-first gh-setting-last" id="unsplash-toggle">
-                <div class="gh-setting-content">
-                    <div class="gh-setting-title">Enable Unsplash</div>
-                    <div class="gh-setting-desc">Enable <a href="https://unsplash.com" target="_blank">Unsplash</a> image integration for your posts</div>
-                </div>
-                <div class="gh-setting-action">
-                    <div class="form-group right gh-setting-unsplash-checkbox">
-                        <div class="for-checkbox">
-                            <label for="isActive" class="checkbox">
-                                    <input
-                                        type="checkbox"
-                                        checked={{this.unsplashSettings.isActive}}
-                                        id="isActive"
-                                        name="isActive"
-                                        onclick={{action "update" value="target.checked"}}
-                                        data-test-checkbox="unsplash"
-                                    >
-                                    <span class="input-toggle-component"></span>
-                            </label>
+        <section class="gh-main-section bb columns-2">
+            <h4 class="heading list">Unsplash configuration</h4>
+            <div class="gh-main-section-block">
+                <div class="gh-setting" id="unsplash-toggle">
+                    <div class="gh-setting-content">
+                        <div class="gh-setting-title">Enable Unsplash</div>
+                        <div class="gh-setting-desc">Enable <a href="https://unsplash.com" target="_blank">Unsplash</a> image integration for your posts</div>
+                    </div>
+                    <div class="gh-setting-action">
+                        <div class="form-group right gh-setting-unsplash-checkbox">
+                            <div class="for-checkbox">
+                                <label for="isActive" class="checkbox">
+                                        <input
+                                            type="checkbox"
+                                            checked={{this.unsplashSettings.isActive}}
+                                            id="isActive"
+                                            name="isActive"
+                                            onclick={{action "update" value="target.checked"}}
+                                            data-test-checkbox="unsplash"
+                                        >
+                                        <span class="input-toggle-component"></span>
+                                </label>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
     </section>
 </section>