Updated attribution info design on member profile

refs https://github.com/TryGhost/Team/issues/1986

ghost/admin/app/components/gh-member-details.hbs

@@ -42,10 +42,12 @@
                         Unknown location
                     {{/if}}
                 </p>
-                <p>
+                {{#if (not (feature 'sourceAttribution'))}}
-                    {{svg-jar "member-add"}}
+                    <p>
-                    Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
+                        {{svg-jar "member-add"}}
-                </p>
+                        Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
+                    </p>
+                {{/if}}
                 {{#if (feature 'sourceAttribution')}}
                 {{else}}
                     {{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
@@ -64,19 +66,23 @@
                     {{/if}}
                 </p>
             </div>
-            {{#if (and (feature 'sourceAttribution') this.showAttribution)}}
+            {{#if (feature 'sourceAttribution')}}
                 <div class="gh-member-details-attribution">
-                    <h4 class="gh-main-section-header small bn">Attribution</h4>
+                    <h4 class="gh-main-section-header small bn">Signup info</h4>
+                    <p>
+                        {{svg-jar "member-add"}}
+                        Created&nbsp;&mdash;&nbsp;<span>{{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}</span>
+                    </p>
                     {{#if this.referrerSource}}
                         <p>
                             {{svg-jar "earth"}}
-                            Signup source&nbsp;&mdash;&nbsp;<span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
+                            Source&nbsp;&mdash;&nbsp;<span title="{{this.referrerSource}}">{{this.referrerSource}}</span>
                         </p>
                     {{/if}}
                     {{#if (and @member.attribution.url @member.attribution.title)}}
                     <p>
                         {{svg-jar "posts"}}
-                        Signup page&nbsp;&mdash;&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
+                        Page&nbsp;&mdash;&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer" title="{{ @member.attribution.title }}">{{ @member.attribution.title }}</a>
                     </p>
                     {{!-- <a href="#" class="gh-member-details-attribution-docs">Learn more →</a> --}}
                     {{/if}}

ghost/admin/app/components/member/subscription-detail-box.hbs

@@ -1,50 +1,54 @@
 <button type="button" class="flex pointer flex-row items-center gh-cp-membertier-details {{if this.showDetails "
     rotate"}}" {{on "click" this.toggleSubscriptionExpanded}} role="button" aria-label="Show details">
-    Details {{svg-jar "arrow-right-stroke"}}
+    Subscription 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">
-        {{#if @sub.cancellationReason}}
-        <div class="mb4">
-            <h4>Cancellation reason</h4>
-            <div class="gh-membertier-cancelreason">{{@sub.cancellationReason}}</div>
-        </div>
-        {{/if}}
-        {{#if @sub.offer}}
-        {{#if (eq @sub.offer.type "trial")}}
-        <div class="mb4">
-            <h4>Offer</h4>
-            <span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
-            &ndash; {{@sub.offer.amount}} days free
-        </div>
-        {{else}}
-        <div class="mb4">
-            <h4>Offer</h4>
-            <span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
-            {{#if (eq @sub.offer.type 'fixed')}}
-            &ndash; {{currency-symbol @sub.offer.currency}}{{gh-price-amount @sub.offer.amount}} off
-            {{else}}
-            &ndash; {{@sub.offer.amount}}% off
-            {{/if}}
-        </div>
-        {{/if}}
-        {{/if}}
         <div class="gh-membertier-details">
+            <p>
+                Created&nbsp;&mdash;&nbsp;<span>{{@sub.startDate}}</span>
+            </p>
             {{#if (eq @sub.attribution.referrerSource 'Unknown')}}
             {{else}}
-            <div class="gh-membertier-detail">
+            <p>
-                <h4>Subscription source</h4>
+                Source&nbsp;&mdash;&nbsp;<span>{{@sub.attribution.referrerSource}}</span>
-                <p><span class="fw6">{{@sub.attribution.referrerSource}}</span></p>
+            </p>
-            </div>
             {{/if}}
             {{#if (and @sub.attribution @sub.attribution.url @sub.attribution.title)}}
-            <div class="gh-membertier-detail">
+            <p>
-                <h4>Subscription page</h4>
+                Page&nbsp;&mdash;&nbsp;<a href="{{@sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @sub.attribution.title }}</a>
-                <a href="{{@sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @sub.attribution.title
+            </p>
-                    }}</a>
+            {{/if}}
+        </div>
+        {{#if (or @sub.cancellationReason @sub.offer)}}
+        <div class="gh-membertier-offer-cancellation">
+            {{#if @sub.cancellationReason}}
+            <div>
+                <h4>Cancellation reason</h4>
+                <div class="gh-membertier-cancelreason">{{@sub.cancellationReason}}</div>
             </div>
             {{/if}}
-            <p class="gh-membertier-detail-timestamp">Created on {{@sub.startDate}}</p>
+            {{#if @sub.offer}}
+                {{#if (eq @sub.offer.type "trial")}}
+                <div>
+                    <h4>Offer</h4>
+                    <span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}} </span>
+                    &ndash; {{@sub.offer.amount}} days free
+                </div>
+                {{else}}
+                <div>
+                    <h4>Offer</h4>
+                    <span class="gh-cp-membertier-pricelabel"> {{@sub.offer.name}}
+                    {{#if (eq @sub.offer.type 'fixed')}}
+                    &ndash; {{currency-symbol @sub.offer.currency}}{{gh-price-amount @sub.offer.amount}} off
+                    {{else}}
+                    &ndash; {{@sub.offer.amount}}% off
+                    {{/if}}
+                    </span>
+                </div>
+                {{/if}}
+            {{/if}}
         </div>
+        {{/if}}
     </div>
 </div>

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

@@ -2277,6 +2277,10 @@ p.gh-members-import-errordetail:first-of-type {
     border-top: 1px solid var(--whitegrey);
 }
 
+.gh-membertier-details p {
+    color: var(--darkgrey-l1);
+}
+
 .gh-membertier-details span,
 .gh-membertier-details a {
     display: inline-block;
@@ -2593,16 +2597,16 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-cp-membertier-attribution .gh-membertier-advanced h4 {
-    font-size: 1.1rem;
+    font-size: 1.4rem;
-    text-transform: uppercase;
+    font-weight: 400;
-    letter-spacing: .03em;
+    color: var(--middarkgrey);
-    font-weight: 500;
-    color: #7F8B99;
     margin-bottom: 2px;
+    letter-spacing: .01em;
 }
 
 .gh-cp-membertier-attribution .gh-membertier-details p {
     margin: 0;
+    color: var(--middarkgrey);
 }
 
 .gh-cp-membertier-attribution .gh-membertier-detail {
@@ -2611,8 +2615,22 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-cp-membertier-attribution .gh-membertier-details span, .gh-cp-membertier-attribution .gh-membertier-details a {
     font-size: 1.4rem;
-    font-weight: 600;
+    font-weight: 500;
-    color: unset;
+    color: var(--darkgrey);
+}
+
+.gh-membertier-offer-cancellation .gh-cp-membertier-pricelabel {
+    font-weight: 500;
+}
+
+.gh-membertier-offer-cancellation {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top:1px solid #ECEEF0;
+}
+
+.gh-membertier-offer-cancellation div + div {
+    margin-top: 16px;
 }
 
 .gh-cp-membertier-attribution .gh-cp-membertier-renewal {