fix: jar spacing (#417)

joinmarket-webui · Jul 21, 2022 · 484afbc · 484afbc
1 parent b2faeb7
commit 484afbc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx
@@ -19,7 +19,7 @@ const BalanceComponent = ({ symbol, value, symbolIsPrefix }) => {
   return (
     <span className="d-inline-flex align-items-center">
       {symbolIsPrefix && symbol}
-      <span className="d-inline-flex align-items-center slashed-zeroes">{value}</span>
+      <span className="d-inline-flex align-items-center slashed-zeroes balance-value">{value}</span>
       {!symbolIsPrefix && symbol}
     </span>
   )
@@ -101,8 +101,12 @@ export default function Balance({
     // Treat decimal numbers as btc.
     const valueIsBtc = !valueIsSats && !Number.isNaN(Number.parseFloat(valueString)) && valueString.indexOf('.') > -1
 
-    const btcSymbol = <span style={{ paddingRight: '0.1em' }}>{'\u20BF'}</span>
-    const satSymbol = <Sprite symbol="sats" width="1.2em" height="1.2em" />
+    const btcSymbol = (
+      <span className="balance-symbol" style={{ paddingRight: '0.1em' }}>
+        {'\u20BF'}
+      </span>
+    )
+    const satSymbol = <Sprite className="balance-symbol" symbol="sats" width="1.2em" height="1.2em" />
 
     if (valueIsBtc && displayMode === DISPLAY_MODE_BTC)
       return <BalanceComponent symbol={btcSymbol} value={formatBtc(valueString)} symbolIsPrefix={true} />

diff --git a/src/components/fb/FidelityBondSteps.module.css b/src/components/fb/FidelityBondSteps.module.css
@@ -3,6 +3,31 @@
   color: var(--bs-gray-600);
 }
 
+.jarsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.jarsContainer :global .balance-value {
+  font-size: 0.7rem;
+}
+
+.jarsContainer :global .balance-symbol {
+  font-size: 0.7rem;
+}
+
+@media only screen and (min-width: 768px) {
+  .jarsContainer {
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+}
+
 .utxoCard {
   display: flex;
   align-items: center;

diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
@@ -90,7 +90,7 @@ const SelectJar = ({ accountBalances, totalBalance, utxos, selectedJar, onJarSel
   return (
     <div className="d-flex flex-column gap-4">
       <div className={styles.stepDescription}>{t('earn.fidelity_bond.select_jar.description')}</div>
-      <div className="d-flex justify-content-between">
+      <div className={styles.jarsContainer}>
         {sortedAccountBalances.map((account, index) => (
           <SelectableJar
             key={index}