diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs index dab848ce8f..f84fd46206 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs @@ -19,8 +19,10 @@ -
-
-
+
+
New
+
+
Canceled
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js index e751c1bba5..5ff945be97 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js @@ -142,11 +142,11 @@ export default class PaidBreakdown extends Component { label: (tooltipItems, data) => { // new data let newValue = parseInt(data.datasets[0].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')); - document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-1').innerHTML = `New ${newValue}`; + document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-1 .value').innerHTML = `${newValue}`; // canceld data let canceledValue = Math.abs(parseInt(data.datasets[1].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','))); - document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-2').innerHTML = `Canceled ${canceledValue}`; + document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-2 .value').innerHTML = `${canceledValue}`; }, title: (tooltipItems) => { const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT); diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index fa1f5f6b01..f323c24e0f 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -290,9 +290,10 @@ Dashboard v5 Layout */ .gh-dashboard5-legend-item { font-size: 1.3rem; - font-weight: 600; + font-weight: 500; line-height: 1.4em; - color: #626d79; + letter-spacing: 0; + color: var(--midgrey); padding: 0 0 0 16px; position: relative; } @@ -566,7 +567,7 @@ Dashboard v5 Metric */ .gh-dashboard5-metric-label.is-secondary { font-size: 1.3rem; - font-weight: 600; + font-weight: 500; color: var(--middarkgrey); letter-spacing: 0; } @@ -1711,7 +1712,7 @@ Dashboard v5 Tooltips */ background: var(--white); border-radius: 9px; padding: 12px; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07), 0px 85px 80px rgba(0, 0, 0, 0.07), 0px 35.511px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 18.9859px 17.869px rgba(0, 0, 0, 0.0417275), 0px 10.6433px 10.0172px rgba(0, 0, 0, 0.035), 0px 5.65259px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.35217px 2.21381px rgba(0, 0, 0, 0.0196802); + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.17), 0px 100px 80px rgba(0, 0, 0, 0.04), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0287542), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0238443), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.02), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0161557), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0112458); border-radius: 9px; z-index: 9999; pointer-events: none; @@ -1728,7 +1729,6 @@ Dashboard v5 Tooltips */ line-height: 1em; color: var(--midlightgrey); white-space: nowrap; - letter-spacing: .2px; margin: 0 0 8px; } @@ -1742,11 +1742,52 @@ Dashboard v5 Tooltips */ } .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value { + letter-spacing: 0; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value { + display: grid; + grid-template-columns: auto auto; font-size: 1.4rem; + grid-column-gap: 12px; } .gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 { - margin: 0 0 4px; + margin-bottom: 4px; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .label, +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .label { + font-size: 1.3rem; + font-weight: 500; + line-height: 1em; + color: var(--midgrey); + padding: 0; + text-align: left; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value, +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value { + display: inline-flex; + align-items: baseline; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value::before, +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value::before { + display: block; + content: ""; + width: 9px; + height: 9px; + border-radius: 999px; + margin: 0 6px 0 0; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value::before { + background: #8E42FF; +} + +.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .value::before { + background: #FB76B4; } .gh-dashboard5-mix .gh-dashboard5-tooltip-value {