feat: Show jar total amount in detail view (#551)

joinmarket-webui · Dec 14, 2022 · 90f22e5 · 90f22e5
1 parent a4f5b44
commit 90f22e5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/src/components/jar_details/JarDetailsOverlay.module.css b/src/components/jar_details/JarDetailsOverlay.module.css
@@ -75,26 +75,6 @@
   background-color: var(--bs-gray-800);
 }
 
-.overlayContainer .tabContainer .utxoListTitleBar .operationsContainer {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.selectedUtxosSumContainer {
-  align-self: end;
-}
-
-@media only screen and (min-width: 576px) {
-  .overlayContainer .tabContainer .utxoListTitleBar .operationsContainer {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
 .overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer {
   display: flex;
   flex-direction: row;

diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -352,19 +352,32 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
                 {selectedTab === TABS.UTXOS ? (
                   <>
                     <div className={styles.utxoListTitleBar}>
-                      <div className="d-flex justify-content-center align-items-center gap-2">
-                        {refreshButton()}
-                        {utxoListTitle()}
+                      <div className="d-flex justify-content-between align-items-center w-100 flex-sm-row flex-column">
+                        <div className="d-flex justify-content-center align-items-center gap-2">
+                          {refreshButton()}
+                          {utxoListTitle()}
+                        </div>
+                        <div>
+                          <Trans i18nKey="jar_details.utxo_list.text_balance_sum_total">
+                            <Balance
+                              valueString={jar.account_balance}
+                              convertToUnit={settings.unit}
+                              showBalance={settings.showBalance}
+                            />
+                          </Trans>
+                        </div>
                       </div>
-                      <div className={styles.operationsContainer}>
+                      <div className="d-flex justify-content-between align-items-center w-100 flex-sm-row flex-column gap-2">
                         {utxos.length > 0 && (
-                          <div className={styles.freezeUnfreezeButtonsContainer}>
-                            {freezeUnfreezeButton({ freeze: true })}
-                            {freezeUnfreezeButton({ freeze: false })}
+                          <div className="order-1 order-sm-0">
+                            <div className={styles.freezeUnfreezeButtonsContainer}>
+                              {freezeUnfreezeButton({ freeze: true })}
+                              {freezeUnfreezeButton({ freeze: false })}
+                            </div>
                           </div>
                         )}
                         {selectedUtxosBalance > 0 && (
-                          <div className={styles.selectedUtxosSumContainer}>
+                          <div className="order-0 order-sm-1">
                             <Trans i18nKey="jar_details.utxo_list.text_balance_sum_selected">
                               <Balance
                                 valueString={String(selectedUtxosBalance)}

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -558,6 +558,7 @@
       "title_zero": "No UTXOs in Jar {{ jar }}",
       "title_one": "{{ count }} UTXO in Jar {{ jar }}",
       "title_other": "{{ count }} UTXOs in Jar {{ jar }}",
+      "text_balance_sum_total": "<0></0> total",
       "text_balance_sum_selected": "<0></0> selected",
       "button_freeze": "Freeze",
       "button_unfreeze": "Unfreeze",