From e489b1765a6f4e84aeb2c2a63faa768c24bd3a56 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 8 Mar 2021 18:08:53 +0100
Subject: [PATCH] Fixed MRR summary formatting on Dashboard

- added thousands separator to MRR summary data
- separated currency from amount for better readability
---
 ghost/admin/app/controllers/dashboard.js     | 4 +++-
 ghost/admin/app/styles/layouts/dashboard.css | 8 ++++++++
 ghost/admin/app/templates/dashboard.hbs      | 2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/controllers/dashboard.js b/ghost/admin/app/controllers/dashboard.js
index d6b63af2ba..1362933c5d 100644
--- a/ghost/admin/app/controllers/dashboard.js
+++ b/ghost/admin/app/controllers/dashboard.js
@@ -83,7 +83,9 @@ export default class DashboardController extends Controller {
                 const rangeStartMRR = dateValues.length ? dateValues[0] : 0;
                 const percentGrowth = rangeStartMRR !== 0 ? ((currentMRR - rangeStartMRR) / rangeStartMRR) * 100 : 0;
                 this.mrrStatsData = {
-                    current: `${getSymbol(currencyStats.currency)}${currentMRR}`,
+                    currentAmount: currentMRR,
+                    currency: getSymbol(currencyStats.currency),
+                    currencyClass: (getSymbol(currencyStats.currency).length === 3 ? 'post' : 'pre'),
                     percentGrowth: percentGrowth.toFixed(1),
                     percentClass: (percentGrowth > 0 ? 'positive' : (percentGrowth < 0 ? 'negative' : '')),
                     options: {
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 0566832f8f..d6cc13db9a 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -264,6 +264,8 @@
 }
 
 .gh-dashboard-summary .data {
+    display: flex;
+    align-items: flex-start;
     font-size: 3.9rem;
     line-height: 4rem;
     font-weight: 600;
@@ -273,6 +275,12 @@
     white-space: nowrap;
 }
 
+.gh-dashboard-summary .data .currency {
+    font-size: 0.66em;
+    line-height: 1.25em;
+    margin-right: 2px;
+}
+
 .gh-dashboard-summary.small .data {
     font-size: 2.8rem;
     letter-spacing: -0.1px;
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index 8b7c7a2c65..38ea3e5831 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -44,7 +44,7 @@
                                 </p>
                             {{else}}
                                 <div class="gh-dashboard-summary">
-                                    <div class="data">{{this.mrrStatsData.current}}</div>
+                                    <div class="data"><span class="currency {{this.mrrStatsData.currencyClass}}">{{this.mrrStatsData.currency}}</span>{{format-number this.mrrStatsData.currentAmount}}</div>
                                     <div class="growth {{this.mrrStatsData.percentClass}}">{{this.mrrStatsData.percentGrowth}}%</div>
                                 </div>
                                 {{#if this.mrrStatsData}}