Further layout tweaks for new Dashboard (#2345)

* Subtle tweaks to the recent posts

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

* Combining Recent Posts and Members Activity together and other layout tweaks

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

- attempting to combine recent posts and members activity together
- various layout tweaks to make this work better
- tons of tiny style tweaks

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -13,13 +13,13 @@
             <Dashboard::V5::Charts::Engagement />
         {{/if}}
 
-        <Dashboard::V5::Charts::RecentPosts />
+        <Dashboard::V5::Charts::Recents />
-        <Dashboard::V5::Charts::RecentActivity />
+        <Dashboard::V5::Resources::Resources />
-        <Dashboard::V5::Resources::Help />
+        <Dashboard::V5::Resources::Community />
 
         {{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
-        {{!-- <Dashboard::V5::Resources::LatestNewsletters /> --}}
         {{!-- <Dashboard::V5::Resources::StaffPicks /> --}}
+        {{!-- <Dashboard::V5::Resources::Newsletter /> --}}
     {{/if}}
 </section>
 

ghost/admin/app/components/dashboard/v5/charts/paid-mix.js

@@ -67,7 +67,7 @@ export default class PaidMix extends Component {
                     data: [this.dashboardStats.paidMembersByCadence.monthly, this.dashboardStats.paidMembersByCadence.annual],
                     fill: false,
                     backgroundColor: ['#8E42FF', '#FB76B4', '#E9B0CC', '#F1D5E3'],
-                    barThickness: 7
+                    barThickness: 6
                 }]
             };
         }
@@ -81,7 +81,7 @@ export default class PaidMix extends Component {
                 data,
                 fill: false,
                 backgroundColor: ['#8E42FF', '#FB76B4', '#E9B0CC', '#F1D5E3'],
-                barThickness: 7
+                barThickness: 6
             }]
         };
     }
@@ -129,7 +129,10 @@ export default class PaidMix extends Component {
                         zeroLineWidth: 1
                     },
                     ticks: {
-                        display: true
+                        display: true,
+                        fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif',
+                        fontSize: 13,
+                        fontColor: '#626d79'
                     }
                 }],
                 xAxes: [{

ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs

@@ -1,10 +1,9 @@
-<section class="gh-dashboard5-section gh-dashboard5-recent-activity">
+<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-recent-activity">
     <article class="gh-dashboard5-box">
         <div class="gh-dashboard5-list" data-test-dashboard-member-activity>
             <div class="gh-dashboard5-list-header">
-                <div class="gh-dashboard5-list-title">Recent activity</div>
+                <Dashboard::v5::Parts::Metric @label="Recent activity" />   
             </div>
-
             <div class="gh-dashboard5-list-body">
                 {{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}}     
                     {{#if eventsFetcher.isError}}
@@ -33,7 +32,7 @@
                                                 {{parsedEvent.info}}
                                             </span>
                                         </LinkTo>
-                                        <span class="gh-dashboard-activity-time">{{moment-from-now parsedEvent.timestamp}}</span>
+                                        <span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span>
                                     </div>
                                 {{/let}}
                             {{/each}}
@@ -46,7 +45,7 @@
                 {{/let}}
             </div>
             <div class="gh-dashboard5-list-footer">
-                <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
+                <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity &rarr;</LinkTo>
             </div>
         </div>
     </article>

ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs

@@ -1,8 +1,9 @@
-<section class="gh-dashboard5-section gh-dashboard5-recent-posts">
+<section class="gh-dashboard5-section gh-dashboard5-recent-posts" {{did-insert this.loadPosts}}>
     <article class="gh-dashboard5-box">
-        <div class="gh-dashboard5-list" {{did-insert this.loadPosts}}>
+        <Dashboard::v5::Parts::Metric @label="Recent posts" /> 
-            <div class="gh-dashboard5-list-header">
+        <div class="gh-dashboard5-list">
-                <div class="gh-dashboard5-list-title">Recent posts</div>
+            <div class="gh-dashboard5-list-header">  
+                <div class="gh-dashboard5-list-title">Title</div>
                 <div class="gh-dashboard5-list-title">Sends</div>
                 <div class="gh-dashboard5-list-title">Open rate</div>
             </div>
@@ -10,12 +11,12 @@
                 {{#each this.posts as |post|}}
                     <div class="gh-dashboard5-list-item">
                         <LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
-                        {{post.title}}
+                            {{post.title}}
                         </LinkTo>
                         <span>{{format-number post.email.emailCount}}</span>
                         <span class="with-percentage-bar">
-                            <span class="prototype-bar"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
                             <span>{{post.email.openRate}}%</span>
+                            <span class="prototype-bar"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
                         </span>
                     </div>
                 {{else}}
@@ -25,7 +26,7 @@
                 {{/each}}
             </div>
             <div class="gh-dashboard5-list-footer">
-                <LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts →</LinkTo>
+                <LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts &rarr;</LinkTo>
             </div>
         </div>
     </article>

ghost/admin/app/components/dashboard/v5/charts/recents.hbs

@@ -0,0 +1,113 @@
+<section class="gh-dashboard5-section gh-dashboard5-recents" {{did-insert this.loadPosts}}>
+    <article class="gh-dashboard5-box">
+        <div class="gh-dashboard5-tabs">
+            <button type="button" class="gh-dashboard5-tab {{if this.postsTabSelected 'is-selected'}}" {{on "click" this.changeTabToPosts}}>
+                <Dashboard::v5::Parts::Metric
+                    @label="Recent posts" /> 
+            </button>
+            <button type="button" class="gh-dashboard5-tab {{if this.activityTabSelected 'is-selected'}}" {{on "click" this.changeTabToActivity}}>
+                <Dashboard::v5::Parts::Metric
+                    @label="Member activity" /> 
+            </button>          
+        </div>
+        {{#if this.postsTabSelected}}
+            <div class="gh-dashboard5-recents-posts gh-dashboard5-list">
+                <div class="gh-dashboard5-list-header">  
+                    <div class="gh-dashboard5-list-title">Title</div>
+                    <div class="gh-dashboard5-list-title">Sends</div>
+                    <div class="gh-dashboard5-list-title">Open rate</div>
+                </div>
+                <div class="gh-dashboard5-list-body">
+                    {{#each this.posts as |post|}}
+                        <div class="gh-dashboard5-list-item">
+                            <div class="gh-dashboard5-list-item-sub">
+                                <LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
+                                {{post.title}}
+                                </LinkTo>
+                            </div>
+                            <div class="gh-dashboard5-list-item-sub">
+                                {{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
+                                <span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span>
+                            </div>
+                            <div class="gh-dashboard5-list-item-sub">
+                                <span class="gh-dashboard5-rate-bar">
+                                    {{!-- DEMO <span class="gh-dashboard5-metric-minivalue">75%</span> --}}
+                                    {{!-- DEMO <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span> --}}
+                                    <span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
+                                    <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
+                                </span>
+                            </div>
+                        </div>
+                    {{else}}
+                        <div class="gh-dashboard5-list-empty">
+                            <p>No published posts yet.</p>
+                        </div>
+                    {{/each}}
+                </div>
+                <div class="gh-dashboard5-list-footer">
+                    <LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts &rarr;</LinkTo>
+                </div>
+            </div>
+        {{else}}
+            <div class="gh-dashboard5-recents-activity gh-dashboard5-list" data-test-dashboard-member-activity>
+                <div class="gh-dashboard5-list-header">  
+                    <div class="gh-dashboard5-list-title">Member</div>
+                    <div class="gh-dashboard5-list-title">Event</div>
+                    <div class="gh-dashboard5-list-title">Time</div>
+                </div>
+                <div class="gh-dashboard5-list-body">
+                    {{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}}     
+                        {{#if eventsFetcher.isError}}
+                            <div class="gh-dashboard5-list-error">
+                                <p>There was an error loading events</p>
+                                {{#if eventsFetcher.errorMessage}}
+                                    <code>{{eventsFetcher.errorMessage}}</code>
+                                {{/if}}
+                            </div>
+                        {{/if}}
+                        
+                        {{#if eventsFetcher.isLoading}}
+                            <div class="gh-dashboard5-list-loading">
+                                <div class="gh-loading-spinner"></div>
+                            </div>
+                        {{else}}
+                            {{#if eventsFetcher.data}}
+                                {{#each eventsFetcher.data as |event|}}
+                                    {{#let (parse-member-event event) as |parsedEvent|}}
+                                        <div class="gh-dashboard5-list-item" data-test-dashboard-member-activity-item> 
+                                            <div class="gh-dashboard5-list-item-sub">
+                                                <LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
+                                                    <GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
+                                                    {{parsedEvent.subject}}
+                                                </LinkTo>
+                                            </div>
+                                            <div class="gh-dashboard5-list-item-sub">
+                                                {{!-- ICON {{svg-jar parsedEvent.icon}} --}}
+                                                <span>
+                                                    {{parsedEvent.action}}
+                                                    {{parsedEvent.object}}
+                                                    {{parsedEvent.info}}
+                                                </span>
+                                            </div>
+                                            <div class="gh-dashboard5-list-item-sub">
+                                                {{!-- FROM TIME <span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span> --}}
+                                                {{moment-format event.timestamp "D MMM YYYY HH:mm"}}
+                                            </div>
+                                        </div>
+                                    {{/let}}
+                                {{/each}}
+                            {{else}}
+                                <div class="gh-dashboard5-list-empty" data-test-no-member-activities>
+                                    <p>No activity yet.</p>
+                                </div>
+                            {{/if}}
+                        {{/if}}
+                    {{/let}}
+                </div>
+                <div class="gh-dashboard5-list-footer">
+                    <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity &rarr;</LinkTo>
+                </div>
+            </div>
+        {{/if}}
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/charts/recents.js

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+
+export default class Recents extends Component {
+    @service store;
+    @service feature;
+    @service session;
+    @service settings;
+
+    @tracked selected = 'posts';
+
+    @tracked posts = [];
+    
+    @action 
+    async loadPosts() {
+        this.posts = await this.store.query('post', {limit: 5, filter: 'status:published', order: 'published_at desc'});
+    }
+
+    @action
+    changeTabToPosts() {
+        this.selected = 'posts';
+    }
+
+    @action
+    changeTabToActivity() {
+        this.selected = 'activity';
+    }
+
+    get postsTabSelected() {
+        return (this.selected === 'posts');
+    }
+
+    get activityTabSelected() {
+        return (this.selected === 'activity');
+    }
+
+    get shouldDisplay() {
+        if (this.feature.improvedOnboarding) {
+            return true;
+        }
+
+        const isOwner = this.session.user?.isOwnerOnly;
+        const hasCompletedLaunchWizard = this.settings.get('editorIsLaunchComplete');
+
+        if (isOwner && !hasCompletedLaunchWizard) {
+            return false;
+        }
+
+        return true;
+    }
+}

ghost/admin/app/components/dashboard/v5/resources/community.hbs

@@ -0,0 +1,15 @@
+<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-community" {{did-insert this.load}}>
+    <article class="gh-dashboard5-box is-image">
+        <div class="gh-dashboard5-list">
+            <div class="gh-dashboard5-subtitle">
+                <h4>Ghost community</h4>
+            </div>
+            <div class="gh-dashboard5-list-body">
+                <p>Talk strategy.<br />Get advice.<br />Or, just hang out.</p>
+            </div>
+            <div class="gh-dashboard5-list-footer">
+                <a href="https://ghost.org/resources/community/" target="_blank" rel="noopener noreferrer">Share the journey →</a>
+            </div>
+        </div>
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/community.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+export default class Community extends Component {
+    @tracked loading = null;
+
+    @action
+    load() {
+        this.loading = true;
+    }
+}

ghost/admin/app/components/dashboard/v5/resources/help.hbs

@@ -1,28 +0,0 @@
-<div class="gh-main-section gh-members-help gh-dashboard5-help">
-    <div class="gh-main-section-block">
-        <div class="gh-main-section-content grey">
-            <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
-                <div class="gh-members-help-content">
-                    <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
-                    <div class="text">
-                        <h3>Building your audience with subscriber signups</h3>
-                        <p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
-                        <div class="gh-btn gh-btn-link">Start building &rarr;</div>
-                    </div>
-                </div>
-            </a>
-
-            <a href="https://ghost.org/resources/first-100-email-subscribers/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
-                <div class="gh-members-help-content">
-                    <div class="thumbnail right" style="background-image: url(assets/img/marketing/members-2.jpg);"></div>
-                    <div class="text">
-                        <h3>Get your first 100 email subscribers</h3>
-                        <p>Starting from zero? Use this guide to find your founding audience members.</p>
-                        <div class="gh-btn gh-btn-link">Become an expert &rarr;</div>
-                    </div>
-                </div>
-            </a>
-
-        </div>
-    </div>
-</div>

ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs

@@ -1,25 +0,0 @@
-<div 
-    class="dashboard-prototype-newsletters gh-dashboard5-latest-newsletters"
-    {{did-insert this.load}}
->
-    {{#if (not (or this.loading this.error))}}
-        {{#each this.newsletters as |entry|}}
-            <a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
-                <div class="gh-dashboard-box blogpost">
-                    {{#if entry.feature_image}}
-                        <div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
-                    {{/if}}
-                    <div class="content">
-                        <h2>{{entry.title}}</h2>
-                        {{#if entry.custom_excerpt}}
-                            <p>{{entry.custom_excerpt}}</p>
-                        {{else if entry.excerpt}}
-                            <p>{{entry.excerpt}}</p>
-                        {{/if}}
-                        <div class="read-time">{{entry.reading_time}} MIN READ</div>
-                    </div>
-                </div>
-            </a>
-        {{/each}}
-    {{/if}}
-</div>

ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs

@@ -0,0 +1,38 @@
+<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-newsletter" {{did-insert this.load}}>
+    <article class="gh-dashboard5-box is-secondary">
+
+
+        {{#if (not (or this.loading this.error))}}
+            <div class="gh-dashboard5-articles">
+                {{#each this.newsletters as |entry|}}
+                    <div class="gh-dashboard5-article">
+                        <h5>{{entry.title}}</h5>
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
+
+        {{!-- <div class="dashboard-prototype-newsletters">
+            {{#if (not (or this.loading this.error))}}
+                {{#each this.newsletters as |entry|}}
+                    <a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
+                        <div class="gh-dashboard-box blogpost">
+                            {{#if entry.feature_image}}
+                                <div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
+                            {{/if}}
+                            <div class="content">
+                                <h2>{{entry.title}}</h2>
+                                {{#if entry.custom_excerpt}}
+                                    <p>{{entry.custom_excerpt}}</p>
+                                {{else if entry.excerpt}}
+                                    <p>{{entry.excerpt}}</p>
+                                {{/if}}
+                                <div class="read-time">{{entry.reading_time}} MIN READ</div>
+                            </div>
+                        </div>
+                    </a>
+                {{/each}}
+            {{/if}}
+        </div> --}}
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/newsletter.js

@@ -6,9 +6,9 @@ import {tracked} from '@glimmer/tracking';
 
 const API_URL = 'https://resources.ghost.io/resources';
 const API_KEY = 'b30afc1721f5d8d021ec3450ef';
-const NEWSLETTER_COUNT = 10;
+const NEWSLETTER_COUNT = 3;
 
-export default class LatestNewsletters extends Component {
+export default class Newsletter extends Component {
     @tracked loading = null;
     @tracked error = null;
     @tracked newsletters = null;

ghost/admin/app/components/dashboard/v5/resources/resources.hbs

@@ -0,0 +1,20 @@
+<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-resources">
+    <article class="gh-dashboard5-box is-secondary">
+        <div class="gh-dashboard5-subtitle">
+            <h4>Resources</h4>
+        </div>
+        <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
+            <div class="gh-members-help-content">
+                <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
+                <div class="text">
+                    <h3>Building your audience with subscriber signups</h3>
+                    <p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
+                    <div class="gh-btn gh-btn-link">Start building &rarr;</div>
+                </div>
+            </div>
+        </a>
+        <div class="gh-dashboard5-articles-footer">
+            <a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources &rarr;</a>
+        </div>
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/resources.js

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {tracked} from '@glimmer/tracking';
 
-export default class Help extends Component {
+export default class Resources extends Component {
     @tracked loading = null;
 
     @action

ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs

@@ -1,25 +1,30 @@
-<div class="gh-dashboard5-list gh-dashboard5-staff-picks" {{did-insert this.load}}>
+<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-staff-picks" {{did-insert this.load}}>
-    {{#if (not (or this.loading this.error))}}
+    <article class="gh-dashboard5-box is-secondary">
-     <div class="gh-dashboard5-title">
+        <div class="gh-dashboard5-list">
-        <h4>Staff picks</h4>
+            {{#if (not (or this.loading this.error))}}
-    </div>
+                <div class="gh-dashboard5-list-header">
-    <div class="gh-dashboard5-list-body">
+                    <Dashboard::v5::Parts::Metric
-        {{#each this.staffPicks as |entry|}}
+                        @label="Staff picks" />   
-            <div class="gh-dashboard5-list-item">
+                </div>
-                <a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard5-list-body">
-                    <span>{{entry.title}}</span><br>
+                    {{#each this.staffPicks as |entry|}}
-                    <span class="dashboard-prototype-staff-picks-author">{{entry.creator}}</span>
+                        <div class="gh-dashboard5-list-item">
-                </a>
+                            <a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
-            </div>
+                                <span class="gh-dashboard5-list-link">{{entry.title}}</span>
-        {{else}}
+                                <div class="gh-dashboard5-list-author">{{entry.creator}}</div>
-            <div class="gh-dashboard5-list-empty">
+                            </a>
-                {{svg-jar "no-data-list"}}
+                        </div>
-                <p>No staff picks yet.</p>
+                    {{else}}
-            </div>
+                        <div class="gh-dashboard5-list-empty">
-        {{/each}}
+                            {{svg-jar "no-data-list"}}
-    </div>
+                            <p>No staff picks yet.</p>
-    <div class="gh-dashboard5-list-footer">
+                        </div>
-        <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
+                    {{/each}}
-    </div>
+                </div>
-    {{/if}}
+                <div class="gh-dashboard5-list-footer">
-</div>
+                    <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
+                </div>
+            {{/if}}
+        </div>
+    </article>
+</section>

ghost/admin/app/components/dashboard/v5/resources/staff-picks.js

@@ -5,7 +5,7 @@ import {task} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
 
 const RSS_FEED_URL = 'https://zapier.com/engine/rss/678920/ghoststaffpicks';
-const LIMIT = 5;
+const LIMIT = 3;
 
 export default class StaffPicks extends Component {
     @tracked loading = null;

ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs

@@ -1,24 +1,28 @@
-<div class="gh-dashboard5-whats-new" {{did-insert this.load}}>
+<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-whats-new" {{did-insert this.load}}>
-    {{#if (not (or this.loading this.error))}}
+    <article class="gh-dashboard5-box">
-        <div class="gh-dashboard-box whats-new {{if this.whatsNew.hasNew "has-new"}}">
+        {{#if (not (or this.loading this.error))}}
-            <div class="gh-dashboard-header-container">
+            <div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
-                <h4 class="gh-dashboard-header">What's new?</h4>
+                <div class="gh-dashboard5-list-header">
-                {{svg-jar "gift"}}
+                    <Dashboard::v5::Parts::Metric
+                        @label="What's new" />   
+                </div>
+                <div class="gh-dashboard5-list-body">
+                    {{#each this.entries as |entry|}}
+                        <div class="gh-dashboard5-list-item">
+                            <LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
+                                <span class="gh-dashboard5-list-link">{{entry.title}}</span>
+                                <div class="gh-dashboard5-list-date">{{moment-format entry.published_at "D MMM YYYY"}}</div>
+                                {{#if entry.custom_excerpt}}
+                                    <p>{{entry.custom_excerpt}}</p>
+                                {{/if}}
+                            </LinkTo>    
+                        </div>
+                    {{/each}}
+                </div>
+                <div class="gh-dashboard5-list-footer">
+                    <LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more updates &rarr;</LinkTo>
+                </div>
             </div>
-            <div class="content">
+        {{/if}}
-                {{#each this.entries as |entry|}}
+    </article>
-                    <LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
+</section>
-                        <h2>{{entry.title}}</h2>
-                        <span class="wn-date">{{moment-format entry.published_at "D MMM YYYY"}}</span>
-                        {{#if entry.custom_excerpt}}
-                            <p>{{entry.custom_excerpt}}</p>
-                        {{/if}}
-                    </LinkTo>
-                {{/each}}
-            </div>
-            <div class="footer">
-                <LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more &rarr;</LinkTo>
-            </div>
-        </div>
-    {{/if}}
-</div>

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

@@ -69,15 +69,16 @@ Dashboard v5 Layout */
 .gh-dashboard5-layout {
     display: grid;
     grid-gap: 24px;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto auto auto auto auto;
     grid-template-areas: 
-        "overview           overview           overview           overview"  
+        "overview           overview           overview           overview              overview            overview"  
-        "anchor             anchor             anchor             anchor"  
+        "anchor             anchor             anchor             anchor                anchor              anchor"  
-        "engagement         engagement         engagement         engagement" 
+        "engagement         engagement         engagement         engagement            engagement          engagement" 
-        "recent-posts       recent-posts       recent-posts       recent-posts"
+        "recents            recents            recents            recents               recents             recents"
-        "recent-activity    recent-activity    recent-activity    recent-activity"
+        "resources          resources          resources          resources             community           community";
-        "help               help               help               help";
+        /* "resources          resources          resources          resources             staff-picks         staff-picks" */
+        /* "newsletter         newsletter         newsletter         newsletter            community           community"; */
 }
 
 .gh-dashboard5-rows {
@@ -102,6 +103,14 @@ Dashboard v5 Layout */
     display: flex;
 }
 
+.gh-dashboard5-section-main {
+    margin-right: 16px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-section-aside {
+    margin-left: -16px; /* grid layout adjustments */
+}
+
 .gh-dashboard5-title {
     display: flex;
     flex-direction: row;
@@ -116,10 +125,25 @@ Dashboard v5 Layout */
     padding: 0;
 }
 
+.gh-dashboard5-subtitle {
+    display: flex;
+    flex-direction: row;
+    margin: 0 0 20px;
+}
+
+.gh-dashboard5-subtitle h4 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--white);
+    margin: 0;
+    padding: 0;
+}
+
 .gh-dashboard5-box {
     flex: 1;
     border: 1px solid var(--whitegrey);
-    padding: 24px;
+    padding: 28px 24px 24px;
     border-radius: 6px;
     display: flex;
     flex-direction: column;
@@ -131,6 +155,18 @@ Dashboard v5 Layout */
     background: #fcfcfc;
 }
 
+.gh-dashboard5-box.is-image {
+    background: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    /* background-image: url(img/get-started.jpg); */
+    background-image: url(img/abstract-2.jpg);
+
+    color: var(--white);
+    padding-top: 32px;
+}
+
 .gh-dashboard5-columns {
     flex: 1;
     padding: 0;
@@ -157,6 +193,22 @@ Dashboard v5 Layout */
     padding-right: 0;
 }
 
+.gh-dashboard5-tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.gh-dashboard5-tab {
+    opacity: 0.33;
+    margin: 0 24px 0 0;
+}
+
+.gh-dashboard5-tab.is-selected {
+    opacity: 1;
+}
+
 .gh-dashboard5-hero {
     flex: 1;
     display: flex;
@@ -298,7 +350,7 @@ Dashboard v5 Metric */
 .gh-dashboard5-metric-label {
     align-items: center;
     font-size: 1.4rem;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 1em;
     margin: 0 0 10px;
     padding: 0;
@@ -335,7 +387,7 @@ Dashboard v5 Metric */
 }
 
 .gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
-    font-size: 3.2rem;
+    font-size: 3rem;
     margin-bottom: 0;
 }
 
@@ -351,6 +403,11 @@ Dashboard v5 Metric */
     margin: 0 0 8px;
 }
 
+.gh-dashboard5-metric-minivalue {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
 .gh-dashboard5-metric-extra {
     text-transform: none;
     font-weight: 500;
@@ -375,14 +432,14 @@ Dashboard v5 List */
 .gh-dashboard5-list-header {
     display: grid;
     grid-template-columns: 55% 15% 30%;
-    padding: 0 0 24px;
+    padding: 0 0 8px;
     border-bottom: 1px solid var(--whitegrey);
 }
 
 .gh-dashboard5-list-title {
     align-items: center;
     font-size: 1.2rem;
-    text-transform: uppercase;
+    /* text-transform: uppercase; */
     font-weight: 500;
     letter-spacing: .3px;
     line-height: 1em;
@@ -390,6 +447,29 @@ Dashboard v5 List */
     color: #7c8b9a;
     white-space: nowrap;
     padding: 0 24px 0 0;
+/* 
+    align-items: center;
+    font-size: 1.4rem;
+    font-weight: 700;
+    line-height: 1em;
+    margin: 0 0 10px;
+    padding: 0;
+    color: #15171a;
+    white-space: nowrap;
+    letter-spacing: .2px;
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: #626d79; */
+
+    /* border-bottom: 1px solid rgb(230, 233, 235); */
+    font-size: 1.1rem;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    color: var(--black);
+    /* padding: 10px 20px; */
+    padding: 0 20px 8px 0;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
 .gh-dashboard5-list-body {
@@ -405,21 +485,12 @@ Dashboard v5 List */
     display: grid;
     grid-template-columns: 55% 15% 30%;
     padding: 8px 0;
-    border-bottom: 1px solid var(--whitegrey);
-}
-
-.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
-    grid-template-columns: 80% 20%;
 }
 
 .gh-dashboard5-list-item:nth-child(3) {
     border-bottom: 0 none;
 }
 
-.gh-dashboard5-list-item > span {
-    padding: 0 24px 4px 0;
-}
-
 .gh-dashboard5-list-item:last-child {
     border-bottom: 0;
 }
@@ -433,24 +504,18 @@ Dashboard v5 List */
     align-items: center;
 }
 
-.gh-dashboard5-list-item > span {
-    font-size: 1.8rem;
-    font-weight: 600;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-}
-
 .gh-dashboard5-list-item svg {
     width: 26px;
     height: 26px;
-    margin: 0 0.75rem 0 0;
+    margin: 0 0.5rem 0 -4px;
 }
 
-.gh-dashboard5-list-item > a > span {
+.gh-dashboard5-list-item-sub {
-    color: var(--midgrey);
+    display: flex;
-    padding: 0 0 0 0.5rem;
+    flex-direction: row;
-    white-space: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 32px;
 }
 
 .gh-dashboard5-list-footer {
@@ -458,6 +523,22 @@ Dashboard v5 List */
     padding: 20px 0 0;
 }
 
+.gh-dashboard5-list-date {
+    font-size: 1.3rem;
+    color: var(--midlightgrey);
+    text-align: right;
+    padding: 3px 0 0 0;
+    white-space: nowrap;
+}
+
+.gh-dashboard5-list-author {
+    font-size: 1.3rem;
+    color: var(--midlightgrey);
+    text-align: right;
+    padding: 3px 0 0 0;
+    white-space: nowrap;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Section Overview */
@@ -471,6 +552,11 @@ Dashboard v5 Section Overview */
     padding: 24px;
 }
 
+.gh-dashboard5-overview .gh-dashboard5-box {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
 .gh-dashboard5-overview .gh-dashboard5-area > div {
     flex: 1;
     border-right: 1px solid var(--whitegrey);
@@ -493,7 +579,7 @@ Dashboard v5 Section Anchor */
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-box {
-    padding: 28px 24px 8px;
+    padding-bottom: 8px;
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-stats {
@@ -575,6 +661,20 @@ Dashboard v5 Section Anchor */
     margin-top: 48px;
 }
 
+.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
+    top: -8px;
+    right: -18px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
+    margin-top: 40px;
+}
+
+.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart {
+    margin-top: 0;
+}
+
+
 /* --------------------------------- 
 Dashboard v5 Section Engagement */
 
@@ -583,47 +683,11 @@ Dashboard v5 Section Engagement */
     position: relative;
 }
 
-.gh-dashboard5-engagement .gh-dashboard5-box {
-    padding-top: 28px;
-}
-
 .gh-dashboard5-engagement .gh-dashboard5-columns {
     padding-top: 32px;
 }
 
 
-/* --------------------------------- 
-Dashboard v5 Section Email */
-
-.gh-dashboard5-email {
-    grid-area: email;    
-}
-
-.gh-dashboard5-email .gh-dashboard5-box {
-    padding-top: 28px;
-}
-
-
-/* --------------------------------- 
-Dashboard v5 Section Email Open Rate */
-
-.gh-dashboard5-email-open-rate {
-    grid-area: email-open-rate;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-box {
-    padding-top: 28px;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
-    margin: 28px 0 0;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
-    padding: 0 16px 0 0;
-}
-
-
 /* --------------------------------- 
 Dashboard v5 Section Recent Posts */
 
@@ -632,7 +696,6 @@ Dashboard v5 Section Recent Posts */
 }
 
 .gh-dashboard5-recent-posts .gh-dashboard5-box {
-    padding: 28px 24px 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -671,6 +734,19 @@ Dashboard v5 Section Recent Posts */
     padding-top: 12px;
 }
 
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item > span {
+    font-size: 1.8rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 24px 4px 0;
+}
+
+.gh-dashboard5-recent-posts .gh-dashboard5-list-header {
+    margin-top: 24px;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Section Recent Activity */
@@ -680,7 +756,6 @@ Dashboard v5 Section Recent Activity */
 }
 
 .gh-dashboard5-recent-activity .gh-dashboard5-box {
-    padding: 28px 24px 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -714,20 +789,267 @@ Dashboard v5 Section Recent Activity */
     margin: 0 12px 0 0;
 }
 
-.gh-dashboard5-recent-activity .gh-dashboard5-list-item > span.gh-dashboard-activity-time {
+.gh-dashboard5-recent-activity .gh-dashboard5-list-header,
-    font-size: 1.2rem;
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
-    color: var(--midlightgrey);
+    grid-template-columns: 80% 20%;
-    text-align: right;
+}
-    padding-right: 0;
+
-    padding-top: 6px;
+.gh-dashboard5-recent-activity .gh-dashboard5-list-item > a > span {
+    color: var(--midgrey);
+    padding: 0 0 0 0.5rem;
+    white-space: nowrap;
 }
 
 
 /* --------------------------------- 
-Dashboard v5 Section Help */
+Dashboard v5 Section Recents */
 
-.gh-dashboard5-help {
+.gh-dashboard5-recents {
-    grid-area: help;
+    grid-area: recents;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-title {
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-item {
+    height: 100%;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-item a > span {
+    width: 80%;
+    overflow: hidden;
+    color: var(--darkgrey);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-item a > span {
+    display: inline-block;
+    height: 57px;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-title:last-child,
+.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child {
+    margin-left: -6px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-recents .gh-content-entry-title {
+    font-weight: 600;
+    font-size: 14px !important;
+    color: rgb(21, 23, 26);
+}
+
+.gh-dashboard5-recents .footer {
+    padding-top: 12px;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-item > span {
+    font-size: 1.8rem;
+    font-weight: 600;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 24px 4px 0;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-header {
+    margin-top: 32px;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-loading {
+    min-height: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-dashboard5-recents .gh-dashboard5-list-title:last-child,
+.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child {
+    margin-left: -6px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-recents-activity .gh-dashboard5-list-header,
+.gh-dashboard5-recents-activity .gh-dashboard5-list-item {
+    grid-template-columns: 35% 35% 30%;
+}
+
+.gh-dashboard5-recents-activity .gh-dashboard5-list-title:nth-child(2),
+.gh-dashboard5-recents-activity .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:nth-child(2) {
+    margin-left: -4px; /* grid layout adjustments */
+}
+
+.gh-dashboard5-recents-activity .gh-dashboard5-list-item-sub:nth-child(2) > span {
+    text-transform: lowercase;
+    color: #626d79;
+    font-weight: 500;
+}
+
+.gh-dashboard5-recents-activity .gh-dashboard5-list-item-sub:nth-child(2) > span:first-letter {
+    text-transform: uppercase;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section What's New */
+
+.gh-dashboard5-whats-new {
+    grid-area: whats-new;
+}
+
+.gh-dashboard5-whats-new .gh-dashboard5-list-header,
+.gh-dashboard5-whats-new .gh-dashboard5-list-item {
+    grid-template-columns: 100%;
+}
+
+.gh-dashboard5-whats-new .gh-dashboard5-list-item a {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: 1.65rem;
+    font-weight: 600;
+    line-height: 1.4em;
+    margin-bottom: 8px;
+    color: var(--black);
+}
+
+.gh-dashboard5-whats-new .gh-dashboard5-list-date {
+    padding-top: 3px;
+}
+
+.gh-dashboard5-whats-new .gh-dashboard5-list-item:first-child .gh-dashboard5-list-link::after {
+    display: inline-block;
+    content: "New";
+    font-size: 1.2rem;
+    white-space: nowrap;
+    background: #30cf43;
+    text-transform: uppercase;
+    color: #fff;
+    line-height: 1;
+    border-radius: 2px;
+    margin-left: 8px;
+    margin-top: 1px;
+    padding: 3px 4px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Resources */
+
+.gh-dashboard5-resources {
+    grid-area: resources;
+}
+
+.gh-dashboard5-resources .gh-dashboard5-articles {
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    margin-top: 16px;
+}
+
+.gh-dashboard5-resources .gh-dashboard5-articles-footer {
+    margin-top: 20px;
+}
+
+.gh-dashboard5-resources .gh-members-help-card {
+    padding: 24px;
+}
+
+.gh-dashboard5-resources .gh-dashboard5-subtitle h4 {
+    color: var(--darkgrey);
+}
+
+.gh-dashboard5-resources .gh-dashboard5-box {
+    padding-top: 32px;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Staff Picks */
+
+.gh-dashboard5-staff-picks {
+    grid-area: staff-picks;
+}
+
+.gh-dashboard5-staff-picks .gh-dashboard5-list-header,
+.gh-dashboard5-staff-picks .gh-dashboard5-list-item {
+    grid-template-columns: 100%;
+}
+
+.gh-dashboard5-staff-picks .gh-dashboard5-list-item a {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    font-size: 1.65rem;
+    font-weight: 600;
+    line-height: 1.4em;
+    margin-bottom: 8px;
+    color: var(--black);
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Latest Newsletters */
+
+.gh-dashboard5-newsletter {
+    grid-area: newsletter;
+}
+
+.gh-dashboard5-newsletter .gh-dashboard5-articles {
+    display: grid;
+    grid-gap: 24px;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    flex: 1;
+}
+
+.gh-dashboard5-newsletter .gh-dashboard5-article {
+    background: var(--purple);
+    border-radius: 6px;
+    padding: 24px;
+}
+
+.gh-dashboard5-newsletter .gh-dashboard5-article h5 {
+    color: var(--white);
+    font-size: 1.2rem;
+    padding: 0 32px 0 0;
+}
+
+
+/* --------------------------------- 
+Dashboard v5 Section Community */
+
+.gh-dashboard5-community {
+    grid-area: community;
+}
+
+.gh-dashboard5-community .gh-dashboard5-list-body {
+    justify-content: flex-start;
+}
+
+.gh-dashboard5-community .gh-dashboard5-list-body p {
+    font-size: 3.4rem;
+    font-weight: 700;
+    line-height: 1.3em;
+    padding: 0 64px 0 0;
+}
+
+.gh-dashboard5-community .gh-dashboard5-list-footer {
+    border-color: transparent;
+}
+
+.gh-dashboard5-community .gh-dashboard5-list-footer a {
+    color: var(--white);
+    font-weight: 800;
 }
 
 
@@ -742,39 +1064,41 @@ Dashboard v5 Misc */
     border-bottom: 0;
 }
 
-
+.gh-dashboard5-list-footer a,
-
+.gh-dashboard5-articles-footer a {
-.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
+    font-weight: 600;
-    top: -11px;
-    right: -18px;
 }
 
-.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
+.gh-dashboard5-rate-bar {
-    margin-top: 40px;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
 }
 
-.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart {
+.gh-dashboard5-rate-amount {
-    margin-top: 0;
+    height: 6px;
-}
-
-/* remove me */
-.prototype-bar {
-    height: 5px;
     border-radius: 2.5px;
     background: var(--whitegrey);
     overflow: hidden;
     position: relative;
     display: block;
     flex-grow: 1;
+    margin-left: 20px;
 }
 
-.prototype-bar + span {
+.gh-dashboard5-rate-amount + span {
     flex-shrink: 0;
     padding-left: 15px;
 }
 
-.prototype-bar > span {
+.gh-dashboard5-rate-amount > span {
-    background: var(--purple);
+    /* background: var(--purple); */
+
+    background: rgb(213,184,255);
+    background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
+
     border-top-right-radius: 2.5px;
     border-bottom-right-radius: 2.5px;
     position: absolute;