From 5fd8126fc35aa0fc90116c04cc94074f0328a802 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 10 Oct 2024 10:25:20 +0100
Subject: [PATCH 1/7] Added a global style for form controls with AdminX style

---
 ghost/admin/app/styles/patterns/forms.css  | 14 ++++++++++++++
 ghost/admin/app/styles/patterns/global.css | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index cb3eba844d9..c44209cf2b2 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -213,6 +213,20 @@ select {
     -webkit-appearance: none;
 }
 
+.gh-input-admin-x {
+    height: 38px;
+    padding: 4px 12px;
+    font-size: 1.4rem;
+    color: var(--black);
+    background-color: var(--grey-150);
+    border: 0;
+    border-radius: 8px;
+}
+
+textarea.gh-input-admin-x {
+    padding-block: 8px;
+}
+
 .gh-select,
 select {
     cursor: pointer;
diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css
index bee100121d8..f7605a07c4b 100644
--- a/ghost/admin/app/styles/patterns/global.css
+++ b/ghost/admin/app/styles/patterns/global.css
@@ -52,6 +52,24 @@
     --lightgrey: #CED4D9;
     --whitegrey: #EBEEF0;
 
+    /* AdminX Greys */
+    --grey-50: #FAFAFB;
+    --grey-75: #F9FAFB;
+    --grey-100: #F4F5F6;
+    --grey-150: #F1F3F4;
+    --grey-200: #EBEEF0;
+    --grey-250: #E5E9ED;
+    --grey-300: #DDE1E5;
+    --grey-400: #CED4D9;
+    --grey-500: #AEB7C1;
+    --grey-600: #95A1AD;
+    --grey-700: #7C8B9A;
+    --grey-800: #626D79;
+    --grey-900: #394047;
+    --grey-925: #2E3338;
+    --grey-950: #222427;
+    --grey-975: #191B1E;
+
     /* Tones */
     --white-10: rgba(255, 255, 255, 0.1);
     --white-20: rgba(255, 255, 255, 0.2);

From 58f175761ab7c4605fe84dc9f29fb36e9beb957f Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 10 Oct 2024 11:21:18 +0100
Subject: [PATCH 2/7] Updated tag page styles

REF DES-800
---
 ghost/admin/app/components/tags/tag-form.hbs | 209 +++++++++----------
 ghost/admin/app/controllers/tag.js           |  15 ++
 ghost/admin/app/styles/layouts/main.css      |  23 +-
 ghost/admin/app/styles/layouts/tags.css      |  34 +--
 ghost/admin/app/styles/patterns/buttons.css  |  15 +-
 ghost/admin/app/styles/patterns/forms.css    |  11 +-
 ghost/admin/app/templates/tag.hbs            |  17 +-
 7 files changed, 161 insertions(+), 163 deletions(-)

diff --git a/ghost/admin/app/components/tags/tag-form.hbs b/ghost/admin/app/components/tags/tag-form.hbs
index 15c7be8a86d..f82a76c5e7a 100644
--- a/ghost/admin/app/components/tags/tag-form.hbs
+++ b/ghost/admin/app/components/tags/tag-form.hbs
@@ -1,111 +1,102 @@
-<div class="gh-main-section">
-    <div class="flex justify-between items-center">
-        <h4 class="gh-main-section-header small bn">Basic settings</h4>
-        <a href={{this.tagURL}} target="_blank" rel="noopener noreferrer" class="gh-view-tag-link">View tag {{svg-jar "external"}}</a>
-    </div>
-    <section class="gh-main-section-block">
-        <div class="gh-main-section-content grey columns-2">
-            <div>
-                <div class="gh-tag-settings-multiprop">
-                    <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
-                        <label for="tag-name">Name</label>
-                        <input
-                            type="text"
-                            class="gh-input"
-                            id="tag-name"
-                            name="name"
-                            value={{@tag.name}}
-                            {{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
-                            {{on "blur" (fn this.validateTagProperty "name")}}
-                            data-test-input="tag-name"
-                        />
-                        <span class="error">
-                            <GhErrorMessage @errors={{@tag.errors}} @property="name" />
-                            <GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
-                        </span>
-                        <p class="description">
-                            Start with # to create internal tags
-                            <a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
-                        </p>
-                    </GhFormGroup>
-
-                    <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
-                        <label for="accent-color">Color</label>
-                        <div class="input-color">
-                            <input
-                                type="text"
-                                placeholder="15171A"
-                                name="accent-color"
-                                autocorrect="off"
-                                maxlength="6"
-                                value={{this.accentColor}}
-                                class="gh-input"
-                                {{on "input" (perform this.debounceUpdateAccentColorTask)}}
-                                {{on "blur" this.updateAccentColor}}
-                                aria-label="Accent color hex value"
-                                data-test-input="accentColor"
-                            />
-                            <div class="color-picker-horizontal-divider"></div>
-                            <div
-                                class="color-box-container"
-                                style={{this.accentColorBgStyle}}
-                            >
-                                <input
-                                    type="color"
-                                    name="accent-color"
-                                    class="color-picker"
-                                    value={{this.accentColorPickerValue}}
-                                    {{on "input" (perform this.debounceUpdateAccentColorTask)}}
-                                    aria-label="Accent color picker"
-                                >
-                            </div>
-                        </div>
-                    </GhFormGroup>
-                </div>
+<div class="gh-main-section columns-2">
+    <div>
+        <div class="gh-tag-settings-multiprop">
+            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
+                <label for="tag-name">Name</label>
+                <input
+                    type="text"
+                    class="gh-input-admin-x"
+                    id="tag-name"
+                    name="name"
+                    value={{@tag.name}}
+                    {{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
+                    {{on "blur" (fn this.validateTagProperty "name")}}
+                    data-test-input="tag-name"
+                />
+                <span class="error">
+                    <GhErrorMessage @errors={{@tag.errors}} @property="name" />
+                    <GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
+                </span>
+                <p class="description">
+                    Start with # to create internal tags.
+                    <a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
+                </p>
+            </GhFormGroup>
 
-                <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
-                    <label for="tag-slug">Slug</label>
+            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
+                <label for="accent-color">Color</label>
+                <div class="input-color">
                     <input
                         type="text"
-                        value={{@tag.slug}}
-                        id="tag-slug"
-                        name="slug"
-                        class="gh-input"
-                        {{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
-                        {{on "blur" (fn this.validateTagProperty "slug")}}
-                        data-test-input="tag-slug"
+                        placeholder="15171A"
+                        name="accent-color"
+                        autocorrect="off"
+                        maxlength="6"
+                        value={{this.accentColor}}
+                        class="gh-input-admin-x"
+                        {{on "input" (perform this.debounceUpdateAccentColorTask)}}
+                        {{on "blur" this.updateAccentColor}}
+                        aria-label="Accent color hex value"
+                        data-test-input="accentColor"
                     />
-                    <GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
-                    <GhErrorMessage @errors={{@tag.errors}} @property="slug" />
-                </GhFormGroup>
-
-                <GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
-                    <label for="tag-description">Description</label>
-                    <textarea
-                        id="tag-description"
-                        name="description"
-                        class="gh-input gh-tag-details-textarea"
-                        {{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
-                        {{on "blur" (fn this.validateTagProperty "description")}}
-                        data-test-input="tag-description"
-                    >{{@tag.description}}</textarea>
-
-                    <GhErrorMessage @errors={{@tag.errors}} @property="description" />
-                    <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
-                </GhFormGroup>
-            </div>
-            <GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
-                <label for="tag-image">Tag image</label>
-                <GhImageUploaderWithPreview
-                    @image={{@tag.featureImage}}
-                    @text="Upload tag image"
-                    @allowUnsplash={{true}}
-                    @update={{fn this.setTagProperty "featureImage"}}
-                    @remove={{fn this.setTagProperty "featureImage" ""}}
-                />
+                    <div
+                        class="color-box-container"
+                        style={{this.accentColorBgStyle}}
+                    >
+                        <input
+                            type="color"
+                            name="accent-color"
+                            class="color-picker"
+                            value={{this.accentColorPickerValue}}
+                            {{on "input" (perform this.debounceUpdateAccentColorTask)}}
+                            aria-label="Accent color picker"
+                        >
+                    </div>
+                </div>
             </GhFormGroup>
         </div>
-    </section>
+
+        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
+            <label for="tag-slug">Slug</label>
+            <input
+                type="text"
+                value={{@tag.slug}}
+                id="tag-slug"
+                name="slug"
+                class="gh-input-admin-x"
+                {{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
+                {{on "blur" (fn this.validateTagProperty "slug")}}
+                data-test-input="tag-slug"
+            />
+            <GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
+            <GhErrorMessage @errors={{@tag.errors}} @property="slug" />
+        </GhFormGroup>
+
+        <GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
+            <label for="tag-description">Description</label>
+            <textarea
+                id="tag-description"
+                name="description"
+                class="gh-input-admin-x gh-tag-details-textarea"
+                {{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
+                {{on "blur" (fn this.validateTagProperty "description")}}
+                data-test-input="tag-description"
+            >{{@tag.description}}</textarea>
+
+            <GhErrorMessage @errors={{@tag.errors}} @property="description" />
+            <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
+        </GhFormGroup>
+    </div>
+    <GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
+        <label for="tag-image">Tag image</label>
+        <GhImageUploaderWithPreview
+            @image={{@tag.featureImage}}
+            @text="Upload tag image"
+            @allowUnsplash={{true}}
+            @update={{fn this.setTagProperty "featureImage"}}
+            @remove={{fn this.setTagProperty "featureImage" ""}}
+        />
+    </GhFormGroup>
 </div>
 
 <section class="gh-expandable">
@@ -128,7 +119,7 @@
                             <input
                                 id="meta-title"
                                 name="metaTitle"
-                                class="gh-input"
+                                class="gh-input-admin-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.metaTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
@@ -143,7 +134,7 @@
                             <textarea
                                 id="meta-description"
                                 name="metaDescription"
-                                class="gh-input gh-tag-details-textarea"
+                                class="gh-input-admin-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "metaDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "metaDescription")}}
@@ -157,7 +148,7 @@
                             <input
                                 id="canonical-url"
                                 name="canonicalUrl"
-                                class="gh-input"
+                                class="gh-input-admin-x"
                                 value={{@tag.canonicalUrl}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
                                 {{on "blur" this.validateCanonicalUrl}}
@@ -217,7 +208,7 @@
                                 type="text"
                                 id="twitter-title"
                                 name="twitterTitle"
-                                class="gh-input"
+                                class="gh-input-admin-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.twitterTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
@@ -232,7 +223,7 @@
                             <textarea
                                 id="twitter-description"
                                 name="twitterDescription"
-                                class="gh-input gh-tag-details-textarea"
+                                class="gh-input-admin-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "twitterDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "twitterDescription")}}
@@ -314,7 +305,7 @@
                                 type="text"
                                 id="og-title"
                                 name="ogTitle"
-                                class="gh-input"
+                                class="gh-input-admin-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.ogTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
@@ -329,7 +320,7 @@
                             <textarea
                                 id="og-description"
                                 name="ogDescription"
-                                class="gh-input gh-tag-details-textarea"
+                                class="gh-input-admin-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "ogDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "ogDescription")}}
diff --git a/ghost/admin/app/controllers/tag.js b/ghost/admin/app/controllers/tag.js
index 9b44800e666..2b9baba91a4 100644
--- a/ghost/admin/app/controllers/tag.js
+++ b/ghost/admin/app/controllers/tag.js
@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 import DeleteTagModal from '../components/tags/delete-tag-modal';
 import {action} from '@ember/object';
+import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
 
@@ -8,11 +9,25 @@ export default class TagController extends Controller {
     @service modals;
     @service notifications;
     @service router;
+    @inject config;
 
     get tag() {
         return this.model;
     }
 
+    get tagURL() {
+        const blogUrl = this.config.blogUrl;
+        const tagSlug = this.tag?.slug || '';
+
+        let tagURL = this.tag?.canonicalUrl || `${blogUrl}/tag/${tagSlug}`;
+
+        if (!tagURL.endsWith('/')) {
+            tagURL += '/';
+        }
+
+        return tagURL;
+    }
+
     @action
     confirmDeleteTag() {
         return this.modals.open(DeleteTagModal, {
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 66305955911..85db1caa16b 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1339,8 +1339,9 @@
 
 /* Expandable options */
 .gh-expandable {
-    background: var(--main-color-content-greybg);
-    border-radius: 3px;
+    background: var(--white);
+    border: 1px solid var(--whitegrey);
+    border-radius: var(--border-radius);
 }
 
 .gh-expandable.overflow-hidden {
@@ -1348,7 +1349,7 @@
 }
 
 .gh-expandable-block {
-    border-bottom: 1px solid var(--white);
+    border-bottom: 1px solid var(--whitegrey);
     padding: 18px 24px;
     margin: 0;
 }
@@ -1387,7 +1388,7 @@
 }
 
 .gh-expandable-content {
-    background: linear-gradient(var(--main-color-content-greybg), color-mod(var(--main-color-content-greybg) l(-2%)));
+    background: var(--white);
     margin: 18px -24px -18px;
     padding: 0 24px;
 }
@@ -1409,22 +1410,16 @@
 }
 
 .gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) {
-    background: color-mod(var(--whitegrey-d1) l(-1%));
+    background: var(--white);
+    border: transparent;
 }
 
 .gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover {
-    background: color-mod(var(--whitegrey-d2) l(-1%));
+    background: var(--whitegrey-l1);
 }
 
 .gh-main-section-content.grey .gh-btn-group {
-    background: var(--whitegrey-d1);
-}
-
-.gh-expandable-content input:not(:focus),
-.gh-expandable-content .gh-input:not(:focus),
-.gh-expandable-content .ember-power-select-multiple-trigger,
-.gh-expandable-content select:not(:focus) {
-    border-color: var(--whitegrey-d1);
+    background: var(--whitegrey);
 }
 
 .gh-main-section-content.grey .gh-btn-tabs {
diff --git a/ghost/admin/app/styles/layouts/tags.css b/ghost/admin/app/styles/layouts/tags.css
index 6f45974b378..33d51948e03 100644
--- a/ghost/admin/app/styles/layouts/tags.css
+++ b/ghost/admin/app/styles/layouts/tags.css
@@ -4,10 +4,6 @@ a.gh-tag-list-posts-count:hover {
     color: color-mod(var(--green) l(-25%) s(+15%));
 }
 
-textarea.gh-tag-details-textarea {
-    max-width: 100%;
-}
-
 .gh-tags-placeholder {
     width: 60px;
     fill: var(--lightgrey);
@@ -136,10 +132,11 @@ textarea.gh-tag-details-textarea {
 }
 
 .gh-tag-image-uploader .gh-image-uploader {
-    margin: 4px 0 0;
-    background: transparent;
-    border: 1px solid var(--whitegrey-d2);
     min-height: 147px;
+    margin: 4px 0 0;
+    background: var(--grey-75);
+    border: 1px solid var(--grey-100);
+    border-radius: var(--border-radius);
 }
 
 .gh-tag-setting-codeinjection .CodeMirror {
@@ -187,7 +184,7 @@ label.gh-tag-setting-codeheader {
     position: absolute;
     top: 9px;
     left: 43px;
-    color: var(--midlightgrey);
+    color: var(--black);
     font-family: "Consolas", monaco, monospace;
     font-size: 13px;
 }
@@ -239,22 +236,6 @@ label.gh-tag-setting-codeheader {
     left: 44px;
 }
 
-.gh-tag-settings-colorcontainer .color-picker-horizontal-divider {
-    position: absolute;
-    display: block;
-    content: "";
-    width: 1px;
-    top: 0;
-    left: 37px;
-    bottom: 0;
-    background: var(--input-border-color);
-}
-
-.gh-tag-settings-colorcontainer .input-color input:focus + .color-picker-horizontal-divider {
-    top: 2px;
-    bottom: 2px;
-}
-
 .gh-tag-settings-colorcontainer .color-box-container {
     height: 32px;
     width: 32px;
@@ -263,8 +244,8 @@ label.gh-tag-setting-codeheader {
     top: 2px;
     left: 2px;
     margin: 1px;
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border: 1px solid var(--grey-150);
+    border-radius: 6px;
 }
 
 .gh-tag-settings-colorcontainer .color-box-container .color-picker {
@@ -333,7 +314,6 @@ label.gh-tag-setting-codeheader {
 
 .gh-setting-content-extended .gh-image-uploader {
     margin: 0;
-    border: 1px solid var(--whitegrey-d2);
 }
 
 .gh-setting-content-extended .gh-btn span {
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index 70516c32cdd..73e85afdab6 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -267,10 +267,9 @@ fieldset[disabled] .gh-btn {
 
 .gh-btn-icon-right svg,
 svg.gh-btn-icon-right {
-    margin-left: 0.5em;
-    margin-right: 0;
-    width: auto;
-    height: 16px;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-left: 0.4em;
 }
 
 .gh-btn-icon svg path {
@@ -360,7 +359,7 @@ svg.gh-btn-icon-right {
     margin: 0;
 }
 
-.gh-btn-action-icon:not(.icon-only) svg {
+.gh-btn-action-icon:not(.icon-only):not(.gh-btn-icon-right) svg {
     margin-right: 10px;
 }
 
@@ -369,6 +368,12 @@ svg.gh-btn-icon-right {
     stroke: currentColor;
 }
 
+.gh-btn-action-icon.gh-btn-icon-right svg {
+    height: 14px;
+    width: 14px;
+    margin-left: 8px;
+}
+
 .gh-btn-label-green {
     color: var(--green);
 }
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index c44209cf2b2..64021d1fbd0 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -214,15 +214,24 @@ select {
 }
 
 .gh-input-admin-x {
+    width: 100%;
     height: 38px;
     padding: 4px 12px;
     font-size: 1.4rem;
     color: var(--black);
     background-color: var(--grey-150);
-    border: 0;
+    border: 1px solid transparent;
     border-radius: 8px;
 }
 
+.gh-input-admin-x:focus,
+.gh-input-admin-x:focus-visible {
+    background-color: var(--white);
+    border: 1px solid var(--green);
+    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    outline: none;
+}
+
 textarea.gh-input-admin-x {
     padding-block: 8px;
 }
diff --git a/ghost/admin/app/templates/tag.hbs b/ghost/admin/app/templates/tag.hbs
index 6aafcc62c1e..7e1c6753ed5 100644
--- a/ghost/admin/app/templates/tag.hbs
+++ b/ghost/admin/app/templates/tag.hbs
@@ -14,13 +14,16 @@
             </div>
 
             <section class="view-actions">
-                <GhTaskButton
-                    @task={{this.saveTask}}
-                    @type="button"
-                    @class="gh-btn gh-btn-primary gh-btn-icon"
-                    @data-test-button="save"
-                    {{on-key "cmd+s"}}
-                />
+                <div class="view-actions-bottom-row">
+                    <a href={{this.tagURL}} target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-icon-right gh-btn-action-icon"><span>View{{svg-jar "arrow-top-right"}}</span></a>
+                    <GhTaskButton
+                        @task={{this.saveTask}}
+                        @type="button"
+                        @class="gh-btn gh-btn-primary gh-btn-icon"
+                        @data-test-button="save"
+                        {{on-key "cmd+s"}}
+                    />
+                </div>
             </section>
         </GhCanvasHeader>
 

From 6ac01d96c7db97e8643c6349e1250586228621e7 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 10 Oct 2024 13:59:27 +0100
Subject: [PATCH 3/7] Made post settings form controls consistent

---
 .../components/gh-psm-visibility-input.hbs    |  2 +-
 .../app/styles/components/settings-menu.css   | 99 ++++++++++++++++---
 2 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/components/gh-psm-visibility-input.hbs b/ghost/admin/app/components/gh-psm-visibility-input.hbs
index 5696e967743..1c68f05e6f6 100644
--- a/ghost/admin/app/components/gh-psm-visibility-input.hbs
+++ b/ghost/admin/app/components/gh-psm-visibility-input.hbs
@@ -7,5 +7,5 @@
         @update={{action "updateVisibility"}}
         @data-test-select="post-visibility"
     />
-    {{svg-jar "arrow-down-small"}}
+    <span class="ember-power-select-status-icon"></span>
 </span>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index 9680961464f..30a316139a1 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -179,14 +179,6 @@
 /* Content
 /* ---------------------------------------------------------- */
 
-.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input:not([disabled]),
-.settings-menu-container:not(.tag-settings) .gh-input:not([disabled]),
-.settings-menu-pane .gh-date-time-picker-date,
-.settings-menu-pane .gh-date-time-picker-time {
-    background: var(--white);
-    border: var(--input-border);
-}
-
 .settings-menu-container .ember-power-select-multiple-trigger input,
 .settings-menu-pane .gh-date-time-picker-date input,
 .settings-menu-pane .gh-date-time-picker-time input {
@@ -256,12 +248,6 @@
     height: 108px;
 }
 
-.settings-menu-content textarea.gh-input {
-    font-size: 1.5rem;
-    line-height: 1.4em;
-    letter-spacing: 0;
-}
-
 .settings-menu-content .gh-cm-editor-textarea {
     min-height: 170px;
 }
@@ -535,3 +521,88 @@ li.nav-list-item .for-switch.xs label {
 .settings-menu-email .disabled input {
     opacity: 0.5;
 }
+
+/* Form controls
+/* ---------------------------------------------------------- */
+.settings-menu-container .gh-input,
+.settings-menu-container select,
+.settings-menu-container .gh-date-time-picker-date,
+.settings-menu-container .gh-date-time-picker-time,
+.settings-menu-container .ember-power-select-multiple-trigger {
+    min-height: 38px;
+    padding: 4px 12px;
+    font-size: 1.4rem;
+    color: var(--black);
+    background-color: var(--grey-150);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    transition-property: color, background-color,border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+}
+
+.settings-menu-container .gh-input:hover,
+.settings-menu-container select:hover,
+.settings-menu-container .gh-date-time-picker-date:hover,
+.settings-menu-container .gh-date-time-picker-time:hover,
+.settings-menu-container .ember-power-select-multiple-trigger:hover {
+    background-color: var(--grey-100);
+}
+
+.settings-menu-container .gh-input:focus,
+.settings-menu-container .gh-input:focus-visible,
+.settings-menu-container .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date,
+.settings-menu-container .gh-date-time-picker-time:focus-within {
+    background-color: var(--white);
+    border: 1px solid var(--green);
+    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    outline: none;
+}
+
+.settings-menu-container textarea.gh-input {
+    padding-block: 8px;
+}
+
+.settings-menu-container .gh-date-time-picker input {
+    font-size: 1.4rem;
+    color: var(--black);
+}
+
+.settings-menu-container .gh-input-icon .gh-input {
+    padding-left: 32px;
+}
+
+.settings-menu-container .ember-power-select-trigger[aria-expanded=true] {
+    border-color: transparent;
+}
+
+.settings-menu-container .ember-power-select-multiple-trigger {
+    padding: 5px 8px;
+    border-radius: 8px !important;
+}
+
+.settings-menu-container .ember-power-select-multiple-trigger:has(.ember-power-select-multiple-option) {
+    padding-left: 6px !important;
+}
+
+.settings-menu-container .ember-power-select-multiple-option {
+    height: 24px;
+}
+
+.settings-menu-container .ember-power-select-status-icon {
+    border-color: var(--black);
+}
+
+.settings-menu-container .gh-date-time-picker-timezone {
+    font-size: 1.2rem;
+    margin-left: 0;
+}
+
+.settings-menu-container .ember-power-select-dropdown {
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 8px;
+    --tw-shadow: 0 0 7px rgba(0, 0, 0, .08), 0 2.1px 2.2px -5px rgba(0, 0, 0, .011), 0 5.1px 5.3px -5px rgba(0, 0, 0, .016), 0 9.5px 10px -5px rgba(0, 0, 0, .02), 0 17px 17.9px -5px rgba(0, 0, 0, .024), 0 31.8px 33.4px -5px rgba(0, 0, 0, .029), 0 76px 80px -5px rgba(0, 0, 0, .04);
+    --tw-shadow-colored: 0 0 7px var(--tw-shadow-color), 0 2.1px 2.2px -5px var(--tw-shadow-color), 0 5.1px 5.3px -5px var(--tw-shadow-color), 0 9.5px 10px -5px var(--tw-shadow-color), 0 17px 17.9px -5px var(--tw-shadow-color), 0 31.8px 33.4px -5px var(--tw-shadow-color), 0 76px 80px -5px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
+}

From 97e3ad4674e0f8114f11e3f3c21780bd81098729 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 7 Jan 2025 16:08:15 +0100
Subject: [PATCH 4/7] Refreshed tag and member pages

Ref https://linear.app/ghost/issue/DES-800/toplevelcomponent
- Updated all form components to use admin-x styles
- Changed box styles from grey to bordered
- Changed temporary class name for input components from gh-input-admin-x to gh-input-x
---
 .../app/components/gh-member-label-input.hbs  |   1 +
 .../components/gh-member-settings-form.hbs    | 271 +++++++++---------
 .../app/components/member/activity-feed.hbs   |   6 +-
 .../member/newsletter-preference.hbs          |  42 ++-
 ghost/admin/app/components/tags/tag-form.hbs  | 188 ++++++------
 .../app/styles/components/power-select.css    |  10 +-
 ghost/admin/app/styles/layouts/main.css       |   6 +-
 ghost/admin/app/styles/layouts/members.css    |  48 ++--
 ghost/admin/app/styles/patterns/forms.css     |  46 +--
 ghost/admin/app/templates/members.hbs         |   2 +-
 10 files changed, 304 insertions(+), 316 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-label-input.hbs b/ghost/admin/app/components/gh-member-label-input.hbs
index b75832dff41..282eae5a058 100644
--- a/ghost/admin/app/components/gh-member-label-input.hbs
+++ b/ghost/admin/app/components/gh-member-label-input.hbs
@@ -3,6 +3,7 @@
         tokenComponent=(component "gh-token-input/label-token")
     }}
     @class="gh-member-label-input"
+    @triggerClass={{@triggerClass}}
     @onChange={{this.updateLabels}}
     @onCreate={{this.createLabel}}
     @options={{this.availableLabels}}
diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index c6a3234c0a0..7a56dbf3e00 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -3,12 +3,13 @@
         <GhMemberDetails @member={{@member}} />
 
         <div class="gh-main-section-block span-2">
-            <div class="gh-main-section-content grey">
+            <div class="gh-main-section-content bordered">
                 <div>
                     <div class="gh-cp-member-email-name">
                         <GhFormGroup class="max-width" @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="name">
                             <label for="member-name">Name</label>
                             <GhTextInput
+                                @class="gh-input-x"
                                 @id="member-name"
                                 @name="name"
                                 @value={{this.scratchMember.name}}
@@ -23,6 +24,7 @@
                         <GhFormGroup class="max-width" @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="email">
                             <label for="member-email">Email</label>
                             <GhTextInput
+                                @class="gh-input-x"
                                 @value={{this.scratchMember.email}}
                                 @id="member-email"
                                 @name="email"
@@ -40,6 +42,7 @@
                     <GhFormGroup class="gh-member-labels">
                         <label for="label-input">Labels</label>
                         <GhMemberLabelInput
+                            @triggerClass="gh-input-x"
                             @onChange={{this.setLabels}}
                             @allowEdit={{true}}
                             @onLabelEdit={{@onLabelEdit}}
@@ -55,7 +58,7 @@
                         <GhTextarea
                             @id="member-note"
                             @name="note"
-                            @class="gh-member-details-textarea"
+                            @class="gh-member-details-textarea gh-input-x"
                             @tabindex="3"
                             @value={{this.scratchMember.note}}
                             {{on "input" this.updateProperty}}
@@ -80,7 +83,7 @@
                 <h4 class="gh-main-section-header small bn">Subscriptions</h4>
 
                 {{#unless this.tiers}}
-                    <div class="gh-main-section-content grey">
+                    <div class="gh-main-section-content bordered">
                         <div class="gh-cp-membertier-notier">
                             {{#unless this.isCreatingComplimentary}}
                                 <div class="gh-members-no-data gh-members-no-subs">
@@ -107,148 +110,150 @@
                     </div>
                 {{/unless}}
 
-                {{#each this.tiers as |tier|}}
-                    <div class="gh-main-section-content grey gh-member-tier-container" data-test-tier={{tier.id}}>
-                        <div class="gh-main-content-card gh-cp-membertier gh-cp-membertier-attribution gh-membertier-subscription {{if (gt tier.subscriptions.length 1) "multiple-subs" ""}}">
-                            {{#each tier.subscriptions as |sub index|}}
-                                <div class="gh-tier-card-header flex items-center">
-                                    <div class="gh-tier-card-price">
-                                        <div class="flex items-start">
-                                            <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
-                                            <span class="amount">{{format-number sub.price.nonDecimalAmount}}</span>
+                {{#if this.tiers}}
+                    <div class="gh-main-section-content bordered gh-member-tier-container">
+                        <div class="gh-main-content-card gh-cp-membertier gh-cp-membertier-attribution gh-membertier-subscription">
+                            {{#each this.tiers as |tier|}}
+                                {{#each tier.subscriptions as |sub index|}}
+                                    <div class="gh-tier-card-header flex items-center" data-test-tier={{tier.id}}>
+                                        <div class="gh-tier-card-price">
+                                            <div class="flex items-start">
+                                                <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
+                                                <span class="amount">{{format-number sub.price.nonDecimalAmount}}</span>
+                                            </div>
+                                            <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
                                         </div>
-                                        <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
-                                    </div>
-                                    <div style="margin-left: 16px; flex-grow: 1;">
-                                        <h3 class="gh-membertier-name" data-test-text="tier-name" style="align-items:center !important; justify-content:flex-start !important;">
-                                            {{tier.name}}
-                                            {{#if (eq sub.status "canceled")}}
-                                                <span class="gh-badge archived" data-test-text="member-subscription-status">Canceled</span>
-                                            {{else if sub.cancel_at_period_end}}
-                                                <span class="gh-badge archived" data-test-text="member-subscription-status">Canceled</span>
-                                            {{else if sub.compExpiry}}
-                                                <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
-                                            {{else if sub.trialUntil}}
-                                                <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
-                                            {{else}}
-                                                <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
-                                            {{/if}}
-                                            {{#if (gt tier.subscriptions.length 1)}}
-                                                <span class="gh-membertier-subcount">{{tier.subscriptions.length}} subscriptions</span>
-                                            {{/if}}
-                                        </h3>
-                                        <div>
-                                            <span class="gh-cp-membertier-pricelabel">{{sub.priceLabel}}</span>
-                                            <span class="gh-cp-membertier-renewal">{{sub.validityDetails}}</span>
+                                        <div style="margin-left: 16px; flex-grow: 1;">
+                                            <h3 class="gh-membertier-name" data-test-text="tier-name" style="align-items:center !important; justify-content:flex-start !important;">
+                                                {{tier.name}}
+                                                {{#if (eq sub.status "canceled")}}
+                                                    <span class="gh-badge archived" data-test-text="member-subscription-status">Canceled</span>
+                                                {{else if sub.cancel_at_period_end}}
+                                                    <span class="gh-badge archived" data-test-text="member-subscription-status">Canceled</span>
+                                                {{else if sub.compExpiry}}
+                                                    <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
+                                                {{else if sub.trialUntil}}
+                                                    <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
+                                                {{else}}
+                                                    <span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
+                                                {{/if}}
+                                                {{#if (gt tier.subscriptions.length 1)}}
+                                                    <span class="gh-membertier-subcount">{{tier.subscriptions.length}} subscriptions</span>
+                                                {{/if}}
+                                            </h3>
+                                            <div>
+                                                <span class="gh-cp-membertier-pricelabel">{{sub.priceLabel}}</span>
+                                                <span class="gh-cp-membertier-renewal">{{sub.validityDetails}}</span>
+                                            </div>
+                                            <Member::SubscriptionDetailBox @sub={{sub}} @index={{index}} />
                                         </div>
-                                        <Member::SubscriptionDetailBox @sub={{sub}} @index={{index}} />
-                                    </div>
-                                    {{#if sub.isComplimentary}}
-                                        <span class="action-menu">
-                                            <GhDropdownButton
-                                                @dropdownName="subscription-menu-complimentary"
-                                                @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
-                                                @title="Actions"
-                                                data-test-button="subscription-actions"
-                                            >
-                                                <span>
-                                                    {{svg-jar "dotdotdot"}}
-                                                    <span class="hidden">Subscription menu</span>
-                                                </span>
-                                            </GhDropdownButton>
-                                            <GhDropdown
-                                                @name="subscription-menu-complimentary"
-                                                @tagName="ul"
-                                                @classNames="tier-actions-menu dropdown-menu dropdown-align-right"
-                                            >
-                                                <li>
-                                                    <button
-                                                        type="button"
-                                                        {{on "click" (fn this.removeComplimentary (or tier.id tier.tier_id))}}
-                                                        data-test-button="remove-complimentary"
-                                                    >
-                                                        <span class="red">Remove complimentary subscription</span>
-                                                    </button>
-                                                </li>
-                                            </GhDropdown>
-                                        </span>
-                                    {{else}}
-                                        <span class="action-menu">
-                                            <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
-                                                <span>
-                                                    {{svg-jar "dotdotdot"}}
-                                                    <span class="hidden">Subscription menu</span>
-                                                </span>
-                                            </GhDropdownButton>
-                                            <GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
-                                                <li>
-                                                    <a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener noreferrer">
-                                                        View Stripe customer
-                                                    </a>
-                                                </li>
-                                                <li class="divider"></li>
-                                                <li>
-                                                    <a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener noreferrer">
-                                                        View Stripe subscription
-                                                    </a>
-                                                </li>
-                                                <li>
-                                                {{#if (not-eq sub.status "canceled")}}
-                                                    {{#if sub.cancel_at_period_end}}
-                                                        <button type="button" {{on "click" (fn this.continueSubscription sub.id)}}>
-                                                            <span>Continue subscription</span>
-                                                        </button>
-                                                    {{else}}
-                                                        <button type="button" {{on "click" (fn this.cancelSubscription sub.id)}}>
-                                                            <span class="red">Cancel subscription</span>
+                                        {{#if sub.isComplimentary}}
+                                            <span class="action-menu">
+                                                <GhDropdownButton
+                                                    @dropdownName="subscription-menu-complimentary"
+                                                    @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
+                                                    @title="Actions"
+                                                    data-test-button="subscription-actions"
+                                                >
+                                                    <span>
+                                                        {{svg-jar "dotdotdot"}}
+                                                        <span class="hidden">Subscription menu</span>
+                                                    </span>
+                                                </GhDropdownButton>
+                                                <GhDropdown
+                                                    @name="subscription-menu-complimentary"
+                                                    @tagName="ul"
+                                                    @classNames="tier-actions-menu dropdown-menu dropdown-align-right"
+                                                >
+                                                    <li>
+                                                        <button
+                                                            type="button"
+                                                            {{on "click" (fn this.removeComplimentary (or tier.id tier.tier_id))}}
+                                                            data-test-button="remove-complimentary"
+                                                        >
+                                                            <span class="red">Remove complimentary subscription</span>
                                                         </button>
+                                                    </li>
+                                                </GhDropdown>
+                                            </span>
+                                        {{else}}
+                                            <span class="action-menu">
+                                                <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
+                                                    <span>
+                                                        {{svg-jar "dotdotdot"}}
+                                                        <span class="hidden">Subscription menu</span>
+                                                    </span>
+                                                </GhDropdownButton>
+                                                <GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
+                                                    <li>
+                                                        <a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener noreferrer">
+                                                            View Stripe customer
+                                                        </a>
+                                                    </li>
+                                                    <li class="divider"></li>
+                                                    <li>
+                                                        <a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener noreferrer">
+                                                            View Stripe subscription
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                    {{#if (not-eq sub.status "canceled")}}
+                                                        {{#if sub.cancel_at_period_end}}
+                                                            <button type="button" {{on "click" (fn this.continueSubscription sub.id)}}>
+                                                                <span>Continue subscription</span>
+                                                            </button>
+                                                        {{else}}
+                                                            <button type="button" {{on "click" (fn this.cancelSubscription sub.id)}}>
+                                                                <span class="red">Cancel subscription</span>
+                                                            </button>
+                                                        {{/if}}
                                                     {{/if}}
-                                                {{/if}}
-                                                </li>
-                                            </GhDropdown>
-                                        </span>
-                                    {{/if}}
-                                </div>
-                            {{/each}}
+                                                    </li>
+                                                </GhDropdown>
+                                            </span>
+                                        {{/if}}
+                                    </div>
+                                {{/each}}
 
-                            {{#if (eq tier.subscriptions.length 0)}}
-                                <div class="gh-membertier-subscription">
-                                    <div>
+                                {{#if (eq tier.subscriptions.length 0)}}
+                                    <div class="gh-membertier-subscription">
                                         <div>
-                                            <span class="gh-cp-membertier-pricelabel">Complimentary</span>
-                                            <span class="gh-badge active">Active</span>
+                                            <div>
+                                                <span class="gh-cp-membertier-pricelabel">Complimentary</span>
+                                                <span class="gh-badge active">Active</span>
+                                            </div>
+                                            <div class="gh-membertier-created">Created on</div>
                                         </div>
-                                        <div class="gh-membertier-created">Created on</div>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <div class="gh-tier-card-price">
-                                            <div class="flex items-start">
-                                                <span class="currency-symbol">$</span>
-                                                <span class="amount">0</span>
+                                        <div class="flex items-center">
+                                            <div class="gh-tier-card-price">
+                                                <div class="flex items-start">
+                                                    <span class="currency-symbol">$</span>
+                                                    <span class="amount">0</span>
+                                                </div>
+                                                <div class="period">yearly</div>
                                             </div>
-                                            <div class="period">yearly</div>
+                                            <span class="action-menu">
+                                                <GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
+                                                    <span>
+                                                        {{svg-jar "dotdotdot"}}
+                                                        <span class="hidden">Subscription menu</span>
+                                                    </span>
+                                                </GhDropdownButton>
+                                                <GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
+                                                    <li>
+                                                        <button type="button" {{on "click" (fn this.removeComplimentary tier.id)}}>
+                                                            <span class="red">Remove complimentary subscription</span>
+                                                        </button>
+                                                    </li>
+                                                </GhDropdown>
+                                            </span>
                                         </div>
-                                        <span class="action-menu">
-                                            <GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
-                                                <span>
-                                                    {{svg-jar "dotdotdot"}}
-                                                    <span class="hidden">Subscription menu</span>
-                                                </span>
-                                            </GhDropdownButton>
-                                            <GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
-                                                <li>
-                                                    <button type="button" {{on "click" (fn this.removeComplimentary tier.id)}}>
-                                                        <span class="red">Remove complimentary subscription</span>
-                                                    </button>
-                                                </li>
-                                            </GhDropdown>
-                                        </span>
                                     </div>
-                                </div>
-                            {{/if}}
+                                {{/if}}
+                            {{/each}}
                         </div>
                     </div>
-                {{/each}}
+                {{/if}}
 
                 {{#if (and this.tiers this.isAddComplimentaryAllowed)}}
                     <div class="gh-membertier-list-footer {{if this.isCreatingComplimentary "min-height" ""}}">
diff --git a/ghost/admin/app/components/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs
index a0da2d46d4e..e6c43261fbe 100644
--- a/ghost/admin/app/components/member/activity-feed.hbs
+++ b/ghost/admin/app/components/member/activity-feed.hbs
@@ -1,14 +1,13 @@
 <h4 class="gh-main-section-header small bn">Activity</h4>
 {{#if @member.isNew}}
-    <div class="gh-main-section-content grey">
+    <div class="gh-main-section-content bordered">
         <div class="gh-member-feed gh-member-feed-no-data">
             <Member::ActivityFeedEmpty />
         </div>
     </div>
 {{else}}
     {{#let (members-event-fetcher filter=(members-event-filter member=@member.id excludedEvents=this.excludedEventTypes) pageSize=5 memberId=@member.id) as |eventsFetcher|}}
-        <div class="gh-main-section-content grey {{if eventsFetcher.data "" "mt8"}}">
-            <div class="gh-member-feed {{if eventsFetcher.data "" "gh-member-feed-no-data"}}" ...attributes>
+        <div class="gh-main-section-content bordered {{if eventsFetcher.data "" "mt8"}}" ...attributes>
                 <div class="flex-auto flex flex-column items-stretch {{if eventsFetcher.data "justify-between" "h-100 justify-center"}}">
                     <div>
                         {{#if eventsFetcher.isLoading}}
@@ -66,7 +65,6 @@
                         {{/if}}
                     </div>
                 </div>
-            </div>
         </div>
     {{/let}}
 {{/if}}
diff --git a/ghost/admin/app/components/member/newsletter-preference.hbs b/ghost/admin/app/components/member/newsletter-preference.hbs
index 5050b5ba7c0..05770ff9d77 100644
--- a/ghost/admin/app/components/member/newsletter-preference.hbs
+++ b/ghost/admin/app/components/member/newsletter-preference.hbs
@@ -1,28 +1,26 @@
 <h4 class="gh-main-section-header small bn">Newsletters</h4>
-<div class="gh-main-section-content grey {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
+<div class="gh-main-section-content bordered {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
     {{#unless this.suppressionData.suppressed}}
-        <div class="gh-member-newsletters">
-            {{#each this.newsletters as |newsletter|}}
-                <div class="gh-member-newsletter-row" data-test-member-settings-switch>
-                    <div>
-                        <h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
-                    </div>
-                    <div class="for-switch xs {{if this.suppressionData.suppressed 'disabled'}}">
-                        <label class="switch" for={{newsletter.forId}}>
-                            <Input
-                                @checked={{newsletter.subscribed}}
-                                @type="checkbox"
-                                id={{newsletter.forId}}
-                                name="subscribed"
-                                data-test-checkbox="member-subscribed"
-                                {{on "click" (fn this.updateNewsletterPreference newsletter)}}
-                            />
-                            <span class="input-toggle-component"></span>
-                        </label>
-                    </div>
+        {{#each this.newsletters as |newsletter|}}
+            <div class="gh-member-newsletter-row" data-test-member-settings-switch>
+                <div>
+                    <h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
                 </div>
-            {{/each}}
-        </div>
+                <div class="for-switch xs {{if this.suppressionData.suppressed 'disabled'}}">
+                    <label class="switch" for={{newsletter.forId}}>
+                        <Input
+                            @checked={{newsletter.subscribed}}
+                            @type="checkbox"
+                            id={{newsletter.forId}}
+                            name="subscribed"
+                            data-test-checkbox="member-subscribed"
+                            {{on "click" (fn this.updateNewsletterPreference newsletter)}}
+                        />
+                        <span class="input-toggle-component"></span>
+                    </label>
+                </div>
+            </div>
+        {{/each}}
     {{/unless}}
 
     {{#if this.suppressionData.suppressed}}
diff --git a/ghost/admin/app/components/tags/tag-form.hbs b/ghost/admin/app/components/tags/tag-form.hbs
index f82a76c5e7a..18f5339d214 100644
--- a/ghost/admin/app/components/tags/tag-form.hbs
+++ b/ghost/admin/app/components/tags/tag-form.hbs
@@ -1,102 +1,104 @@
-<div class="gh-main-section columns-2">
-    <div>
-        <div class="gh-tag-settings-multiprop">
-            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
-                <label for="tag-name">Name</label>
-                <input
-                    type="text"
-                    class="gh-input-admin-x"
-                    id="tag-name"
-                    name="name"
-                    value={{@tag.name}}
-                    {{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
-                    {{on "blur" (fn this.validateTagProperty "name")}}
-                    data-test-input="tag-name"
-                />
-                <span class="error">
-                    <GhErrorMessage @errors={{@tag.errors}} @property="name" />
-                    <GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
-                </span>
-                <p class="description">
-                    Start with # to create internal tags.
-                    <a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
-                </p>
-            </GhFormGroup>
-
-            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
-                <label for="accent-color">Color</label>
-                <div class="input-color">
+<div class="gh-main-section">
+    <div class="gh-main-section-content bordered columns-2">
+        <div>
+            <div class="gh-tag-settings-multiprop">
+                <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
+                    <label for="tag-name">Name</label>
                     <input
                         type="text"
-                        placeholder="15171A"
-                        name="accent-color"
-                        autocorrect="off"
-                        maxlength="6"
-                        value={{this.accentColor}}
-                        class="gh-input-admin-x"
-                        {{on "input" (perform this.debounceUpdateAccentColorTask)}}
-                        {{on "blur" this.updateAccentColor}}
-                        aria-label="Accent color hex value"
-                        data-test-input="accentColor"
+                        class="gh-input-x"
+                        id="tag-name"
+                        name="name"
+                        value={{@tag.name}}
+                        {{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
+                        {{on "blur" (fn this.validateTagProperty "name")}}
+                        data-test-input="tag-name"
                     />
-                    <div
-                        class="color-box-container"
-                        style={{this.accentColorBgStyle}}
-                    >
+                    <span class="error">
+                        <GhErrorMessage @errors={{@tag.errors}} @property="name" />
+                        <GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
+                    </span>
+                    <p class="description">
+                        Start with # to create internal tags.
+                        <a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
+                    </p>
+                </GhFormGroup>
+
+                <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
+                    <label for="accent-color">Color</label>
+                    <div class="input-color">
                         <input
-                            type="color"
+                            type="text"
+                            placeholder="15171A"
                             name="accent-color"
-                            class="color-picker"
-                            value={{this.accentColorPickerValue}}
+                            autocorrect="off"
+                            maxlength="6"
+                            value={{this.accentColor}}
+                            class="gh-input-x"
                             {{on "input" (perform this.debounceUpdateAccentColorTask)}}
-                            aria-label="Accent color picker"
+                            {{on "blur" this.updateAccentColor}}
+                            aria-label="Accent color hex value"
+                            data-test-input="accentColor"
+                        />
+                        <div
+                            class="color-box-container"
+                            style={{this.accentColorBgStyle}}
                         >
+                            <input
+                                type="color"
+                                name="accent-color"
+                                class="color-picker"
+                                value={{this.accentColorPickerValue}}
+                                {{on "input" (perform this.debounceUpdateAccentColorTask)}}
+                                aria-label="Accent color picker"
+                            >
+                        </div>
                     </div>
-                </div>
-            </GhFormGroup>
-        </div>
+                </GhFormGroup>
+            </div>
 
-        <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
-            <label for="tag-slug">Slug</label>
-            <input
-                type="text"
-                value={{@tag.slug}}
-                id="tag-slug"
-                name="slug"
-                class="gh-input-admin-x"
-                {{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
-                {{on "blur" (fn this.validateTagProperty "slug")}}
-                data-test-input="tag-slug"
-            />
-            <GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
-            <GhErrorMessage @errors={{@tag.errors}} @property="slug" />
-        </GhFormGroup>
+            <GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
+                <label for="tag-slug">Slug</label>
+                <input
+                    type="text"
+                    value={{@tag.slug}}
+                    id="tag-slug"
+                    name="slug"
+                    class="gh-input-x"
+                    {{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
+                    {{on "blur" (fn this.validateTagProperty "slug")}}
+                    data-test-input="tag-slug"
+                />
+                <GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
+                <GhErrorMessage @errors={{@tag.errors}} @property="slug" />
+            </GhFormGroup>
 
-        <GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
-            <label for="tag-description">Description</label>
-            <textarea
-                id="tag-description"
-                name="description"
-                class="gh-input-admin-x gh-tag-details-textarea"
-                {{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
-                {{on "blur" (fn this.validateTagProperty "description")}}
-                data-test-input="tag-description"
-            >{{@tag.description}}</textarea>
+            <GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
+                <label for="tag-description">Description</label>
+                <textarea
+                    id="tag-description"
+                    name="description"
+                    class="gh-input-x gh-tag-details-textarea"
+                    {{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
+                    {{on "blur" (fn this.validateTagProperty "description")}}
+                    data-test-input="tag-description"
+                >{{@tag.description}}</textarea>
 
-            <GhErrorMessage @errors={{@tag.errors}} @property="description" />
-            <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
+                <GhErrorMessage @errors={{@tag.errors}} @property="description" />
+                <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
+            </GhFormGroup>
+        </div>
+        <GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
+            <label for="tag-image">Tag image</label>
+            <GhImageUploaderWithPreview
+                @image={{@tag.featureImage}}
+                @text="Upload tag image"
+                @allowUnsplash={{true}}
+                @update={{fn this.setTagProperty "featureImage"}}
+                @remove={{fn this.setTagProperty "featureImage" ""}}
+            />
         </GhFormGroup>
     </div>
-    <GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
-        <label for="tag-image">Tag image</label>
-        <GhImageUploaderWithPreview
-            @image={{@tag.featureImage}}
-            @text="Upload tag image"
-            @allowUnsplash={{true}}
-            @update={{fn this.setTagProperty "featureImage"}}
-            @remove={{fn this.setTagProperty "featureImage" ""}}
-        />
-    </GhFormGroup>
 </div>
 
 <section class="gh-expandable">
@@ -119,7 +121,7 @@
                             <input
                                 id="meta-title"
                                 name="metaTitle"
-                                class="gh-input-admin-x"
+                                class="gh-input-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.metaTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
@@ -134,7 +136,7 @@
                             <textarea
                                 id="meta-description"
                                 name="metaDescription"
-                                class="gh-input-admin-x gh-tag-details-textarea"
+                                class="gh-input-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "metaDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "metaDescription")}}
@@ -148,7 +150,7 @@
                             <input
                                 id="canonical-url"
                                 name="canonicalUrl"
-                                class="gh-input-admin-x"
+                                class="gh-input-x"
                                 value={{@tag.canonicalUrl}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
                                 {{on "blur" this.validateCanonicalUrl}}
@@ -208,7 +210,7 @@
                                 type="text"
                                 id="twitter-title"
                                 name="twitterTitle"
-                                class="gh-input-admin-x"
+                                class="gh-input-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.twitterTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
@@ -223,7 +225,7 @@
                             <textarea
                                 id="twitter-description"
                                 name="twitterDescription"
-                                class="gh-input-admin-x gh-tag-details-textarea"
+                                class="gh-input-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "twitterDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "twitterDescription")}}
@@ -305,7 +307,7 @@
                                 type="text"
                                 id="og-title"
                                 name="ogTitle"
-                                class="gh-input-admin-x"
+                                class="gh-input-x"
                                 placeholder={{@tag.name}}
                                 value={{@tag.ogTitle}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
@@ -320,7 +322,7 @@
                             <textarea
                                 id="og-description"
                                 name="ogDescription"
-                                class="gh-input-admin-x gh-tag-details-textarea"
+                                class="gh-input-x gh-tag-details-textarea"
                                 placeholder={{@tag.description}}
                                 {{on "input" (pick "target.value" (fn this.setTagProperty "ogDescription"))}}
                                 {{on "blur" (fn this.validateTagProperty "ogDescription")}}
diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index 4479ca6ed22..127868bf5c6 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -1,4 +1,4 @@
-.ember-power-select-trigger {
+.ember-power-select-trigger:not(.gh-input-x) {
     padding: 0 16px 0 8px;
     border: var(--input-border);
     border-radius: var(--border-radius);
@@ -16,7 +16,7 @@
     padding: 0 6px 0 8px;
 }
 
-.ember-power-select-trigger:focus, .ember-power-select-trigger--active {
+.ember-power-select-trigger:focus, .ember-power-select-trigger--active:not(.gh-input-x) {
     border: var(--input-border);
 }
 
@@ -40,7 +40,7 @@
 }
 
 .ember-basic-dropdown--opened > .ember-power-select-trigger,
-.ember-power-select-trigger[aria-expanded="true"],
+.ember-power-select-trigger[aria-expanded="true"]:not(.gh-input-x),
 .ember-power-select-search input {
     outline: 0;
     border-color: var(--input-border-color);
@@ -69,7 +69,7 @@
     border-top: none;
 }
 
-.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"] {
+.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"]:not(.gh-input-x) {
     border-radius: var(--border-radius);
 }
 
@@ -223,7 +223,7 @@
 }
 
 /* Multiple */
-.ember-power-select-multiple-trigger {
+.ember-power-select-multiple-trigger:not(.gh-input-x) {
     background: #fff;
     padding: 4px;
     border: var(--input-border);
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 85db1caa16b..041622f333c 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1306,7 +1306,8 @@
 .gh-main-section-content.bordered {
     padding: 24px;
     border: 1px solid var(--whitegrey);
-    border-radius: 3px;
+    border-radius: 12px;
+    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
 }
 
 .gh-main-section-content.columns-2 {
@@ -1439,11 +1440,8 @@
 }
 
 .gh-main-content-card {
-    border-radius: 3px;
-    padding: 24px;
     background: var(--main-bg-color);
     margin-bottom: 12px;
-    box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
 }
 
 .gh-main-content-card:last-of-type {
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index bc2ca2875e1..ad2fcb8696c 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -555,8 +555,10 @@ p.gh-members-list-email {
 .gh-members-help .gh-main-section-content {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-gap: 32px;
-    padding: 32px;
+    grid-gap: 24px;
+    padding: 0;
+    border: none;
+    box-shadow: none;
 }
 
 @media (max-width: 1080px) {
@@ -570,13 +572,14 @@ p.gh-members-list-email {
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
+    padding: 24px;
     background: var(--white);
-    border-radius: 3px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
+    border: 1px solid var(--whitegrey);
     color: var(--midgrey);
     font-size: 1.4rem;
-    padding: 32px;
-    transition: all 0.3s ease-in-out;
+    border-radius: 12px;
+    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
+    transition: all 0.15s ease-in-out;
 }
 
 .gh-members-help-card p {
@@ -614,14 +617,11 @@ p.gh-members-list-email {
 
 
 .gh-members-help-card:hover {
-    box-shadow:
-        0px 54px 80px rgba(0, 0, 0, 0.07),
-        0px 19.7109px 29.2013px rgba(0, 0, 0, 0.0482987),
-        0px 9.56927px 14.1767px rgba(0, 0, 0, 0.0389404),
-        0px 4.69103px 6.94968px rgba(0, 0, 0, 0.0310596),
-        0px 1.85484px 2.74791px rgba(0, 0, 0, 0.0217013);
-    transition: all 0.3s ease-in-out;
-    transform: translateY(-4px);
+    box-shadow: 
+        0 0 1px rgba(0,0,0,.12), 
+        0 1px 6px rgba(0,0,0,.03), 
+        0 8px 10px -8px rgba(0,0,0,.1);
+    transition: all 0.15s ease-in-out;
 }
 
 .gh-members-help-content {
@@ -2545,10 +2545,6 @@ a.gh-members-emailpreview-subscription-link {
     grid-row-gap: 24px;
 }
 
-.gh-member-settings .gh-member-tier-container + .gh-member-tier-container {
-    padding-top: 0 !important;
-}
-
 .gh-cp-membertier {
     margin-bottom: 0 !important;
 }
@@ -2561,10 +2557,6 @@ a.gh-members-emailpreview-subscription-link {
     margin-bottom: 2px !important;
 }
 
-.gh-cp-membertier.multiple-subs .gh-membertier-name {
-    margin-bottom: 8px !important;
-}
-
 .gh-membertier-subcount {
     font-size: 1.25rem;
     font-weight: 400;
@@ -2585,12 +2577,6 @@ a.gh-members-emailpreview-subscription-link {
     font-size: 1.2rem;
 }
 
-.gh-cp-membertier.multiple-subs .gh-membertier-subscription {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--whitegrey);
-}
-
 .gh-membertier-details p {
     color: var(--darkgrey-l1);
 }
@@ -2717,7 +2703,7 @@ a.gh-members-emailpreview-subscription-link {
     border: 1px solid var(--whitegrey);
 }
 
-.gh-cp-membertier:not(.multiple-subs) .gh-membertier-price-container {
+.gh-cp-membertier .gh-membertier-price-container {
     margin-top: -19px;
 }
 
@@ -2725,7 +2711,7 @@ a.gh-members-emailpreview-subscription-link {
     padding: 10px 18px;
 }
 
-.gh-cp-membertier:not(.multiple-subs) .gh-tier-card-price {
+.gh-cp-membertier .gh-tier-card-price {
     padding: 15px 18px;
 }
 
@@ -2885,7 +2871,7 @@ a.gh-members-emailpreview-subscription-link {
 
 .gh-cp-membertier-attribution .gh-tier-card-price {
     border: none !important;
-    background: var(--main-color-content-greybg);
+    background: var(--grey-100);
     padding: 20px 10px !important;
     border-radius: 6px;
 }
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 64021d1fbd0..55bab24586e 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -213,29 +213,6 @@ select {
     -webkit-appearance: none;
 }
 
-.gh-input-admin-x {
-    width: 100%;
-    height: 38px;
-    padding: 4px 12px;
-    font-size: 1.4rem;
-    color: var(--black);
-    background-color: var(--grey-150);
-    border: 1px solid transparent;
-    border-radius: 8px;
-}
-
-.gh-input-admin-x:focus,
-.gh-input-admin-x:focus-visible {
-    background-color: var(--white);
-    border: 1px solid var(--green);
-    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
-    outline: none;
-}
-
-textarea.gh-input-admin-x {
-    padding-block: 8px;
-}
-
 .gh-select,
 select {
     cursor: pointer;
@@ -303,6 +280,29 @@ textarea {
     color: var(--midgrey);
 }
 
+.gh-input-x {
+    width: 100%;
+    height: 38px;
+    padding: 4px 12px;
+    font-size: 1.4rem;
+    color: var(--black);
+    background-color: var(--grey-150);
+    border: 1px solid transparent;
+    border-radius: 8px;
+}
+
+.gh-input-x:focus,
+.gh-input-x:focus-visible {
+    background-color: var(--white);
+    border: 1px solid var(--green);
+    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    outline: none;
+}
+
+textarea.gh-input-x {
+    padding-block: 8px;
+}
+
 
 /* Radio / Checkboxes
 /* ---------------------------------------------------------- */
diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs
index c965f8389be..9dbe4cdbe3a 100644
--- a/ghost/admin/app/templates/members.hbs
+++ b/ghost/admin/app/templates/members.hbs
@@ -180,7 +180,7 @@
                 <div class="gh-main-section gh-members-help">
                     <h2 class="gh-main-section-header small bn">Get started with memberships</h2>
                     <div class="gh-main-section-block">
-                        <div class="gh-main-section-content grey">
+                        <div class="gh-main-section-content bordered">
                             <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
                                 <div class="gh-members-help-content">
                                     <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>

From 268df9fa3cc399af7f0a3d4ca818e7c93605ac8c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 8 Jan 2025 11:44:08 +0100
Subject: [PATCH 5/7] Updated acceptance test for member subscription details

Ref https://linear.app/ghost/issue/DES-800/toplevelcomponent
- The test would fail because all subscriptions are now contained in one block rather than multiple.
---
 .../tests/acceptance/members/details-test.js  | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ghost/admin/tests/acceptance/members/details-test.js b/ghost/admin/tests/acceptance/members/details-test.js
index 4a4f6891a3f..6bdbfe32059 100644
--- a/ghost/admin/tests/acceptance/members/details-test.js
+++ b/ghost/admin/tests/acceptance/members/details-test.js
@@ -27,8 +27,8 @@ describe('Acceptance: Member details', function () {
         // add a default tier that complimentary plans can be assigned to
         tier = this.server.create('tier', {
             id: '6213b3f6cb39ebdb03ebd810',
-            name: 'Ghost Subscription',
-            slug: 'ghost-subscription',
+            name: 'Supporter',
+            slug: 'supporter',
             created_at: '2022-02-21T16:47:02.000Z',
             updated_at: '2022-03-03T15:37:02.000Z',
             description: null,
@@ -83,7 +83,7 @@ describe('Acceptance: Member details', function () {
                         currency: 'USD',
                         tier: {
                             id: 'prod_LFmAAmCnnbzrvL',
-                            name: 'Ghost Subscription',
+                            name: 'Supporter',
                             tier_id: tier.id
                         }
                     },
@@ -120,7 +120,7 @@ describe('Acceptance: Member details', function () {
                         currency: 'USD',
                         tier: {
                             id: 'prod_LFmAAmCnnbzrvL',
-                            name: 'Ghost Subscription',
+                            name: 'Supporter',
                             tier_id: tier.id
                         }
                     },
@@ -177,7 +177,7 @@ describe('Acceptance: Member details', function () {
                         currency: 'USD',
                         tier: {
                             id: 'prod_LFmAAmCnnbzrvL',
-                            name: 'Ghost Subscription',
+                            name: 'Supporter',
                             tier_id: '6213b3f6cb39ebdb03ebd810'
                         }
                     },
@@ -254,8 +254,8 @@ describe('Acceptance: Member details', function () {
 
     it('handles multiple tiers', async function () {
         const tier2 = this.server.create('tier', {
-            name: 'Second tier',
-            slug: 'second-tier',
+            name: 'Superfan',
+            slug: 'superfan',
             created_at: '2022-02-21T16:47:02.000Z',
             updated_at: '2022-03-03T15:37:02.000Z',
             description: null,
@@ -274,17 +274,15 @@ describe('Acceptance: Member details', function () {
 
         await visit(`/members/${member.id}`);
 
-        // all tiers and subscriptions are shown
-        expect(findAll('[data-test-tier]').length, '# of tier blocks').to.equal(2);
+        // all subscriptions are shown
+        expect(findAll('[data-test-subscription]').length, '# of subscriptions shown').to.equal(3);
 
-        const p1 = `[data-test-tier="${tier.id}"]`;
-        const p2 = `[data-test-tier="${tier2.id}"]`;
-
-        expect(find(`${p1} [data-test-text="tier-name"]`)).to.contain.text('Ghost Subscription');
-        expect(findAll(`${p1} [data-test-subscription]`).length, '# of tier 1 subscription blocks').to.equal(2);
-
-        expect(find(`${p2} [data-test-text="tier-name"]`)).to.contain.text('Second tier');
-        expect(findAll(`${p2} [data-test-subscription]`).length, '# of tier 2 subscription blocks').to.equal(1);
+        // verify correct number of occurrences for each tier name
+        const supporterCount = findAll('[data-test-text="tier-name"]').filter(el => el.textContent.includes('Supporter')).length;
+        const superfanCount = findAll('[data-test-text="tier-name"]').filter(el => el.textContent.includes('Superfan')).length;
+        
+        expect(supporterCount, '# of Supporter tiers').to.equal(2);
+        expect(superfanCount, '# of Superfan tiers').to.equal(1);
 
         // can add complimentary
         expect(findAll('[data-test-button="add-complimentary"]').length, '# of add-complimentary buttons').to.equal(1);
@@ -292,6 +290,8 @@ describe('Acceptance: Member details', function () {
         await click(`[data-test-tier-option="${tier2.id}"]`);
         await click('[data-test-button="save-comp-tier"]');
 
-        expect(findAll(`${p2} [data-test-subscription]`).length, '# of tier 2 subscription blocks after comp added').to.equal(2);
+        expect(findAll('[data-test-subscription]').length, '# of tiers after comp added').to.equal(4);
+        expect(findAll('[data-test-text="tier-name"]').filter(el => el.textContent.includes('Supporter')).length, '# of Supporter tiers after comp added').to.equal(2);
+        expect(findAll('[data-test-text="tier-name"]').filter(el => el.textContent.includes('Superfan')).length, '# of Superfan tiers after comp added').to.equal(2);
     });
 });

From 937c70d7708936cc664f59e5c128f1cdfdc4e564 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 8 Jan 2025 15:09:42 +0100
Subject: [PATCH 6/7] Refined member and tag page further

Ref https://linear.app/ghost/issue/DES-800/toplevelcomponent
- Tweaked border colors and typography for consistency
---
 .../components/gh-member-settings-form.hbs    |  4 +-
 .../member/newsletter-preference.hbs          |  2 +-
 .../member/subscription-detail-box.hbs        |  2 +-
 ghost/admin/app/styles/layouts/main.css       | 10 ++---
 ghost/admin/app/styles/layouts/members.css    | 38 ++++++++++++-------
 ghost/admin/app/styles/layouts/tags.css       |  4 +-
 ghost/admin/app/styles/layouts/tiers.css      |  2 +-
 ghost/admin/app/styles/patterns/forms.css     |  2 +-
 .../public/assets/icons/arrow-top-right.svg   |  6 +--
 9 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index 7a56dbf3e00..5b90952a004 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -54,7 +54,7 @@
                     </GhFormGroup>
 
                     <GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="note" class="mb0 gh-member-note">
-                        <label for="member-note">Note <span class="midgrey-d1 fw4">(not visible to member)</span></label>
+                        <label for="member-note">Note <span class="middarkgrey fw4">(not visible to member)</span></label>
                         <GhTextarea
                             @id="member-note"
                             @name="note"
@@ -123,7 +123,7 @@
                                             </div>
                                             <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
                                         </div>
-                                        <div style="margin-left: 16px; flex-grow: 1;">
+                                        <div class="gh-cp-membertier-container">
                                             <h3 class="gh-membertier-name" data-test-text="tier-name" style="align-items:center !important; justify-content:flex-start !important;">
                                                 {{tier.name}}
                                                 {{#if (eq sub.status "canceled")}}
diff --git a/ghost/admin/app/components/member/newsletter-preference.hbs b/ghost/admin/app/components/member/newsletter-preference.hbs
index 05770ff9d77..063217a173d 100644
--- a/ghost/admin/app/components/member/newsletter-preference.hbs
+++ b/ghost/admin/app/components/member/newsletter-preference.hbs
@@ -48,7 +48,7 @@
             </p>
         </div>
     {{else}}
-        <div class="gh-member-newsletter-footer midgrey">
+        <div class="gh-member-newsletter-footer middarkgrey">
             If disabled, member will <em>not</em> receive newsletter emails
         </div>
     {{/if}}
diff --git a/ghost/admin/app/components/member/subscription-detail-box.hbs b/ghost/admin/app/components/member/subscription-detail-box.hbs
index 701479ae05e..09f4f5d4332 100644
--- a/ghost/admin/app/components/member/subscription-detail-box.hbs
+++ b/ghost/admin/app/components/member/subscription-detail-box.hbs
@@ -1,6 +1,6 @@
 <button type="button" class="flex pointer flex-row items-center gh-cp-membertier-details {{if this.showDetails "
     rotate"}}" {{on "click" this.toggleSubscriptionExpanded}} aria-label="Show details">
-    Subscription details {{svg-jar "arrow-right-stroke"}}
+    Details {{svg-jar "arrow-right-stroke"}}
 </button>
 <div class="gh-membertier-advanced {{unless this.showDetails " hide"}}" data-test-subscription={{@index}}>
     <div class="gh-membertier-details-container">
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 041622f333c..24303f7a631 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1305,9 +1305,8 @@
 
 .gh-main-section-content.bordered {
     padding: 24px;
-    border: 1px solid var(--whitegrey);
+    border: 1px solid var(--grey-250);
     border-radius: 12px;
-    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
 }
 
 .gh-main-section-content.columns-2 {
@@ -1341,8 +1340,8 @@
 /* Expandable options */
 .gh-expandable {
     background: var(--white);
-    border: 1px solid var(--whitegrey);
-    border-radius: var(--border-radius);
+    border: 1px solid var(--grey-250);
+    border-radius: 12px;
 }
 
 .gh-expandable.overflow-hidden {
@@ -1350,7 +1349,7 @@
 }
 
 .gh-expandable-block {
-    border-bottom: 1px solid var(--whitegrey);
+    border-bottom: 1px solid var(--grey-250);
     padding: 18px 24px;
     margin: 0;
 }
@@ -1392,6 +1391,7 @@
     background: var(--white);
     margin: 18px -24px -18px;
     padding: 0 24px;
+    border-radius: 0 0 12px 12px;
 }
 
 .gh-expandable-content .gh-main-section-block {
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index ad2fcb8696c..487878195c8 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1097,7 +1097,7 @@ textarea.gh-member-details-textarea {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid var(--whitegrey);
+    border-bottom: 1px solid var(--grey-250);
     padding: 16px 0;
 }
 
@@ -1141,7 +1141,7 @@ textarea.gh-member-details-textarea {
 }
 
 .gh-member-newsletter-footer {
-    font-size: 1.25rem;
+    font-size: 1.3rem;
     margin-top: 12px;
 }
 
@@ -1231,7 +1231,7 @@ textarea.gh-member-details-textarea {
 }
 
 .gh-member-feed-row {
-    border-bottom: 1px solid var(--whitegrey);
+    border-bottom: 1px solid var(--grey-250);
 }
 
 .gh-member-feed-detail {
@@ -2549,6 +2549,12 @@ a.gh-members-emailpreview-subscription-link {
     margin-bottom: 0 !important;
 }
 
+.gh-cp-membertier-container {
+    margin-top: 8px;
+    margin-left: 16px;
+    flex-grow: 1;
+}
+
 .gh-membertier-name {
     display: flex;
     justify-content: space-between;
@@ -2568,6 +2574,7 @@ a.gh-members-emailpreview-subscription-link {
 }
 
 .gh-cp-membertier-pricelabel {
+    font-size: 1.3rem;
     font-weight: 600;
 }
 
@@ -2733,19 +2740,20 @@ a.gh-members-emailpreview-subscription-link {
 
 .gh-cp-membertier-details {
     margin-top: 1px;
-    color: var(--middarkgrey);
+    color: var(--green-d1);
+    font-size: 1.3rem;
     font-weight: 500;
 }
 
 .gh-cp-membertier-details svg {
-    width: 10px;
+    width: 8px;
     margin-left: 4px;
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.15s ease-in-out;
 }
 
 .gh-cp-membertier-details svg path {
     stroke-width: 3px;
-    stroke: var(--middarkgrey);
+    stroke: var(--green-d1);
 }
 
 .gh-cp-membertier-details.rotate svg {
@@ -2857,7 +2865,7 @@ a.gh-members-emailpreview-subscription-link {
 
 .gh-cp-membertier-attribution .gh-tier-card-header:not(:first-child) {
     margin-top: 16px;
-    border-top: 1px solid var(--whitegrey);
+    border-top: 1px solid var(--grey-250);
     padding-top: 16px;
 }
 
@@ -2887,13 +2895,15 @@ a.gh-members-emailpreview-subscription-link {
 }
 
 .gh-cp-membertier-attribution .gh-membertier-name {
-    font-weight: bold !important;
-    font-size: 2rem !important;
+    font-weight: 600 !important;
+    font-size: 1.4rem !important;
 }
 
 .gh-cp-membertier-attribution .gh-badge {
     margin-bottom: -1px !important;
     margin-left: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
 }
 
 .gh-cp-membertier-attribution .action-menu {
@@ -2915,7 +2925,7 @@ a.gh-members-emailpreview-subscription-link {
 .gh-cp-membertier-attribution .gh-membertier-advanced {
     margin-top: 16px;
     padding-top: 16px;
-    border-top:1px solid #ECEEF0;
+    border-top:1px solid var(--grey-250);
     animation: fade-in .25s ease-in-out;
 }
 
@@ -2934,6 +2944,7 @@ a.gh-members-emailpreview-subscription-link {
 .gh-cp-membertier-attribution .gh-membertier-details p {
     margin: 0;
     color: var(--middarkgrey);
+    font-size: 1.3rem;
 }
 
 .gh-cp-membertier-attribution .gh-membertier-detail {
@@ -2941,7 +2952,7 @@ a.gh-members-emailpreview-subscription-link {
 }
 
 .gh-cp-membertier-attribution .gh-membertier-details span, .gh-cp-membertier-attribution .gh-membertier-details a {
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     font-weight: 500;
     color: var(--darkgrey);
 }
@@ -2961,7 +2972,8 @@ a.gh-members-emailpreview-subscription-link {
 }
 
 .gh-cp-membertier-attribution .gh-cp-membertier-renewal {
-    color: #7c8b9a;
+    color: var(--middarkgrey);
+    font-size: 1.3rem;
 }
 
 .gh-cp-membertier-attribution .gh-membertier-detail-timestamp {
diff --git a/ghost/admin/app/styles/layouts/tags.css b/ghost/admin/app/styles/layouts/tags.css
index 33d51948e03..4dea12aabc2 100644
--- a/ghost/admin/app/styles/layouts/tags.css
+++ b/ghost/admin/app/styles/layouts/tags.css
@@ -144,14 +144,14 @@ a.gh-tag-list-posts-count:hover {
     min-height: 240px;
     background: var(--white);
     color: var(--darkgrey);
-    border: 1px solid var(--whitegrey);
+    border: 1px solid var(--grey-500);
     border-radius: 4px;
     margin-bottom: 24px;
 }
 
 .gh-tag-setting-codeinjection .CodeMirror-gutters {
     background-color: var(--whitegrey-l2);
-    border-right: 1px solid var(--lightgrey);
+    border-right: 1px solid var(--grey-500);
 }
 
 .gh-tag-setting-codeinjection .CodeMirror-scroll {
diff --git a/ghost/admin/app/styles/layouts/tiers.css b/ghost/admin/app/styles/layouts/tiers.css
index 4fa7f757c5c..c031190166e 100644
--- a/ghost/admin/app/styles/layouts/tiers.css
+++ b/ghost/admin/app/styles/layouts/tiers.css
@@ -17,7 +17,7 @@
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
-    color: var(--midgrey);
+    color: var(--middarkgrey);
     padding: 12px 8px;
     border-radius: 3px;
     min-width: 90px;
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 55bab24586e..b31a6987748 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -99,7 +99,7 @@ input[type=number] {
 
 .form-group p {
     margin: 4px 0 0 0;
-    color: var(--midgrey-d1);
+    color: var(--middarkgrey);
     font-size: 1.25rem;
     font-weight: 400;
 }
diff --git a/ghost/admin/public/assets/icons/arrow-top-right.svg b/ghost/admin/public/assets/icons/arrow-top-right.svg
index 6d725636ff5..0977eecd248 100644
--- a/ghost/admin/public/assets/icons/arrow-top-right.svg
+++ b/ghost/admin/public/assets/icons/arrow-top-right.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <title>arrow-top-right</title>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.25 19.66 20.16 3.75m0 15v-15h-15"/>
-</svg>
\ No newline at end of file
+  <path d="M5 19L19 5M19 5V18.1992M19 5H5.80075" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 24c7080aafe1fb8467adb0078fd4f6d7a908bb8c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 9 Jan 2025 17:49:33 +0100
Subject: [PATCH 7/7] Updated dark mode styles on tag and member pages

Ref https://linear.app/ghost/issue/DES-800/toplevelcomponent
---
 ghost/admin/app/styles/app-dark.css        | 62 ++++++++++++++++++++--
 ghost/admin/app/styles/layouts/members.css |  2 +-
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 8436cfef407..239dde7153a 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -238,7 +238,7 @@ input:focus,
 }
 
 .gh-image-uploader-unsplash {
-    filter: invert(100%);
+    color: var(--grey-400);
 }
 
 /* Buttons
@@ -259,7 +259,7 @@ input:focus,
 }
 
 .gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-primary):not(.gh-btn-black):not(.gh-btn-text):not(.gh-btn-accent):not(.gh-btn-link):not(.gh-editor-preview-trigger) {
-    border: 1px solid var(--lightgrey);
+    border: 1px solid var(--grey-900);
     color: var(--black);
 }
 
@@ -740,11 +740,12 @@ input:focus,
 
 .gh-tag-setting-codeinjection .CodeMirror {
     background: var(--dark-main-bg-color);
+    border: 1px solid var(--grey-800);
 }
 
 .gh-tag-setting-codeinjection .CodeMirror-gutters {
     background-color: var(--whitegrey);
-    border-right: 1px solid var(--lightgrey);
+    border-right: 1px solid var(--grey-800);
 }
 
 /* Koenig styles */
@@ -937,6 +938,18 @@ input:focus,
 }
 
 /* Members activity */
+.gh-member-newsletter-row {
+    border-bottom: 1px solid var(--grey-900);
+}
+
+.gh-members-no-subs .lightgrey {
+    color: var(--grey-600);
+}
+
+.gh-cp-membertier-attribution .gh-tier-card-price {
+    background: var(--grey-900);
+}
+
 .gh-members-activity-icon svg path,
 .gh-member-feed-icon svg path {
     stroke: #fff;
@@ -947,7 +960,7 @@ input:focus,
 }
 
 .gh-member-feed-row {
-    border-bottom: 1px solid var(--lightgrey-l1);
+    border-bottom: 1px solid var(--grey-900);
 }
 
 .ghost-members-activity-event-prefix,
@@ -999,7 +1012,7 @@ input:focus,
 
 /* Member */
 .gh-cp-membertier-attribution .gh-membertier-advanced {
-    border-top: 1px solid rgb(23, 25, 28);
+    border-top: 1px solid var(--grey-900);
 }
 
 .gh-dashboard-metric.is-embedded {
@@ -1492,4 +1505,43 @@ Publish flow: Share modal */
 /* --------------------------------- */
 .gh-contentfilter-menu-trigger.bordered {
     border-color: var(--lightgrey);
+}
+
+/* ---------------------------------
+New form styles */
+
+
+.gh-input-x {
+    background-color: var(--grey-900);
+}
+
+.gh-input-x::placeholder {
+    color: var(--grey-700);
+}
+
+.gh-input-x:hover {
+    background-color: var(--grey-925);
+}
+
+.gh-input-x:focus,
+.gh-input-x:focus-visible {
+    background-color: var(--grey-950);
+    border: 1px solid var(--green);
+}
+
+.gh-tag-image-uploader .gh-image-uploader {
+    background-color: var(--grey-900);
+    border-color: transparent;
+}
+
+.gh-main-section-content.bordered {
+    border-color: var(--grey-925);
+}
+
+.gh-expandable {
+    border: 1px solid var(--grey-925);
+}
+
+.gh-expandable-block {
+    border-bottom: 1px solid var(--grey-925);
 }
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 487878195c8..5e32b0c4222 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -2919,7 +2919,7 @@ a.gh-members-emailpreview-subscription-link {
 .gh-cp-membertier-attribution span.archived {
     background: #e4e8ec;
     color: #7c8b9a;
-    font-size: 1.2rem;
+    font-size: 1.1rem;
 }
 
 .gh-cp-membertier-attribution .gh-membertier-advanced {