Updated add product UI style

ghost/admin/app/components/gh-membership-products-alpha.hbs

@@ -1,3 +1,4 @@
+<div class="gh-product-cards">
 {{#each this.products as |product|}}
     <div class="gh-product-card">
         <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
@@ -22,12 +23,11 @@
         </div>
     </div>
 {{/each}}
-<div class="gh-product-card" {{action "openNewProduct" product}} style="cursor: pointer">
-    <div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1">
-        <h3 class="gh-product-card-name">
-            + New tier
-        </h3>
-    </div>
+
+<div class="gh-product-cards-footer">
+    <button class="gh-btn gh-btn-link gh-btn-text gh-btn-icon gh-btn-add-product green" {{action "openNewProduct" product}}><span>{{svg-jar "add-stroke" class="stroke-green"}}Add product</span></button>
+    <span>&ndash; Advanced (<a href="javascript:">learn more</a>)</span>
+</div>
 </div>
 
 {{#if this.showProductModal}}
@@ -39,4 +39,4 @@
         @confirm={{this.confirmProductSave}}
         @close={{this.closeProductModal}}
         @modifier="action wide" />
-{{/if}}
+{{/if}}

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

@@ -11,16 +11,20 @@
     }
 }
 
+.gh-product-cards {
+    margin: 0 0 24px;
+}
+
 .gh-product-card {
     position:relative;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    border: 1px solid var(--whitegrey);
     border-radius: 3px;
     padding: 24px;
     background: white;
     margin-bottom: 12px;
+    box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
 }
 
 @media (max-width: 980px) {
@@ -78,6 +82,23 @@
     text-transform: uppercase;
 }
 
+.gh-product-cards-footer {
+    display: flex;
+    align-items: center;
+    margin-top: -7px;
+    color: var(--midgrey);
+    font-size: 1.35rem;
+}
+
+.gh-btn-add-product,
+.gh-btn-add-product:hover {
+    margin-right: 5px;
+}
+
+.gh-btn-add-product svg {
+    margin-right: 2px;
+}
+
 .gh-product-list-icon {
     display: flex;
     align-items: flex-end;

ghost/admin/app/styles/patterns/buttons.css

@@ -288,6 +288,14 @@ svg.gh-btn-icon-right {
     stroke: #fff;
 }
 
+.gh-btn-icon.green svg path {
+    stroke: var(--green);
+}
+
+.gh-btn-icon.red svg path {
+    stroke: var(--red);
+}
+
 .gh-btn-icon-no-margin {
     margin: 0;
 }