From 86a0f103e9af71341c6faaf365dca4b4bc8daa54 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 25 Aug 2022 14:19:55 +0100
Subject: [PATCH] Going for a simpler design for events

- The extra column made sense logically but was causing too many issues
- Going to try the single setence again but change visual style to be easier to parse
- Making sure this works around the feature flag

refs https://github.com/TryGhost/Team/issues/1851
---
 .../components/dashboard/charts/recents.hbs   | 31 +++++++------------
 .../app/components/gh-member-details.hbs      |  2 +-
 .../app/components/member/activity-feed.hbs   | 10 +++---
 .../components/members-activity/table-row.hbs | 19 +++---------
 .../app/components/members-activity/table.hbs |  3 --
 ghost/admin/app/styles/layouts/dashboard.css  |  5 ---
 .../app/styles/layouts/member-activity.css    | 26 ++++++++++++++++
 ghost/admin/app/styles/layouts/members.css    |  6 ----
 8 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/charts/recents.hbs b/ghost/admin/app/components/dashboard/charts/recents.hbs
index fc89517ab0..dd97efb99d 100644
--- a/ghost/admin/app/components/dashboard/charts/recents.hbs
+++ b/ghost/admin/app/components/dashboard/charts/recents.hbs
@@ -66,11 +66,10 @@
                 </div>
             </div>
         {{else}}
-            <div class="gh-dashboard-recents-activity gh-dashboard-list {{if (feature "memberAttribution") 'feature-memberAttribution'}}" data-test-dashboard-member-activity>
+            <div class="gh-dashboard-recents-activity gh-dashboard-list" data-test-dashboard-member-activity>
                 <div class="gh-dashboard-list-header">
                     <div class="gh-dashboard-list-title">Member</div>
                     <div class="gh-dashboard-list-title">Event</div>
-                    {{#if (feature "memberAttribution")}}<div class="gh-dashboard-list-title">Attribution</div>{{/if}}
                     <div class="gh-dashboard-list-title">Time</div>
                 </div>
                 <div class="gh-dashboard-list-body">
@@ -98,26 +97,20 @@
                                                 <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" data-test-dashboard-member-activity-item>{{parsedEvent.subject}}</LinkTo>
                                             </div>
                                             <div class="gh-dashboard-list-item-sub">
-                                                {{svg-jar parsedEvent.icon}}
+                                                {{svg-jar parsedEvent.icon }}
                                                 <span class="gh-dashboard-list-subtext">
-                                                    {{capitalize-first-letter parsedEvent.action}}
-                                                    {{#if parsedEvent.url}}
-                                                        <a class="ghost-members-activity-object-link {{if (feature "memberAttribution") 'hidden'}}" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.object}}</a>
-                                                    {{/if}}
-                                                    {{#if parsedEvent.info}}
-                                                        <span class="highlight">{{parsedEvent.info}}</span>
-                                                    {{/if}}
+                                                    <span class="gh-members-activity-description {{if (feature "memberAttribution") 'feature-memberAttribution'}}">
+                                                        <span class="gh-members-activity-event-text">{{capitalize-first-letter parsedEvent.action}}</span>
+                                                        {{#if parsedEvent.info}}
+                                                            <span class="highlight">{{parsedEvent.info}}</span>
+                                                        {{/if}}
+                                                        {{#if parsedEvent.url}}
+                                                            <span class="gh-members-activity-event-join">{{parsedEvent.join}}</span>
+                                                            <a class="ghost-members-activity-object-link" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.object}}</a>
+                                                        {{/if}}
+                                                    </span>
                                                 </span>
                                             </div>
-                                            {{#if (feature "memberAttribution")}}
-                                                <div class="gh-dashboard-list-item-sub">
-                                                    {{#if parsedEvent.url}}
-                                                        <a class="ghost-members-activity-object-link" href="{{parsedEvent.url}}" target="_blank" rel="noopener noreferrer">{{parsedEvent.object}}</a>
-                                                    {{else}}
-                                                        <span class="gh-list-nodata">&mdash;</span>
-                                                    {{/if}}
-                                                </div>
-                                            {{/if}}
                                             <div class="gh-dashboard-list-item-sub gh-dashboard-list-item-date">
                                                 <span class="gh-dashboard-list-subtext">{{moment-from-now parsedEvent.timestamp}}</span>
                                             </div>
diff --git a/ghost/admin/app/components/gh-member-details.hbs b/ghost/admin/app/components/gh-member-details.hbs
index 6417bdc84a..e0435b7f38 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"}}
-                        Signed up to&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
+                        Signed up on&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/member/activity-feed.hbs b/ghost/admin/app/components/member/activity-feed.hbs
index f3fe5ea05e..38645a094c 100644
--- a/ghost/admin/app/components/member/activity-feed.hbs
+++ b/ghost/admin/app/components/member/activity-feed.hbs
@@ -24,16 +24,18 @@
                                             <div class="gh-member-feed-detail">
                                                 <div class="gh-member-feed-event">
                                                     <span class="gh-member-feed-event-inner">
-                                                        <span class="gh-members-activity-description">
-                                                            {{capitalize-first-letter event.action}}
+                                                        <span class="gh-members-activity-description {{if (feature "memberAttribution") 'feature-memberAttribution'}}">
+                                                            <span class="gh-members-activity-event-text">{{capitalize-first-letter event.action}}</span>
+                                                            {{#if event.info}}
+                                                                <span class="highlight">{{event.info}}</span>
+                                                            {{/if}}
                                                             {{#if event.url}}
-                                                                {{event.join}}
+                                                                <span class="gh-members-activity-event-join">{{event.join}}</span>
                                                                 <a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
                                                             {{/if}}
                                                             {{#if event.email}}
                                                                 <GhEmailPreviewLink @data={{event.email}} />
                                                             {{/if}}
-                                                            <span class="highlight">{{event.info}}</span>
                                                         </span>
                                                     </span>
                                                 </div>
diff --git a/ghost/admin/app/components/members-activity/table-row.hbs b/ghost/admin/app/components/members-activity/table-row.hbs
index 3e79e15a05..ec65be123f 100644
--- a/ghost/admin/app/components/members-activity/table-row.hbs
+++ b/ghost/admin/app/components/members-activity/table-row.hbs
@@ -19,10 +19,10 @@
             <div class="gh-members-activity-container">
                 <div class="gh-members-activity-icon">{{svg-jar event.icon}}</div>
                 <div class="gh-members-activity-event">
-                    <span class="gh-members-activity-description">
-                        {{capitalize-first-letter event.action}}
-                        {{#if (and event.url (not (feature "memberAttribution")))}}
-                            {{event.join}}
+                    <span class="gh-members-activity-description {{if (feature "memberAttribution") 'feature-memberAttribution'}}">
+                        <span class="gh-members-activity-event-text">{{capitalize-first-letter event.action}}</span>
+                        {{#if event.url}}
+                            <span class="gh-members-activity-event-join">{{event.join}}</span>
                             <a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
                         {{/if}}
                         {{#if event.email}}
@@ -35,17 +35,6 @@
                 </div>
             </div>
         </div>
-        {{#if (feature "memberAttribution")}}
-            <div class="gh-list-data gh-list-data-attribution">
-                {{#if event.url}}
-                    <a class="ghost-members-activity-object-link" href="{{event.url}}" target="_blank" rel="noopener noreferrer">{{event.object}}</a>
-                {{else if event.email}}
-                    <GhEmailPreviewLink @data={{event.email}} />
-                {{else}}
-                    <span class="gh-list-nodata">&mdash;</span>
-                {{/if}}
-            </div>
-        {{/if}}
         <div class="gh-list-data gh-list-data-date">{{moment-format event.timestamp "DD MMM YYYY HH:mm"}}</div>
     </tr>
 {{/let}}
diff --git a/ghost/admin/app/components/members-activity/table.hbs b/ghost/admin/app/components/members-activity/table.hbs
index 4184c3be89..6633cbb935 100644
--- a/ghost/admin/app/components/members-activity/table.hbs
+++ b/ghost/admin/app/components/members-activity/table.hbs
@@ -5,9 +5,6 @@
                 <th>Member</th>
             {{/unless}}
             <th>Event</th>
-            {{#if (feature "memberAttribution")}}
-                <th>Attribution</th>
-            {{/if}}
             <th>Time</th>
         </tr>
     </thead>
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 7a7760b4ce..281a4f5753 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -713,11 +713,6 @@ Dashboard List */
     overflow: hidden;
 }
 
-.gh-dashboard-list-subtext a {
-    font-weight: 600;
-    color: var(--darkgrey);
-}
-
 .gh-dashboard-list-item svg {
     width: 24px;
     min-width: 24px;
diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css
index d56f67ca3a..53014d5428 100644
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/ghost/admin/app/styles/layouts/member-activity.css
@@ -153,11 +153,37 @@
     overflow: hidden;
 }
 
+.gh-members-activity-description.feature-memberAttribution  {
+    color: var(--darkgrey);
+}
+
+.gh-members-activity-description.feature-memberAttribution a {
+    font-weight: 400;
+    color: var(--midgrey) !important;
+    text-decoration: underline;
+    text-decoration-color: var(--midlightgrey);
+    transition: all 150ms ease;
+}
+
+.gh-members-activity-description.feature-memberAttribution a:hover {
+    color: var(--middarkgrey) !important;
+}
+
 .gh-members-activity-description a {
     font-weight: 600;
     color: var(--darkgrey);
 }
 
+.gh-members-activity-event-join {
+    font-weight: 500;
+    color: var(--middarkgrey);
+}
+
+.feature-memberAttribution .gh-members-activity-event-join {
+    font-weight: 400;
+    color: var(--midgrey);
+}
+
 .gh-members-activity-icon {
     width: 24px;
     min-width: 24px;
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 0d8201c20d..2b47833bc2 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1186,12 +1186,6 @@ textarea.gh-member-details-textarea {
     height: 100%;
 }
 
-.gh-member-settings .gh-members-activity-description {
-    font-weight: 500;
-    font-size: 1.4rem;
-    color: var(--middarkgrey);
-}
-
 .gh-member-feed-time {
     font-weight: 500;
     font-size: 1.3rem;