From 9460db25436d49ac97bfa02d78c123c81a661c57 Mon Sep 17 00:00:00 2001
From: Markus Tacker <Markus.Tacker@NordicSemi.no>
Date: Thu, 12 Oct 2023 14:27:08 +0200
Subject: [PATCH] fix(fuel-gauge): improve rendering

---
 src/FuelGauge.tsx | 60 +++++++++++++++++++++++------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/FuelGauge.tsx b/src/FuelGauge.tsx
index 3512901c..0149db99 100644
--- a/src/FuelGauge.tsx
+++ b/src/FuelGauge.tsx
@@ -50,41 +50,41 @@ export const FuelGauge = ({
 }) => {
 	const { V, I: current, T: temp, SoC, TTF, TTE } = fg.v
 	const isCharging = current < 0
+	const ChargingIndicator = isCharging ? Charging : NotCharging
 	return (
 		<>
 			<dt>
-				<button type={'button'} onClick={() => onClick?.()}>
-					{isCharging ? (
-						<Charging>
-							<BatteryCharging />
-						</Charging>
-					) : (
-						<NotCharging>
-							<BatteryIcon SoC={SoC} />
-						</NotCharging>
-					)}
-				</button>
+				<ChargingIndicator>
+					<button type={'button'} onClick={() => onClick?.()}>
+						{isCharging ? <BatteryCharging /> : <BatteryIcon SoC={SoC} />}
+					</button>
+				</ChargingIndicator>
 			</dt>
 			<dd class="d-flex flex-column align-items-start justify-content-center">
-				<button type={'button'} onClick={() => onClick?.()}>
-					<span class="me-2">{SoC}%</span>
-					{TTE !== undefined && (
-						<span class="me-2">empty {formatDistance(TTE)}</span>
-					)}
-					{TTF !== undefined && (
-						<span class="me-2">full {formatDistance(TTF)}</span>
-					)}
-				</button>
-				<button type={'button'} onClick={() => onClick?.()}>
-					<span class="me-2">{V / 1000} V</span>
-					<span class="me-2">
-						<Zap strokeWidth={1} /> {current} mA
-					</span>
-					<span class="me-2">
-						<Thermometer strokeWidth={1} />
-						{temp / 10} °C
-					</span>
-				</button>
+				<ChargingIndicator>
+					<button type={'button'} onClick={() => onClick?.()}>
+						<span class="me-2">{SoC}%</span>
+						{TTE !== undefined && (
+							<span class="me-1">(empty {formatDistance(TTE)})</span>
+						)}
+						{TTF !== undefined && (
+							<span class="me-1">(full {formatDistance(TTF)})</span>
+						)}
+					</button>
+				</ChargingIndicator>
+				<ChargingIndicator>
+					<button type={'button'} onClick={() => onClick?.()}>
+						<span class="me-1">{V / 1000} V</span>
+						<span class="me-1">
+							<Zap strokeWidth={1} class="me-0" />
+							{current} mA
+						</span>
+						<span class="me-1">
+							<Thermometer strokeWidth={1} class="me-0" />
+							{temp / 10} °C
+						</span>
+					</button>
+				</ChargingIndicator>
 			</dd>
 		</>
 	)