Updated members chart style

ghost/admin/app/components/gh-members-chart.hbs

@@ -3,8 +3,8 @@
 >
 
     {{!-- Chart title/filter graph --}}
-    <div class="flex-auto gh-content-box black gh-members-chart-box">
+    <div class="gh-members-chart-box">
-        <div class="flex justify-between items-center gh-members-chart-header">
+        <div class="gh-members-chart-header">
             <h2 class="gh-members-chart-summary-heading">Total members</h2>
             <div class="view-actions">
                 <div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
@@ -36,29 +36,29 @@
                     @height={{300}} />
             {{/if}}
         </div>
-        <div class="flex justify-between pa4 pt0 pb2 nt1">
+        <div class="gh-members-chart-xlabels">
-            <span class="f8 midlightgrey">{{this.startDateLabel}}</span>
+            <span>{{this.startDateLabel}}</span>
-            <span class="f8 midlightgrey">Today</span>
+            <span>Today</span>
         </div>
     </div>
 
     {{!-- Summary --}}
-    <div class="gh-content-box grey gh-members-chart-summary flex flex-column justify-between">
+    <div class="gh-content-box vertical gh-members-chart-summary">
-        <div class="flex-auto flex flex-column justify-center items-start pa4">
+        <section>
             <h3 class="gh-members-chart-summary-heading">Total Members</h3>
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
-        </div>
+        </section>
-        <div class="flex-auto flex flex-column justify-center items-start pa4">
+        <section>
             {{#if (eq this.selectedRange.days "all-time")}}
                 <h3 class="gh-members-chart-summary-heading">All time signups</h3>
             {{else}}
                 <h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
             {{/if}}
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
-        </div>
+        </section>
-        <div class="flex-auto flex flex-column justify-center items-start pa4">
+        <section>
             <h3 class="gh-members-chart-summary-heading">Signed up today</h3>
             <div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
-        </div>
+        </section>
     </div>
 </div>

ghost/admin/app/components/gh-members-chart.js

@@ -101,10 +101,10 @@ export default Component.extend({
                 cubicInterpolationMode: 'monotone',
                 data: dateValues,
                 fill: false,
-                backgroundColor: '#B5FF18',
+                backgroundColor: '#45C32E',
                 pointRadius: 0,
                 pointHitRadius: 10,
-                borderColor: '#B5FF18',
+                borderColor: '#45C32E',
                 borderJoinStyle: 'miter'
             }]
         });
@@ -133,7 +133,7 @@ export default Component.extend({
                 intersect: false,
                 mode: 'index',
                 displayColors: false,
-                backgroundColor: '#24272B',
+                backgroundColor: '#15171A',
                 xPadding: 7,
                 yPadding: 7,
                 cornerRadius: 5,
@@ -165,8 +165,8 @@ export default Component.extend({
                     labelString: 'Date',
                     gridLines: {
                         drawTicks: false,
-                        color: (this.nightShift ? '#333F44' : '#394047'),
+                        color: (this.nightShift ? '#333F44' : '#CED4D9'),
-                        zeroLineColor: (this.nightShift ? '#333F44' : '#394047')
+                        zeroLineColor: (this.nightShift ? '#333F44' : '#CED4D9')
                     },
                     ticks: {
                         display: false,
@@ -174,6 +174,7 @@ export default Component.extend({
                         minRotation: 0,
                         padding: 6,
                         autoSkip: false,
+                        fontColor: '#626D79',
                         maxTicksLimit: 10,
                         callback: function (value, index, values) {
                             let step = (values.length - 1) / (maxTicksAllowed);
@@ -203,7 +204,7 @@ export default Component.extend({
                     },
                     ticks: {
                         maxTicksLimit: 5,
-                        fontColor: '#9baeb8',
+                        fontColor: '#626D79',
                         padding: 8,
                         precision: 0,
                         callback: function (value) {

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

@@ -173,13 +173,19 @@ p.gh-members-list-email {
 }
 
 .gh-members-chart-box {
-    margin-right: var(--main-layout-area-padding);
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    border: 1px solid var(--main-color-area-divider);
+    border-left: none;
 }
 
 .gh-members-chart-header {
-    padding: 12px 7px 12px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 12px 0;
     margin-bottom: 10px;
-    border-bottom: var(--main-color-area-divider) 1px solid;
 }
 
 .gh-members-chart-header .gh-contentfilter {
@@ -188,12 +194,9 @@ p.gh-members-list-email {
 }
 
 .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
-    border-radius: 4px;
+    border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     height: 16px;
     padding: 0 8px;
-    background: var(--white);
-    color: var(--black);
 }
 
 .gh-members-chart-dropdown {
@@ -202,15 +205,38 @@ p.gh-members-list-email {
 
 .gh-members-chart-container {
     height: 186px;
-    margin: 0;
+    margin: 0 0 0 -16px;
-    padding: 4px 7px 11px 2px;
+    padding: 4px 20px 11px 0;
+}
+
+.gh-members-chart-xlabels {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 1.3rem;
+    color: var(--middarkgrey);
+    padding: 0 28px 0 0;
 }
 
 .gh-members-chart-summary {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     flex-basis: 24%;
     min-width: 244px;
 }
 
+.gh-members-chart-summary section {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 20px;
+}
+
 .gh-members-chart-summary-heading {
     font-size: 1.2rem;
     text-transform: uppercase;

ghost/admin/app/styles/patterns/boxes.css

@@ -85,4 +85,13 @@
     border: none;
     background: var(--black);
     color: var(--white);
+}
+
+.gh-content-box.vertical {
+    background: none;
+    border-left: none;
+    border-right: none;
+    border-top: 1px solid var(--main-color-area-divider);
+    border-bottom: 1px solid var(--main-color-area-divider);
+    border-radius: 0;
 }