From 5e9fe954433bdaf267b6c9fdd0736551c2507a19 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 1 Mar 2023 23:15:39 +0000
Subject: [PATCH] Updated recent mentions dashboard widget design

refs https://github.com/TryGhost/Team/issues/2608
---
 ghost/admin/app/styles/layouts/dashboard.css | 33 ++++++++++++-----
 ghost/admin/app/templates/dashboard.hbs      | 38 +++++++++++---------
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 042c61c715..3288fa8e71 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -2620,8 +2620,11 @@ Dashboard Mentions */
 }
 
 .gh-dashboard-mentions {
+    box-shadow: var(--box-shadow-m);
     min-width: 300px;
+    max-width: 400px;
     padding: 20px;
+    border-radius: 3px;
 }
 
 .gh-dashboard-mentions-header {
@@ -2629,7 +2632,9 @@ Dashboard Mentions */
     align-items: center;
     justify-content: space-between;
     line-height: 1;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--whitegrey);
+    padding-bottom: 16px;
 }
 
 .gh-dashboard-mentions {
@@ -2664,23 +2669,26 @@ Dashboard Mentions */
 }
 
 .gh-dashboard-mention {
-    display: flex;
+    /* display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: flex-start; */
     /* display: grid; */
-    /* grid-template-columns: 20px min-content min-content min-content;
-    grid-template-rows: 20px auto auto auto;
-    grid-column-gap: 4px; */
+    display: block;
     padding: 4px 0;
     padding: 6px 0;
     font-size: 1.4rem;
-    line-height: 1;
+    line-height: 1.2;
 }
 
 .gh-dashboard-mention-content {
-    display: flex;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 20px min-content 16px auto;
+    grid-template-rows: 20px auto auto auto;
+    /* grid-column-gap: 4px; */
     align-items: center;
     color: var(--midlightgrey);
+    font-weight: 500;
 }
 
 .gh-dashboard-mention-title {
@@ -2690,6 +2698,11 @@ Dashboard Mentions */
     white-space: nowrap;
     text-overflow: ellipsis;
     margin-right: 4px;
+    margin-left: 8px;
+}
+
+.gh-dashboard-mention-content .gh-mention-link-icon {
+    margin: 0;
 }
 
 .gh-dashboard-mention-timestamp {
@@ -2702,11 +2715,13 @@ Dashboard Mentions */
 }
 
 .gh-dashboard-mention-target {
-    color: var(--darkgrey);
+    /* color: var(--darkgrey); */
+    color: #7c8b9a;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin-left: 4px;
+    font-weight: 400;
 }
 
 .gh-dashboard-mentions .gh-dashboard-list-footer {
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index 89f92d9ac6..098d180589 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -29,22 +29,28 @@
                                         <LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
                                     </div>
                                     <div>
-                                        {{#each this.mentions as |mention|}}
-                                            <a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
-                                                <div class="gh-dashboard-mention-content">
-                                                    <img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
-
-                                                    <span class="gh-dashboard-mention-title">{{or mention.sourceTitle mention.sourceSiteTitle}}</span>
-                                                    <span>mentioned</span>
-                                                    {{#if (gt mention.mentions.length 1) }}
-                                                        <span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
-                                                    {{else}}
-                                                        <span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
-                                                    {{/if}}
-                                                </div>
-                                                <span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
-                                            </a>
-                                        {{/each}}
+                                        {{#if this.mentions}}
+                                            {{#each this.mentions as |mention|}}
+                                                <a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
+                                                    <div class="gh-dashboard-mention-content">
+                                                        <img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
+                                                        <span class="gh-dashboard-mention-title">{{or mention.sourceSiteTitle mention.sourceSiteTitle}}</span>
+                                                        {{!-- <span>mentioned</span> --}}
+                                                        <div class="gh-mention-link-icon">
+                                                            {{svg-jar "twitter-link"}}
+                                                        </div>
+                                                        {{#if (gt mention.mentions.length 1) }}
+                                                            <span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
+                                                        {{else}}
+                                                            <span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
+                                                        {{/if}}
+                                                        <span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
+                                                    </div>
+                                                </a>
+                                            {{/each}}
+                                        {{else}}
+                                        Empty state
+                                        {{/if}}
                                     </div>
                                 </div>
                             </dropdown.Content>