Added hints to Tier modal

- Added hint to tier description field
- Updated benefit field placeholder
- Added global help link to modal footer

ghost/admin/app/components/gh-benefit-item.hbs

@@ -15,7 +15,7 @@
     >
         <GhTrimFocusInput
             @shouldFocus={{this.benefitItem.last}}
-            @placeholder="Add benefit"
+            @placeholder="Benefit (e.g. Expert analysis)"
             @value={{readonly this.name}}
             @input={{action "updateLabel" value="target.value"}}
             @keyPress={{action "clearLabelErrors"}}

ghost/admin/app/components/modal-product.hbs

@@ -30,6 +30,7 @@
                         @id="description"
                         @class="gh-input" />
                     <GhErrorMessage @errors={{this.errors}} @property="description" />
+                    <p>Short summary of what members get with this tier</p>
                 </GhFormGroup>
                 <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
                     <div class="gh-settings-members-pricelabelcont">
@@ -121,20 +122,25 @@
 </div>
 </form>
 
-<div class="modal-footer">
-    <button
-        class="gh-btn"
-        {{action "closeModal"}}
-        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
-        {{action (optional this.noop) on="mouseDown"}}
-        data-test-button="cancel-webhook"
-    >
-        <span>Cancel</span>
-    </button>
-    <GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add tier"}}"
-        @successText={{this.successText}}
-        @task={{this.saveProduct}}
-        @idleClass="gh-btn-primary"
-        @class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
-        data-test-button="save-product" />
+<div class="modal-footer modal-footer-spread items-center">
+    <div class="modal-footer-hint">
+        Completely lost? <a href="https://ghost.org/help/topic/members/" target="_blank" rel="noopener noreferrer">Check the documentation</a>
+    </div>
+    <div>
+        <button
+            class="gh-btn"
+            {{action "closeModal"}}
+            {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+            {{action (optional this.noop) on="mouseDown"}}
+            data-test-button="cancel-webhook"
+        >
+            <span>Cancel</span>
+        </button>
+        <GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add tier"}}"
+            @successText={{this.successText}}
+            @task={{this.saveProduct}}
+            @idleClass="gh-btn-primary"
+            @class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
+            data-test-button="save-product" />
+    </div>
 </div>

ghost/admin/app/styles/components/modals.css

@@ -229,12 +229,18 @@
     margin-left: 0;
 }
 
+.modal-footer-hint {
+    font-size: 1.3rem;
+    color: var(--middarkgrey);
+}
+
 .modal-body .gh-image-uploader {
     margin: 0;
     background: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
 }
 
 
+
 /* Full screen setting modal with preview. Used in e.g. Portal
 /* settings, Email design settings etc.
 /* ---------------------------------------------------------- */

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

@@ -401,7 +401,7 @@
 }
 
 .gh-form-edit-product .gh-main-section-content.gh-product-form-benefits {
-    max-height: 276px;
+    max-height: 298px;
     overflow: scroll;
     flex-grow: 1;
     padding: 12px 16px 0 0;

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

@@ -1690,6 +1690,7 @@ p.theme-validation-details {
     color: var(--middarkgrey);
     text-transform: uppercase;
     pointer-events: none;
+    min-width: 60px;
 }
 
 .gh-setting-members-currencylabel span {