Updated mentions feed design

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

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

@@ -11,6 +11,10 @@
     grid-column: span 2;
 }
 
+.gh-mentions-list.is-empty {
+    grid-column: span 3;
+}
+
 .gh-mention-card {
     display: block;
     position: relative;
@@ -24,6 +28,11 @@
     color: var(--midgrey);
 }
 
+.gh-mention-card:hover {
+    transition: box-shadow 0.1s ease-in;
+    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
+}
+
 .gh-mention-header {
     width: 100%;
     display: flex;
@@ -175,7 +184,7 @@
 }
 
 .gh-mentions-explainer {
-    background-color: var(--whitegrey);
+    background: var(--main-color-content-greybg);
     border-radius: 5px;
     padding: 24px;
 }

ghost/admin/app/templates/mentions.hbs

@@ -12,6 +12,13 @@
                     </LinkTo>
                     {{svg-jar "arrow-right-small"}}Mentions
                 </div>
+            {{else}}
+                <div class="gh-canvas-breadcrumb">
+                    <LinkTo @route="dashboard">
+                        Dashboard
+                    </LinkTo>
+                    {{svg-jar "arrow-right-small"}}Mentions
+                </div>
             {{/if}}
             <h2 class="gh-canvas-title gh-post-title" data-test-screen-title>
                 {{#if this.post }}
@@ -31,7 +38,7 @@
         </div>
     </GhCanvasHeader>
     <section class="gh-mentions-main-section">
-        <div class="gh-mentions-list">
+        <div class="gh-mentions-list {{unless this.mentionsInfinityModel "is-empty"}}">
             {{#if this.mentionsInfinityModel}}
                 <div>
                     {{#each this.mentionsInfinityModel as |mention|}}
@@ -83,12 +90,14 @@
             @scrollable=".gh-main"
             @triggerOffset={{1000}} />
         </div>
-        <div class="gh-mentions-sidebar">
-            <div class="gh-mentions-explainer">
-                <img src="assets/img/mentions-background.png" alt="" role="presentation"/>
-                <h2>Introducing Mentions</h2>
-                <p>Whenever another person or site links to you, you’ll receive a notification in your dashboard to show you who’s talking about your content — and, when you link to someone else’s work, they’ll be notified, too.</p>
+        {{#if this.mentionsInfinityModel}}
+            <div class="gh-mentions-sidebar">
+                <div class="gh-mentions-explainer">
+                    <img src="assets/img/mentions-background.png" alt="" role="presentation"/>
+                    <h2>Introducing Mentions</h2>
+                    <p>Whenever another person or site links to you, you’ll receive a notification in your dashboard to show you who’s talking about your content — and, when you link to someone else’s work, they’ll be notified, too.</p>
+                </div>
             </div>
-        </div>
+        {{/if}}
     </section>
 </section>