Stats page UI updates (#20970)

[ANAL-79](https://linear.app/tryghost/issue/ANAL-79/stats-page-v10-design-refinements)

- typography is inconsistent in table headings
- chart section headings are not unified
- spacings are off between section and data headings
- inactive KPI tab colors are too light
- tech data numbers are not formatted

ghost/admin/app/components/stats/charts/kpis.js

@@ -190,7 +190,7 @@ export default class KpisComponent extends Component {
                                     x2: 0,
                                     y2: 1,
                                     colorStops: [{
-                                        offset: 0, color: hexToRgba(LINE_COLOR, 0.3)
+                                        offset: 0, color: hexToRgba(LINE_COLOR, 0.15)
                                     }, {
                                         offset: 1, color: hexToRgba(LINE_COLOR, 0.0)
                                     }],

ghost/admin/app/components/stats/charts/technical.js

@@ -4,6 +4,7 @@ import Component from '@glimmer/component';
 import React from 'react';
 import moment from 'moment-timezone';
 import {DonutChart, useQuery} from '@tinybirdco/charts';
+import {formatNumber} from '../../../helpers/format-number';
 import {inject} from 'ghost-admin/decorators/inject';
 import {statsStaticColors} from 'ghost-admin/utils/stats';
 
@@ -80,8 +81,8 @@ export default class KpisComponent extends Component {
                 <table>
                     <thead>
                         <tr>
-                            <th>{tableHead}</th>
-                            <th>Hits</th>
+                            <th><span className="gh-stats-detail-header">{tableHead}</span></th>
+                            <th><span className="gh-stats-detail-header">Visits</span></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -91,7 +92,7 @@ export default class KpisComponent extends Component {
                                     <span style={{backgroundColor: item.color, display: 'inline-block', width: '10px', height: '10px', marginRight: '5px', borderRadius: '2px'}}></span>
                                     {item.name}
                                 </td>
-                                <td>{item.value}</td>
+                                <td>{formatNumber(item.value)}</td>
                             </tr>
                         ))}
                     </tbody>
@@ -122,7 +123,7 @@ export default class KpisComponent extends Component {
                                 },
                                 extraCssText: 'border: none !important; box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.07), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02);',
                                 formatter: function (fparams) {
-                                    return `<span style="background-color: ${fparams.color}; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;"></span> ${fparams.name}: ${fparams.value}`;
+                                    return `<span style="background-color: ${fparams.color}; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;"></span> ${fparams.name}: ${formatNumber(fparams.value)}`;
                                 }
                             },
                             legend: {

ghost/admin/app/components/stats/charts/top-locations.hbs

@@ -3,7 +3,7 @@
     <div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
 </div>
 
-<div>
+<div class="gh-stats-see-all-container">
     <button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
         <span>See all &rarr;</span>
     </button>

ghost/admin/app/components/stats/charts/top-locations.js

@@ -45,7 +45,7 @@ export default class TopLocations extends Component {
             date_from: startDate.format('YYYY-MM-DD'),
             date_to: endDate.format('YYYY-MM-DD'),
             member_status: audience.length === 0 ? null : audience.join(','),
-            limit: 8
+            limit: 7
         };
 
         const {data, meta, error, loading} = useQuery({

ghost/admin/app/components/stats/charts/top-pages.hbs

@@ -21,7 +21,7 @@
     <div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
 </div>
 
-<div>
+<div class="gh-stats-see-all-container">
     <button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
         <span>See all &rarr;</span>
     </button>

ghost/admin/app/components/stats/charts/top-pages.js

@@ -56,7 +56,7 @@ export default class TopPages extends Component {
             date_from: startDate.format('YYYY-MM-DD'),
             date_to: endDate.format('YYYY-MM-DD'),
             member_status: audience.length === 0 ? null : audience.join(','),
-            limit: 8
+            limit: 7
         };
 
         const {data, meta, error, loading} = useQuery({

ghost/admin/app/components/stats/charts/top-sources.hbs

@@ -22,7 +22,7 @@
     <div {{react-render this.ReactComponent props=(hash chartRange=@chartRange audience=@audience)}}></div>
 </div>
 
-<div>
+<div class="gh-stats-see-all-container">
     <button type="button" class="gh-btn gh-btn-link gh-stats-see-all-btn" {{on "click" (fn this.openSeeAll @chartRange @audience)}}>
         <span>See all &rarr;</span>
     </button>

ghost/admin/app/components/stats/charts/top-sources.js

@@ -55,7 +55,7 @@ export default class TopPages extends Component {
             date_from: startDate.format('YYYY-MM-DD'),
             date_to: endDate.format('YYYY-MM-DD'),
             member_status: audience.length === 0 ? null : audience.join(','),
-            limit: 8
+            limit: 7
         };
 
         const {data, meta, error, loading} = useQuery({

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

@@ -71,12 +71,12 @@
 .gh-stats-tab {
     position: relative;
     margin: 0 0 1px 0;
-    color: var(--midlightgrey);
+    /* color: var(--darkgrey); */
 }
 
-.gh-stats-tab:not(.is-selected) .gh-stats-metric-label {
-    color: var(--midlightgrey);
-}
+/* .gh-stats-tab:not(.is-selected) .gh-stats-metric-label {
+    color: var(--darkgrey);
+} */
 
 .gh-stats-tab:hover {
     background-color: var(--whitegrey-l2);
@@ -111,6 +111,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    border-bottom: 1px solid var(--whitegrey);
+    margin: -4px -20px 12px;
+    padding: 0 20px 16px;
 }
 
 .gh-stats-metric-data {
@@ -141,7 +144,7 @@
 }
 
 .gh-stats-piechart-container table {
-    margin-top: 5px;
+    margin-top: -15px;
     width: 100%;
     margin-bottom: 0;
 }
@@ -192,8 +195,10 @@
 }
 
 .gh-stats-detail-header {
-    font-size: 11px;
+    font-size: 12px;
     font-weight: 500;
+    text-transform: none;
+    color: var(--midgrey);
 }
 
 .gh-stats-see-all-btn span {
@@ -210,4 +215,21 @@
 .gh-stats-detail-label,
 .gh-stats-detail-value {
     font-size: 13.5px;
+    font-weight: 500;
+}
+
+.gh-stats-see-all-container {
+    position: relative;
+}
+
+.gh-stats-see-all-container::before {
+    position: absolute;
+    display: block;
+    content: '';
+    left: 0;
+    right: 0;
+    top: -60px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, #FFF 100%);
+    height: 60px;
+    z-index: 9999;
 }