ui(Jar): same font size for available and frozen balance

joinmarket-webui · Nov 29, 2023 · 46ed9bb · 46ed9bb
1 parent 6855c15
commit 46ed9bb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git 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
@@ -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
@@ -58,10 +58,6 @@
   font-size: 0.8rem;
 }
 
-.frozen.jarBalance {
-  font-size: 0.7rem;
-}
-
 .selectableJarContainer {
   display: flex;
   flex-direction: column;