Fixed deleted member styling in the post analytics (#21874)

ref DES-1012

- previously, when a member was deleted, they were displayed with an
avatar initial `NM`, the name was empty, and their list item wasn't
clickable, which led to user confusion
- now it's much clearer with a placeholder avatar and `Deleted member`
as name

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

@@ -1,8 +1,12 @@
 <figure class="gh-member-gravatar {{@containerClass}}">
-    <div class="gh-member-initials flex items-center justify-center br-100 {{@containerClass}}" style={{this.backgroundStyle}}>
-        <span class="gh-member-avatar-label {{or @sizeClass "gh-member-list-avatar"}}">{{this.initials}}</span>
-    </div>
-    {{#if this.avatarImage}}
-        <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
+    {{#if @member.email}}
+        <div class="gh-member-initials flex items-center justify-center br-100 {{@containerClass}}" style={{this.backgroundStyle}}>
+            <span class="gh-member-avatar-label {{or @sizeClass "gh-member-list-avatar"}}">{{this.initials}}</span>
+        </div>
+        {{#if this.avatarImage}}
+            <img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
+        {{/if}}
+    {{else}}
+        {{svg-jar "avatar"}}
     {{/if}}
 </figure>

ghost/admin/app/components/posts/post-activity-feed.hbs

@@ -18,11 +18,11 @@
                 <div class="gh-dashboard-list-body gh-dashboard-list-cols-{{this.eventType}}">
                     {{#each this.savedEventsFetcher.data as |event|}}
                         {{#let (parse-member-event event) as |parsedEvent|}}
-                            <div class="gh-dashboard-list-item">
+                            <div class="gh-dashboard-list-item {{unless parsedEvent.member.email 'deleted-member'}}">
                                 <div class="gh-dashboard-list-item-sub">
                                     {{#if parsedEvent.member}}
                                         <GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w6 h6 mr3 flex-shrink-0" />
-                                        <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" @query={{hash postAnalytics=@post.id}}>{{parsedEvent.subject}}</LinkTo>
+                                        <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" @query={{hash postAnalytics=@post.id}}>{{if parsedEvent.subject parsedEvent.subject "Deleted member"}}</LinkTo>
                                     {{else}}
                                         {{#if parsedEvent.email}}
                                             <GhMemberAvatar @name={{parsedEvent.subject}} @containerClass="w6 h6 mr3 flex-shrink-0" />
@@ -119,11 +119,11 @@
                 <div class="gh-dashboard-list-body gh-dashboard-list-cols-{{this.eventType}}">
                     {{#each eventsFetcher.data as |event|}}
                         {{#let (parse-member-event event) as |parsedEvent|}}
-                            <div class="gh-dashboard-list-item">
+                            <div class="gh-dashboard-list-item {{unless parsedEvent.member.email 'deleted-member'}}">
                                 <div class="gh-dashboard-list-item-sub">
                                     {{#if parsedEvent.member}}
                                         <GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w6 h6 mr3 flex-shrink-0" />
-                                        <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" @query={{hash postAnalytics=@post.id}}>{{parsedEvent.subject}}</LinkTo>
+                                        <LinkTo class="gh-dashboard-list-text" @route="member" @model="{{parsedEvent.memberId}}" @query={{hash postAnalytics=@post.id}}>{{if parsedEvent.subject parsedEvent.subject "Deleted member"}}</LinkTo>
                                     {{else}}
                                         {{#if parsedEvent.email}}
                                             <GhMemberAvatar @name={{parsedEvent.subject}} @containerClass="w6 h6 mr3 flex-shrink-0" />

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

@@ -1835,7 +1835,8 @@ span.dropdown .gh-post-list-cta > span {
 }
 
 .gh-post-activity-feed .gh-member-list-avatar {
-    font-size: 1.25rem;
+    font-size: 1.1rem;
+    font-weight: 600;
 }
 
 .gh-post-activity-feed .gh-dashboard-list-item {

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

@@ -1575,6 +1575,30 @@ Dashboard Recents */
 }
 
 
+/* ---------------------------------
+Dashboard Deleted Member */
+
+.gh-dashboard-list-item.deleted-member {
+    opacity: 0.4;
+}
+
+.gh-dashboard-list-item.deleted-member a {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.gh-dashboard-list-item.deleted-member .gh-member-gravatar {
+    background-color: var(--lightgrey-l2);
+}
+
+.gh-dashboard-list-item.deleted-member .gh-member-gravatar svg {
+    margin: 1px 0 0 1px;
+    width: 23px;
+    min-width: 23px;
+    height: 23px;
+    opacity: 0.4;
+}
+
 /* ---------------------------------
 Dashboard Resources */
 
@@ -3232,4 +3256,4 @@ span.gh-tip a {
 
 span.gh-tip a:hover {
     color: var(--darkgrey);
-}
+}

ghost/admin/public/assets/icons/avatar.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.55 4C13.483 4 15.05 5.567 15.05 7.5C15.05 9.433 13.483 11 11.55 11C9.617 11 8.05 9.433 8.05 7.5C8.05 5.567 9.617 4 11.55 4ZM11.55 20C9.044 20 6.757 19.067 5 17.538C5.997 14.888 8.551 13 11.55 13C14.549 13 17.103 14.888 18.1 17.538C16.343 19.066 14.056 20 11.55 20Z" fill="currentColor"/>
+</svg>