Moved the anchor chart select for Total/Paid/Free to the title

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

- this moves from a secondary dropdown to it being the main title one
- includes a few style fixes including fixing resources box in dark mode

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

@@ -1,8 +1,21 @@
 <section class="gh-dashboard5-section gh-dashboard5-anchor" {{did-insert this.loadCharts}}>
     <article class="gh-dashboard5-box">
         {{#if this.hasPaidTiers}}
-            <Dashboard::v5::Parts::Metric
-                @label="Members over time" /> 
+            <div class="gh-dashboard5-select-title">
+                <PowerSelect
+                    @selected={{this.selectedDisplayOption}}
+                    @options={{this.displayOptions}}
+                    @searchEnabled={{false}}
+                    @onChange={{this.onDisplayChange}}
+                    @triggerComponent="gh-power-select/trigger"
+                    @triggerClass="gh-contentfilter-menu-trigger"
+                    @dropdownClass="gh-contentfilter-menu-dropdown"
+                    @matchTriggerWidth={{false}}
+                    as |option|
+                >
+                    {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+                </PowerSelect>
+            </div>
         {{else}}
             <Dashboard::v5::Parts::Metric
                 @label="Total members"
@@ -46,40 +59,20 @@
             {{/if}}
         </div>
 
-        <div class="gh-dashboard5-selects">
-            {{#if this.hasPaidTiers}}
-                <div class="gh-dashboard5-select">
-                    <PowerSelect
-                        @selected={{this.selectedDisplayOption}}
-                        @options={{this.displayOptions}}
-                        @searchEnabled={{false}}
-                        @onChange={{this.onDisplayChange}}
-                        @triggerComponent="gh-power-select/trigger"
-                        @triggerClass="gh-contentfilter-menu-trigger"
-                        @dropdownClass="gh-contentfilter-menu-dropdown"
-                        @matchTriggerWidth={{false}}
-                        as |option|
-                    >
-                        {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
-                    </PowerSelect>
-                </div>
-            {{/if}}
-
-            <div class="gh-dashboard5-select">
-                <PowerSelect
-                    @selected={{this.selectedDaysOption}}
-                    @options={{this.daysOptions}}
-                    @searchEnabled={{false}}
-                    @onChange={{this.onDaysChange}}
-                    @triggerComponent="gh-power-select/trigger"
-                    @triggerClass="gh-contentfilter-menu-trigger"
-                    @dropdownClass="gh-contentfilter-menu-dropdown"
-                    @matchTriggerWidth={{false}}
-                    as |option|
-                >
-                    {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
-                </PowerSelect>
-            </div>
+        <div class="gh-dashboard5-select">
+            <PowerSelect
+                @selected={{this.selectedDaysOption}}
+                @options={{this.daysOptions}}
+                @searchEnabled={{false}}
+                @onChange={{this.onDaysChange}}
+                @triggerComponent="gh-power-select/trigger"
+                @triggerClass="gh-contentfilter-menu-trigger"
+                @dropdownClass="gh-contentfilter-menu-dropdown"
+                @matchTriggerWidth={{false}}
+                as |option|
+            >
+                {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+            </PowerSelect>
         </div>
     </article>
 </section>

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

@@ -23,7 +23,7 @@ const DAYS_OPTIONS = [{
 }];
 
 const DISPLAY_OPTIONS = [{
-    name: 'All members',
+    name: 'Total members',
     value: 'total'
 }, {
     name: 'Paid members',

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

@@ -1122,7 +1122,8 @@ kbd {
     border-color: #394047;
 }
 
-.gh-dashboard5 .gh-dashboard5-box.is-secondary {
+.gh-dashboard5 .gh-dashboard5-box.is-secondary,
+.gh-dashboard5 .gh-dashboard5-box.is-faded {
     background: transparent;
 }
 

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

@@ -130,6 +130,7 @@ Dashboard v5 Layout */
     color: var(--white);
     margin: 0;
     padding: 0;
+    transition: color .3s;
 }
 
 .gh-dashboard5-box {
@@ -149,7 +150,6 @@ Dashboard v5 Layout */
 
 .gh-dashboard5-box.is-faded {
     background: rgb(239,240,243);
-    /* background: linear-gradient(135deg, rgba(239,240,243,1) 0%, rgba(250,251,252,1) 100%); */
     background: linear-gradient(310deg, rgba(239,240,243,1) 0%, rgba(250,251,252,1) 100%);
 
 }
@@ -223,26 +223,12 @@ Dashboard v5 Layout */
     margin-top: 0;
 }
 
-.gh-dashboard5-selects {
-    position: absolute;
-    top: 14px;
-    right: 2px;
-    display: flex;
-    flex-direction: row;
-}
-
 .gh-dashboard5-select {
     position: absolute;
     top: 16px;
     right: 4px;
 }
 
-.gh-dashboard5-selects .gh-dashboard5-select {
-    position: relative;
-    top: auto;
-    left: auto;
-}
-
 .gh-dashboard5-select .ember-power-select-selected-item {
     font-size: 1.2rem;
     font-weight: 600;
@@ -253,6 +239,27 @@ Dashboard v5 Layout */
     white-space: nowrap;
 }
 
+.gh-dashboard5-select-title {
+    display: flex;
+    justify-content: flex-start;
+    margin: -10px 0 -12px -12px;
+}
+
+.gh-dashboard5-select-title .ember-power-select-selected-item {
+    font-size: 1.4rem;
+    font-weight: 600;
+    line-height: 1em;
+    margin: 0;
+    padding: 0;
+    letter-spacing: .2px;
+    white-space: nowrap;
+    color: var(--black);
+}
+
+.gh-dashboard5 .ember-power-select-trigger {
+    transition: none;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Chart */
@@ -671,6 +678,10 @@ Dashboard v5 Section Engagement */
     padding-top: 32px;
 }
 
+.gh-dashboard5-engagement .gh-dashboard5-select {
+    right: 6px;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Section Recent Posts */
@@ -1025,6 +1036,7 @@ Dashboard v5 Section Community */
     font-weight: 700;
     line-height: 1.3em;
     padding: 0 64px 0 0;
+    transition: color .3s;
 }
 
 .gh-dashboard5-community .gh-dashboard5-list-footer {