Added subscription count to member's product list

no refs.

- added subscription count to the product list in member details screen if there are multiple subscriptions for the given product. This is to make it clear and avoid confusion around the edge case when members have multiple subscriptions for the same product.

app/components/gh-member-settings-form-cp.hbs

@@ -121,7 +121,10 @@
                 <div class="gh-main-section-content bordered">
                     <div class="gh-cp-memberproduct">
                         <h3 class="gh-memberproduct-name">
-                            {{product.name}}
+                            {{product.name}} 
+                            {{#unless (eq product.subscriptions.length 1    )}}
+                            <span class="gh-memberproduct-subcount">({{product.subscriptions.length}} subscriptions)</span>
+                            {{/unless}}
                         </h3>
                         {{#each product.subscriptions as |sub|}}
                         <div class="gh-memberproduct-subscription">
@@ -138,7 +141,7 @@
                                     <span class="gh-badge active">Active</span>
                                 {{/if}}
                             </div>
-                            <div>Created on {{sub.startDate}}</div>
+                            <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
 
                             <span class="action-menu">
                                 <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon only-has-icon" @title="User Actions">

app/styles/layouts/members.css

@@ -1616,6 +1616,10 @@ p.gh-members-import-errordetail:first-of-type {
     border-top: 1px solid var(--whitegrey);
 }
 
+.gh-memberproduct-created {
+    margin-top: 1px;
+}
+
 .gh-memberproduct-archived .gh-memberproduct-name {
     opacity: 0.5;
 }
@@ -1687,4 +1691,10 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-memberproduct-subscription .action-menu > .gh-btn svg {
     margin: 0;
+}
+
+.gh-memberproduct-subcount {
+    font-size: 1.4rem;
+    font-weight: 400;
+    color: var(--midgrey);
 }