From b6426e5a003d5ee028e0c08cc25e145f0df49a0f Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 9 Mar 2022 15:02:36 +0000
Subject: [PATCH] Cleaned up members activity flow between that and details

refs: https://github.com/TryGhost/Team/issues/1373
---
 .../components/gh-member-details-activity.hbs | 23 ++----
 .../app/styles/layouts/member-activity.css    | 77 +++++++++++++++++--
 .../admin/app/templates/members-activity.hbs  |  4 +-
 ghost/admin/public/assets/icons/member.svg    |  3 +
 4 files changed, 79 insertions(+), 28 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/member.svg

diff --git a/ghost/admin/app/components/gh-member-details-activity.hbs b/ghost/admin/app/components/gh-member-details-activity.hbs
index 7dc97e7bbd..8a76b613b9 100644
--- a/ghost/admin/app/components/gh-member-details-activity.hbs
+++ b/ghost/admin/app/components/gh-member-details-activity.hbs
@@ -21,26 +21,15 @@
                             <span class="midgrey">New member</span>
                             {{/if}}
                         {{/unless}}
+                        <span class="gh-member-details-activity-email">
+                            {{#if (and @member.name @member.email)}}
+                                &nbsp;&middot;&nbsp;{{@member.email}}
+                            {{/if}}
+                        </span>
                     </h3>
                     <p>
-                        {{#if (and @member.name @member.email)}}
-                            <a href="mailto:{{@member.email}}">{{@member.email}}</a>
-                        {{/if}}
+                        <LinkTo class="gh-member-details-activity-link" @route="member" @model={{@member}}>{{svg-jar "member"}} See member details</LinkTo>
                     </p>
-                    {{#unless @member.isNew}}
-                    <p class="{{if @member.name "nudge-bottom--2"}}">
-                        {{#if @member.geolocation}}
-                            {{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
-                                {{@member.geolocation.region}}, US
-                            {{else}}
-                                {{or @member.geolocation.country "Unknown location"}}
-                            {{/if}}
-                        {{else}}
-                            Unknown location
-                        {{/if}}
-                        – Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
-                    </p>
-                    {{/unless}}
                 </div>
             </div>
         </div>
diff --git a/ghost/admin/app/styles/layouts/member-activity.css b/ghost/admin/app/styles/layouts/member-activity.css
index 45299e13bc..28566ca0fe 100644
--- a/ghost/admin/app/styles/layouts/member-activity.css
+++ b/ghost/admin/app/styles/layouts/member-activity.css
@@ -1,29 +1,90 @@
+.gh-members-activity {
+    width: 100%;
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.gh-members-activity .gh-canvas-header {
+    padding-left: 48px;
+    padding-right: 48px;
+    margin: 0 auto;
+    max-width: 1320px;
+}
+
 .gh-member-details-activity {
-    padding: 32px 0;
-    border-top: 1px solid var(--whitegrey);
+    margin: 0 auto;
+    max-width: 1320px;
+}
+
+.gh-member-details-activity .gh-main-section-block {
+    padding: 15px 0 20px;
+    margin: 0 48px;
+    border-top: 1px solid var(--whitegrey);  
+}
+
+.gh-member-details-activity .gh-main-section-content {
+    margin: 0 -4px;
 }
 
 .gh-member-details-activity h3 {
     margin: 0;
     padding: 0;
-    font-size: 1.7rem;
+    font-size: 1.6rem;
     font-weight: 600;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .gh-member-details-activity p {
     margin: 0;
     padding: 0;
-    color: var(--midgrey);
-    font-size: 1.3rem;
+    font-size: 1.4rem;
+    color: #40474f;
 }
 
-.gh-member-details-activity a,
-.gh-member-details-activity a:hover {
-    color: var(--black);
+.gh-member-details-activity-link {
+    margin: 0 0 0 -2px;
+    padding: 0;
+    font-size: 1.4rem;
+    color: var(--green);
+    display: flex;
+    align-items: center;
+}
+
+.gh-member-details-activity-link svg {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-right: 0.6rem;
+}
+
+.gh-member-details-activity-link svg path {
+    fill: var(--green);
+}
+
+.gh-member-details-activity-email {
+    margin: 0;
+    padding: 0;
+    font-size: 1.4rem;
+    color: var(--midgrey);
 }
 
 .gh-members-activity .gh-list-scrolling {
     height: calc(100vh - 96px);
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.gh-members-activity .gh-list-scrolling {
+    height: calc(100vh - 96px);
+}
+
+.gh-members-activity .gh-list-scrolling .gh-list {
+    padding: 0 48px 48px;
+    margin: 0 auto;
+    max-width: 1320px;
 }
 
 .gh-members-activity .gh-list-scrolling thead th:last-child {
diff --git a/ghost/admin/app/templates/members-activity.hbs b/ghost/admin/app/templates/members-activity.hbs
index 9d6eed1fe2..9f74aa9d25 100644
--- a/ghost/admin/app/templates/members-activity.hbs
+++ b/ghost/admin/app/templates/members-activity.hbs
@@ -25,9 +25,7 @@
     <div class="view-container">
         <div class="gh-list-scrolling">
             {{#if this.memberRecord}}
-                <LinkTo @route="member" @model={{this.memberRecord}}>
-                    <GhMemberDetailsActivity @member={{this.memberRecord}} />
-                </LinkTo>
+                <GhMemberDetailsActivity @member={{this.memberRecord}} />
             {{/if}}
             {{#let (members-event-fetcher filter=(members-event-filter excludedEvents=this.fullExcludedEvents member=this.member) pageSize=50) as |eventsFetcher|}}
                 {{#if eventsFetcher.data}}
diff --git a/ghost/admin/public/assets/icons/member.svg b/ghost/admin/public/assets/icons/member.svg
new file mode 100644
index 0000000000..d9c22fbc09
--- /dev/null
+++ b/ghost/admin/public/assets/icons/member.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.87319 7.05072C7.87319 4.53743 9.91062 2.5 12.4239 2.5C14.9372 2.5 16.9746 4.53743 16.9746 7.05072C16.9746 9.56402 14.9372 11.6014 12.4239 11.6014C9.91062 11.6014 7.87319 9.56402 7.87319 7.05072ZM12.4239 1C9.08219 1 6.37319 3.709 6.37319 7.05072C6.37319 10.3924 9.08219 13.1014 12.4239 13.1014C15.7656 13.1014 18.4746 10.3924 18.4746 7.05072C18.4746 3.709 15.7656 1 12.4239 1ZM6.82086 17.3498C8.30688 15.8638 10.3224 15.029 12.4239 15.029C14.5255 15.029 16.5409 15.8638 18.027 17.3498C19.513 18.8359 20.3478 20.8513 20.3478 22.9529C20.3478 23.3671 20.6836 23.7029 21.0978 23.7029C21.512 23.7029 21.8478 23.3671 21.8478 22.9529C21.8478 20.4535 20.855 18.0565 19.0876 16.2892C17.3203 14.5219 14.9233 13.529 12.4239 13.529C9.92454 13.529 7.52753 14.5219 5.7602 16.2892C3.99287 18.0565 3 20.4535 3 22.9529C3 23.3671 3.33579 23.7029 3.75 23.7029C4.16421 23.7029 4.5 23.3671 4.5 22.9529C4.5 20.8513 5.33484 18.8359 6.82086 17.3498Z" fill="black"/>
+</svg>