From 9f4ad3d8d43f7bdfeed479a9ae60be865d5b47d4 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 24 Aug 2022 16:53:38 +0100
Subject: [PATCH] A few tweaks to the member detail page attribution data

- Changed how the links looked in both areas
- Made sure the layout didn't break with longer titles

refs https://github.com/TryGhost/Team/issues/1817
---
 .../app/components/gh-member-details.hbs      |  2 +-
 .../components/gh-member-settings-form.hbs    |  5 ++--
 ghost/admin/app/styles/layouts/members.css    | 23 +++++++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-details.hbs b/ghost/admin/app/components/gh-member-details.hbs
index c70d3f2219..e9f75af4a9 100644
--- a/ghost/admin/app/components/gh-member-details.hbs
+++ b/ghost/admin/app/components/gh-member-details.hbs
@@ -49,7 +49,7 @@
                 {{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
                     <p>
                         {{svg-jar "satellite"}}
-                        <a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
+                        Attributed to&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
                     </p>
                 {{/if}}
                 <p class="gh-member-last-seen">
diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index fbb15fb806..1f36301ffc 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -143,7 +143,7 @@
 
                             {{#each tier.subscriptions as |sub index|}}
                                 <div class="gh-membertier-subscription" data-test-subscription={{index}}>
-                                    <div>
+                                    <div class="gh-membertier-details-container">
                                         <div>
                                             {{#if sub.trialUntil}}
                                                 <span class="gh-cp-membertier-pricelabel">Free trial</span>
@@ -192,13 +192,12 @@
                                                 </div>
                                             {{/if}}
                                         {{/if}}
-                                        <div>
+                                        <div class="gh-membertier-details">
                                             <span class="gh-membertier-created">Created on {{sub.startDate}}</span>                                            
                                             {{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
                                                 <span class="gh-membertier-separator">·</span>
                                                 <span class="gh-membertier-started">Attributed to <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>
                                             {{/if}}
-
                                         </div>
                                     </div>
 
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 1213dca5e7..0d8201c20d 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -722,13 +722,12 @@ label[for="member-description"] + p {
     flex-shrink: 0;
 }
 
-/* WIP style for attribution link*/
 .gh-member-details-meta p a {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    text-decoration: underline;
-    margin-left: 2px;
+    font-weight: 600;
+    color: var(--darkgrey);
 }
 
 .gh-member-details-meta svg path {
@@ -2166,16 +2165,17 @@ p.gh-members-import-errordetail:first-of-type {
     border-top: 1px solid var(--whitegrey);
 }
 
-.gh-membertier-created,
-.gh-membertier-started {
+.gh-membertier-details span,
+.gh-membertier-details a {
+    display: inline-block;
     color: var(--midgrey-d1);
     font-size: 1.25rem;
     font-weight: 500;
 }
 
-.gh-membertier-started a {
-    color: var(--black);
-    font-weight: 500;
+.gh-membertier-details a {
+    font-weight: 600;
+    color: var(--darkgrey);
 }
 
 .gh-membertier-separator {
@@ -2267,14 +2267,19 @@ p.gh-members-import-errordetail:first-of-type {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: stretch;
 }
 
 .gh-cp-membertier-renewal {
     color: var(--darkgrey-l1);
 }
 
+.gh-membertier-details-container {
+    flex: 1;
+}
+
 .gh-membertier-price-container {
+    flex: 0;
     display: flex;
     align-items: flex-start;
 }