From 59659f8552322ca09f808a441c7d7617a6daeb06 Mon Sep 17 00:00:00 2001
From: Tony <tonyvanswet@gmail.com>
Date: Thu, 12 Jan 2023 22:25:37 +0100
Subject: [PATCH] add spacing for units (#140)

Co-authored-by: Mads Nedergaard <nedergaardmads@gmail.com>
---
 web/src/components/CarbonIntensitySquare.tsx   | 1 +
 web/src/features/exchanges/ExchangeTooltip.tsx | 5 +++--
 web/src/utils/formatting.ts                    | 5 ++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/components/CarbonIntensitySquare.tsx b/web/src/components/CarbonIntensitySquare.tsx
index 455a71b006..1e2b6bf295 100644
--- a/web/src/components/CarbonIntensitySquare.tsx
+++ b/web/src/components/CarbonIntensitySquare.tsx
@@ -55,6 +55,7 @@ function CarbonIntensitySquare({
             <animated.span className="font-bold">
               {number.to((x) => `${Math.round(x) || '?'}`)}
             </animated.span>
+            &nbsp;
             <span>g</span>
           </p>
         </animated.div>
diff --git a/web/src/features/exchanges/ExchangeTooltip.tsx b/web/src/features/exchanges/ExchangeTooltip.tsx
index b5c8462f69..4d3c69bb7b 100644
--- a/web/src/features/exchanges/ExchangeTooltip.tsx
+++ b/web/src/features/exchanges/ExchangeTooltip.tsx
@@ -14,7 +14,8 @@ export function CarbonIntensity({ intensity }: { intensity?: number }) {
         className="mr-1 h-3 w-3"
         style={{ backgroundColor: co2ColorScale(intensity ?? 0) }}
       />
-      <b className="flex items-center">{Math.round(intensity ?? 0) || '?'}</b> gCO₂eq/kWh
+      <b className="flex items-center">{Math.round(intensity ?? 0) || '?'}</b>
+      <p className="pl-0.5"> gCO₂eq/kWh</p>
     </div>
   );
 }
@@ -38,7 +39,7 @@ export default function ExchangeTooltip(
       {__('tooltips.crossborderexport')}:
       <div className="flex items-center p-1">
         <ZoneName zone={zoneFrom} /> <p className="m-2">→</p> <ZoneName zone={zoneTo} />
-        <b className="pt-0 text-xs ">:{formatPower(roundedNetFlow)}</b>
+        <b className="pt-0 text-xs ">: {formatPower(roundedNetFlow)}</b>
       </div>
       {__('tooltips.carbonintensityexport')}:
       <div className="p-1">
diff --git a/web/src/utils/formatting.ts b/web/src/utils/formatting.ts
index b959b44ddd..5b07f3182f 100644
--- a/web/src/utils/formatting.ts
+++ b/web/src/utils/formatting.ts
@@ -9,7 +9,10 @@ export const formatPower = function (d: number, numberDigits = DEFAULT_NUM_DIGIT
   if (d == undefined || Number.isNaN(d)) {
     return d;
   }
-  return `${d3.format(`.${numberDigits}s`)(d * 1e6)}W`;
+  const power = `${d3.format(`.${numberDigits}s`)(d * 1e6)}W` //Add a space between the number and the unit
+    .replace(/([A-Z])/, ' $1')
+    .trim();
+  return power;
 };
 
 export const formatCo2 = function (d, numberDigits = DEFAULT_NUM_DIGITS) {