Added in dark mode grid lines for charts and futher style tweaks to the new dashboard

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

- added in dynamic dark mode grid lines for the charts
- added in some subtle other dark mode tweaks for borders
- limited the recent posts to 3 instead of 5

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

@@ -30,6 +30,7 @@ const PAID_OPTIONS = [{
 
 export default class Anchor extends Component {
     @service dashboardStats;
+    @service feature;
     @tracked chartDisplay = 'total';
     @tracked paidOptionSelected = 'paid';
 
@@ -238,6 +239,16 @@ export default class Anchor extends Component {
     }
 
     get chartOptions() {
+        let maxNumberOfTicks = 7;
+
+        if (this.selectedDaysOption.value === 30) {
+            maxNumberOfTicks = 15;
+        }
+
+        if (this.selectedDaysOption.value === 90 || this.selectedDaysOption.value === 'all') {
+            maxNumberOfTicks = 20;
+        }
+
         if (this.chartDisplay === 'breakdown') {
             return {
                 responsive: true,
@@ -313,7 +324,7 @@ export default class Anchor extends Component {
                             minRotation: 0,
                             padding: 8,
                             autoSkip: true,
-                            maxTicksLimit: 7
+                            maxTicksLimit: maxNumberOfTicks
                         },
                         type: 'time',
                         time: {
@@ -394,7 +405,7 @@ export default class Anchor extends Component {
                         display: true,
                         drawBorder: false,
                         color: 'transparent',
-                        zeroLineColor: 'rgba(200, 204, 217, 0.75)',
+                        zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
                         zeroLineWidth: 1
                     },
                     ticks: {
@@ -409,13 +420,13 @@ export default class Anchor extends Component {
                 }],
                 xAxes: [{
                     gridLines: {
-                        color: 'rgba(200, 204, 217, 0.75)',
+                        color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
                         borderDash: [4,4],
                         display: true,
                         drawBorder: true,
                         drawTicks: false,
                         zeroLineWidth: 1,
-                        zeroLineColor: 'rgba(200, 204, 217, 0.75)',
+                        zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
                         zeroLineBorderDash: [4,4]
                     },
                     ticks: {
@@ -424,10 +435,10 @@ export default class Anchor extends Component {
                         minRotation: 0,
                         padding: 14,
                         autoSkip: true,
-                        maxTicksLimit: 8,
+                        maxTicksLimit: maxNumberOfTicks,
                         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
                         fontSize: 11,
-                        fontColor: '#7c8b9a'
+                        fontColor: '#ABB4BE'
                     },
                     type: 'time',
                     time: {
@@ -450,11 +461,11 @@ export default class Anchor extends Component {
     }
 
     get chartHeight() {
-        return 300;
+        return 275;
     }
 
     get chartHeightSmall() {
-        return 250;
+        return 225;
     }
 
     calculatePercentage(from, to) {

ghost/admin/app/components/dashboard/v5/charts/email-open-rate.js

@@ -4,6 +4,7 @@ import {inject as service} from '@ember/service';
 
 export default class EmailOpenRate extends Component {
     @service dashboardStats;
+    @service feature;
 
     /**
      * Call this method when you need to fetch new data from the server. 
@@ -110,13 +111,13 @@ export default class EmailOpenRate extends Component {
                 }],
                 xAxes: [{
                     gridLines: {
-                        color: 'rgba(200, 204, 217, 0.75)',
+                        color: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
                         borderDash: [4,4],
                         display: true,
                         drawBorder: true,
                         drawTicks: false,
                         zeroLineWidth: 1,
-                        zeroLineColor: 'rgba(200, 204, 217, 0.75)',
+                        zeroLineColor: this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.85)',
                         zeroLineBorderDash: [4,4]
                     },
                     ticks: {

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

@@ -10,6 +10,6 @@ export default class RecentPosts extends Component {
     
     @action 
     async loadPosts() {
-        this.posts = await this.store.query('post', {limit: 5, filter: 'status:published', order: 'published_at desc'});
+        this.posts = await this.store.query('post', {limit: 3, filter: 'status:published', order: 'published_at desc'});
     }
 }

ghost/admin/app/styles/app-dark.css

@@ -1102,6 +1102,12 @@ kbd {
 
 
 /* Dashboard v5 */
-.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
+.gh-dashboard5 .gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
+    border-color: #394047;
+}
+
+.gh-dashboard5 .gh-dashboard5-list-header,
+.gh-dashboard5 .gh-dashboard5-list-item,
+.gh-dashboard5 .gh-dashboard5-list-footer {
     border-color: #394047;
 }

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

@@ -93,7 +93,7 @@ Dashboard v5 Layout */
 }
 
 .gh-dashboard5-row:last-child {
-    padding-top: 16px;
+    padding-top: 32px;
 }
 
 .gh-dashboard5-section {
@@ -163,13 +163,13 @@ Dashboard v5 Layout */
 }
 
 .gh-dashboard5-select .ember-power-select-selected-item {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: .3px;
     line-height: 1em;
     padding: 0;
-    color: var(--midlightgrey);
+    color: var(--midgrey);
     white-space: nowrap;
 }
 
@@ -266,12 +266,13 @@ Dashboard v5 Metric */
 
 .gh-dashboard5-metric-label {
     align-items: center;
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     text-transform: uppercase;
-    font-weight: 600;
+    letter-spacing: .2px;
+    font-weight: 500;
     letter-spacing: .3px;
     line-height: 1em;
-    margin: 0 0 14px;
+    margin: 0 0 12px;
     padding: 0;
     color: var(--midgrey);
     white-space: nowrap;
@@ -293,7 +294,7 @@ Dashboard v5 Metric */
 .gh-dashboard5-metric-value {
     display: flex;
     align-items: flex-end;
-    font-size: 2.8rem;
+    font-size: 2.6rem;
     font-weight: 600;
     letter-spacing: -.1px;
     line-height: 1em;
@@ -303,7 +304,7 @@ Dashboard v5 Metric */
 }
 
 .gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
-    font-size: 3.6rem;
+    font-size: 3.2rem;
     font-weight: 600;
     margin-bottom: 0;
 }
@@ -399,7 +400,7 @@ Dashboard v5 List */
 }
 
 .gh-dashboard5-list-item > span {
-    font-size: 2rem;
+    font-size: 1.8rem;
     font-weight: 600;
     display: flex;
     justify-content: flex-start;
@@ -458,7 +459,7 @@ Dashboard v5 Section Anchor */
     cursor: pointer;
     position: relative;
     flex: 1;
-    padding: 20px 16px 24px 12px;
+    padding: 20px 16px 24px 16px;
     margin: 2px 4px 2px 2px;
     text-align: left;
     background: transparent;
@@ -518,15 +519,6 @@ Dashboard v5 Section Anchor */
 }
 
 
-/* --------------------------------- 
-Dashboard v5 Section Email */
-
-.gh-dashboard5-email {
-    grid-area: email;
-    
-}
-
-
 /* --------------------------------- 
 Dashboard v5 Section Engagement */
 
@@ -535,6 +527,50 @@ Dashboard v5 Section Engagement */
     position: relative;
 }
 
+.gh-dashboard5-engagement .gh-dashboard5-box {
+    padding-top: 28px;
+}
+
+.gh-dashboard5-engagement .gh-dashboard5-select {
+    top: 20px;
+}
+
+
+/* --------------------------------- 
+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: 24px 0 0;
+}
+
+.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
+    padding: 0 16px 0 0;
+}
+
+.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
+    padding-top: 4px;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Section Recent Posts */
@@ -559,12 +595,7 @@ Dashboard v5 Section Recent Posts */
     height: 100%;
 }
 
-.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(4),
+.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span {
-.gh-dashboard5-recent-posts .gh-dashboard5-list-item:nth-child(5) {
-    display: none;
-}
-
-.gh-dashboard5-recent-posts .gh-dashboard5-list-item a > span{
     width: 80%;
     overflow: hidden;
     color: var(--darkgrey);
@@ -640,26 +671,6 @@ Dashboard v5 Section Recent Activity */
 }
 
 
-/* --------------------------------- 
-Dashboard v5 Section Email Open Rate */
-
-.gh-dashboard5-email-open-rate {
-    grid-area: email-open-rate;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
-    margin: 24px 0 0;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
-    padding: 0 16px 0 0;
-}
-
-.gh-dashboard5-email-open-rate .gh-dashboard5-metric-label {
-    padding-top: 4px;
-}
-
-
 /* --------------------------------- 
 Dashboard v5 Section Help */