From 49655fa4510583c94cd55fc17a55f4437a2d7f81 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 4 Jun 2021 14:27:33 +0200
Subject: [PATCH] Updated 'Add product' modal styles

---
 .../gh-membership-products-alpha.hbs          |   1 +
 ghost/admin/app/components/modal-product.hbs  | 102 +++++++++---------
 ghost/admin/app/components/modal-product.js   |   2 +-
 ghost/admin/app/styles/layouts/products.css   |   6 +-
 ghost/admin/app/styles/patterns/forms.css     |   3 +-
 5 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/ghost/admin/app/components/gh-membership-products-alpha.hbs b/ghost/admin/app/components/gh-membership-products-alpha.hbs
index ac0e1214c1..bee08e99ca 100644
--- a/ghost/admin/app/components/gh-membership-products-alpha.hbs
+++ b/ghost/admin/app/components/gh-membership-products-alpha.hbs
@@ -1,3 +1,4 @@
+<label>Products</label>
 <div class="gh-product-cards">
 {{#each this.products as |product productIdx|}}
     <div class="gh-product-card">
diff --git a/ghost/admin/app/components/modal-product.hbs b/ghost/admin/app/components/modal-product.hbs
index e7fce91ee6..bdc7a74453 100644
--- a/ghost/admin/app/components/modal-product.hbs
+++ b/ghost/admin/app/components/modal-product.hbs
@@ -29,59 +29,57 @@
                     @class="gh-input" />
                 <GhErrorMessage @errors={{this.errors}} @property="description" />
             </GhFormGroup>
-            <div class="">
-                <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
-                    <div class="gh-settings-members-pricelabelcont">
-                        <label for="monthlyPrice">Prices</label>
-                        <span>–</span>
-                        <div>
-                            <span class="gh-setting-members-currency gh-select">
-                                <div class="gh-setting-members-currencylabel">
-                                    <span>{{this.currency}}</span>
-                                    {{svg-jar "arrow-down-small"}}
-                                </div>
-                                <OneWaySelect
-                                    @value={{this.selectedCurrency}}
-                                    id="currency"
-                                    name="currency"
-                                    @options={{readonly this.allCurrencies}}
-                                    @optionValuePath="value"
-                                    @optionLabelPath="label"
-                                    @update={{action "setCurrency"}}
-                                />
-                            </span>
-                        </div>
+            <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
+                <div class="gh-settings-members-pricelabelcont">
+                    <label for="monthlyPrice">Prices</label>
+                    <span>–</span>
+                    <div>
+                        <span class="gh-setting-members-currency gh-select">
+                            <div class="gh-setting-members-currencylabel">
+                                <span>{{this.currency}}</span>
+                                {{svg-jar "arrow-down-small"}}
+                            </div>
+                            <OneWaySelect
+                                @value={{this.selectedCurrency}}
+                                id="currency"
+                                name="currency"
+                                @options={{readonly this.allCurrencies}}
+                                @optionValuePath="value"
+                                @optionLabelPath="label"
+                                @update={{action "setCurrency"}}
+                            />
+                        </span>
                     </div>
-                    <div class="gh-setting-members-prices">
+                </div>
+                <div class="gh-setting-members-prices">
 
-                        <div class="gh-input-group">
-                            <GhTextInput
-                                @id="monthlyPrice"
-                                @value={{readonly this.stripeMonthlyAmount}}
-                                @type="number"
-                                @input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
-                                @focus-out={{action "validateStripePlans"}}
-                            />
-                            <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
-                        </div>
-                        <div class="gh-input-group">
-                            <GhTextInput
-                                @id="yearlyPrice"
-                                @value={{readonly this.stripeYearlyAmount}}
-                                @type="number"
-                                @input={{action (mut this.stripeYearlyAmount) value="target.value"}}
-                                @focus-out={{this.validateStripePlans}}
-                                @placeholder=''
-                                data-test-title-input={{true}}
-                            />
-                            <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
-                        </div>
+                    <div class="gh-input-group">
+                        <GhTextInput
+                            @id="monthlyPrice"
+                            @value={{readonly this.stripeMonthlyAmount}}
+                            @type="number"
+                            @input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
+                            @focus-out={{action "validateStripePlans"}}
+                        />
+                        <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
                     </div>
-                    {{#if this.stripePlanError}}
-                        <p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
-                    {{/if}}
-                </GhFormGroup>
-            </div>
+                    <div class="gh-input-group">
+                        <GhTextInput
+                            @id="yearlyPrice"
+                            @value={{readonly this.stripeYearlyAmount}}
+                            @type="number"
+                            @input={{action (mut this.stripeYearlyAmount) value="target.value"}}
+                            @focus-out={{this.validateStripePlans}}
+                            @placeholder=''
+                            data-test-title-input={{true}}
+                        />
+                        <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
+                    </div>
+                </div>
+                {{#if this.stripePlanError}}
+                    <p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
+                {{/if}}
+            </GhFormGroup>
         </div>
     </div>
 </div>
@@ -97,10 +95,10 @@
     >
         <span>Cancel</span>
     </button>
-    <GhTaskButton @buttonText="Save"
+    <GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add product"}}"
         @successText={{this.successText}}
         @task={{this.saveProduct}}
         @idleClass="gh-btn-primary"
-        @class="gh-btn gh-btn-black gh-btn-icon"
+        @class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
         data-test-button="save-product" />
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modal-product.js b/ghost/admin/app/components/modal-product.js
index 65a818d1a3..de36513c28 100644
--- a/ghost/admin/app/components/modal-product.js
+++ b/ghost/admin/app/components/modal-product.js
@@ -54,7 +54,7 @@ export default class ModalProductPrice extends ModalBase {
 
     get title() {
         if (this.isExistingProduct) {
-            return `Product - ${this.product.name || 'No Name'}`;
+            return `Edit product`;
         }
         return 'New Product';
     }
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index dd74993a26..53f0b4505c 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -50,7 +50,7 @@
 
 .gh-product-card-name {
     font-size: 1.8rem;
-    font-weight: 500;
+    font-weight: 600;
     margin: 0;
 }
 
@@ -308,6 +308,10 @@
     margin-bottom: 32px;
 }
 
+.gh-product-priceform-block .form-group:last-of-type {
+    margin-bottom: 0;
+}
+
 .gh-product-priceform-pricecurrency {
     display: grid;
     grid-template-columns: 1fr 2fr;
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 88f4f848ee..a5d95dc520 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -798,7 +798,8 @@ textarea {
 }
 
 .form-rich-radio .gh-radio-label .description h4 {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
+    font-weight: 600;
     margin: 0;
     padding: 0;
     line-height: 1.4em;