From 46ed9bbdbeed73755d3b37e99cebfd1f9fdff783 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Sun, 26 Nov 2023 00:46:45 +0100
Subject: [PATCH] ui(Jar): same font size for available and frozen balance

---
 src/components/Balance.module.css  | 28 ++++++++++++++++++++--------
 src/components/Balance.tsx         |  4 ++--
 src/components/jars/Jar.module.css |  4 ----
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/Balance.module.css b/src/components/Balance.module.css
index ced0b163..013532ec 100644
--- a/src/components/Balance.module.css
+++ b/src/components/Balance.module.css
@@ -22,23 +22,35 @@
   color: var(--jam-balance-color);
 }
 
-.frozenSymbol {
-  order: -2;
+.hideSymbol {
+  padding-left: 0.1em;
+  color: var(--jam-balance-deemphasize-color);
 }
 
 .bitcoinSymbol {
-  padding-right: 0.1em;
   order: -1;
+  width: 1em;
+  padding-right: 0.1em;
 }
 
 .satsSymbol {
-  padding-right: 0.1em;
-  order: 6;
+  order: 5;
 }
 
-.hideSymbol {
-  padding-left: 0.1em;
-  color: var(--jam-balance-deemphasize-color);
+.frozenSymbol {
+  order: 5;
+}
+.bitcoinAmount + .frozenSymbol {
+  order: -2;
+  width: 1em;
+  height: 1em;
+}
+
+.frozenSymbol,
+.bitcoinSymbol,
+.satsSymbol {
+  display: flex;
+  justify-content: center;
 }
 
 .bitcoinAmount .fractionalPart :nth-child(3)::before,
diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx
index 13f21723..880d0f67 100644
--- a/src/components/Balance.tsx
+++ b/src/components/Balance.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react'
+import { PropsWithChildren, MouseEventHandler, useEffect, useMemo, useState } from 'react'
 import classNames from 'classnames'
 import Sprite from './Sprite'
 import { SATS, BTC, btcToSats, satsToBtc, isValidNumber, formatBtc, formatSats } from '../utils'
@@ -53,9 +53,9 @@ const BalanceComponent = ({
         [styles.frozen]: frozen,
       })}
     >
-      {frozen && FROZEN_SYMBOL}
       {children}
       {showSymbol && symbol}
+      {frozen && FROZEN_SYMBOL}
     </span>
   )
 }
diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
index b24d8b0a..9cb838df 100644
--- a/src/components/jars/Jar.module.css
+++ b/src/components/jars/Jar.module.css
@@ -58,10 +58,6 @@
   font-size: 0.8rem;
 }
 
-.frozen.jarBalance {
-  font-size: 0.7rem;
-}
-
 .selectableJarContainer {
   display: flex;
   flex-direction: column;