Cleaned up members activity flow between that and details

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

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>

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 {

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}}

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>