frontend: refactor balance and amount-with-unit components

Amount component has text-overflow: ellipsis styling which does
not work.

Fixed text overflow should be shortened by an ellipsis.

Author: thisconnect

frontends/web/src/components/amount/amount-with-unit.module.css

@@ -7,15 +7,20 @@
 
 .unit {
   font-weight: 400;
+  flex-grow: 0;
+  flex-shrink: 0;
   color: var(--color-secondary);
   font-variant: normal;
   position: relative;
   cursor: default;
 }
 
 .availableFiatAmount {
-  color: var(--color-default);
-  padding-right: var(--space-quarter) !important;
+  align-items: baseline;
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: flex-start;
+  gap: 0.4ch;
   text-align: right;
 }
 
@@ -42,9 +47,4 @@
   .fiatRow {
     bottom: 0;
   }
-
-  .availableFiatAmount,
-  .availableFiatUnit {
-    line-height: 24px;
-  }
 }

frontends/web/src/components/amount/amount-with-unit.tsx

@@ -24,7 +24,6 @@ import style from './amount-with-unit.module.css';
 
 type TAmountWithUnitProps = {
   amount: TAmountWithConversions | undefined;
-  tableRow?: boolean;
   enableRotateUnit?: boolean;
   sign?: string;
   alwaysShowAmounts?: boolean;
@@ -34,12 +33,11 @@ type TAmountWithUnitProps = {
 
 export const AmountWithUnit = ({
   amount,
-  tableRow,
   enableRotateUnit: rotateUnit,
   sign,
   convertToFiat,
   alwaysShowAmounts = false,
-  unitClassName = ''
+  unitClassName = '',
 }: TAmountWithUnitProps) => {
   const { rotateDefaultCurrency, defaultCurrency, rotateBtcUnit } = useContext(RatesContext);
 
@@ -64,35 +62,27 @@ export const AmountWithUnit = ({
   }
 
   const enableClick = rotateUnit && (convertToFiat || isBitcoinCoin(amount.unit));
-  const formattedAmount = !!displayedAmount ?
-    (
-      <Amount
-        alwaysShowAmounts={alwaysShowAmounts}
-        amount={displayedAmount}
-        unit={displayedUnit}
-        onMobileClick={enableClick ? onClick : undefined}
-      />
-    ) : '---';
-
-  const amountUnit = <AmountUnit unit={displayedUnit} rotateUnit={enableClick ? onClick : undefined} className={unitClassName}/>;
 
-  if (tableRow) {
-    return (
-      <tr className={style.fiatRow}>
-        <td className={style.availableFiatAmount}>{formattedAmount}</td>
-        <td>{amountUnit}</td>
-      </tr>
-    );
-  }
   return (
     <span className={`
       ${style.rates || ''}
+      ${style.availableFiatAmount || ''}
       ${!displayedAmount && style.notAvailable || ''}
     `.trim()}>
       {!!displayedAmount ? sign : ''}
-      {formattedAmount}
+      {!!displayedAmount ? (
+        <Amount
+          alwaysShowAmounts={alwaysShowAmounts}
+          amount={displayedAmount}
+          unit={displayedUnit}
+          onMobileClick={enableClick ? onClick : undefined}
+        />
+      ) : '---'}
       {' '}
-      {amountUnit}
+      <AmountUnit
+        unit={displayedUnit}
+        rotateUnit={enableClick ? onClick : undefined}
+        className={unitClassName}/>
     </span>
   );
 };

frontends/web/src/components/amount/amount.module.css

@@ -1,6 +1,12 @@
 .amount {
+    align-items: baseline;
+    display: inline-flex;
+    display: flow-root; /* flow-root seems to work better on all-account. keeping inline-flex as fallback */
     flex-shrink: 1;
+    flex-basis: auto;
+    flex-grow: 0;
     font-variant: tabular-nums;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }

frontends/web/src/components/amount/conversion-amount.module.css

@@ -15,13 +15,13 @@
 .txUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  /* line-height: 1.285714; */
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
   font-size: var(--size-smaller);
   flex-shrink: 0;
+  max-width: 100%;
 }
 
 .txSmallInlineIcon img {

frontends/web/src/components/balance/balance.module.css

@@ -1,28 +1,28 @@
-.balanceTable {
-  align-items: flex-end;
-  border-collapse: collapse;
-  border-spacing: 0;
-  display: flex;
-  flex-direction: row;
-  position: relative;
+.balanceContainer {
+  color: var(--color-default);
+  max-width: 100%;
 }
 
-.balanceTable tr {
-  display: inline-block;
-  vertical-align: bottom;
-  padding-right: var(--space-half);
+.availableBalanceTitle {
+  color: var(--color-secondary);
+  line-height: 1.5;
+  margin-bottom: 10px;
 }
 
-.balanceTable td {
+.balance {
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   font-size: var(--size-large);
   font-weight: 400;
-  line-height: 1.2;
-  padding: 0;
-  vertical-align: baseline;
+  gap: var(--space-eight) var(--space-half);
+  min-height: 37px;
+  position: relative;
 }
 
-.balanceTable td:last-child {
-  font-size: var(--size-default);
+.unit {
+  font-size: var(--size-header);
 }
 
 .pendingBalance {
@@ -33,19 +33,21 @@
   padding-top: var(--space-half);
 }
 
-@media (max-width: 768px) {
+.incomingBalance {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: .4ch;
+}
 
-  .balanceTable {
-    display: inline-block;
-    margin: 0 auto;
-  }
+@media (max-width: 768px) {
 
-  .balanceTable td {
+  .balance {
     font-size: var(--size-header);
-    line-height: 1.5;
+    min-height: auto;
   }
 
   .pendingBalance {
     padding-top: var(--space-quarter);
   }
+
 }

frontends/web/src/components/balance/balance.tsx

@@ -17,9 +17,9 @@
 
 import { useTranslation } from 'react-i18next';
 import { TBalance } from '@/api/account';
-import { Amount } from '@/components/amount/amount';
 import { BalanceSkeleton } from '@/components/balance/balance-skeleton';
 import { AmountWithUnit } from '@/components/amount/amount-with-unit';
+import { SubTitle } from '@/components/title';
 import style from './balance.module.css';
 
 type TProps = {
@@ -39,44 +39,41 @@ export const Balance = ({
   }
 
   return (
-    <header className={style.balance}>
-      <table className={style.balanceTable}>
-        <tbody data-testid="availableBalance">
-          <AmountWithUnit
-            amount={balance.available}
-            tableRow
-            enableRotateUnit={!noRotateFiat}
-          />
-          <AmountWithUnit
-            amount={balance.available}
-            tableRow
-            enableRotateUnit={!noRotateFiat}
-            convertToFiat
-          />
-        </tbody>
-      </table>
-      {
-        balance.hasIncoming && (
-          <p className={style.pendingBalance}>
-            {t('account.incoming')}
-            {' '}
-            <span data-testid="incomingBalance">
-              +<Amount
-                amount={balance.incoming.amount}
-                unit={balance.incoming.unit}
+    <header className={style.balanceContainer}>
+      <SubTitle className={style.availableBalanceTitle}>
+        {t('accountSummary.availableBalance')}
+      </SubTitle>
+      <div className={style.balance} data-testid="availableBalance">
+        <AmountWithUnit
+          amount={balance.available}
+          enableRotateUnit={!noRotateFiat}
+          unitClassName={style.unit}
+        />
+        <AmountWithUnit
+          amount={balance.available}
+          enableRotateUnit={!noRotateFiat}
+          unitClassName={style.unit}
+          convertToFiat
+        />
+      </div>
+      {balance.hasIncoming && (
+        <p className={style.pendingBalance}>
+          {t('account.incoming')}
+          {' '}
+          <span
+            className={style.incomingBalance}
+            data-testid="incomingBalance">
+            +<AmountWithUnit amount={balance.incoming} />
+            <span className={style.incomingConversion}>
+              /&nbsp;
+              <AmountWithUnit
+                amount={balance.incoming}
+                convertToFiat
               />
-              {' '}{balance.incoming.unit} /
-              <span className={style.incomingConversion}>
-                {' '}
-                <AmountWithUnit
-                  amount={balance.incoming}
-                  convertToFiat
-                />
-              </span>
             </span>
-          </p>
-        )
-      }
+          </span>
+        </p>
+      )}
     </header>
   );
 };

frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css

@@ -58,6 +58,8 @@
 .amount {
     font-size: var(--size-header);
     margin: var(--space-quarter) 0;
+    max-width: 100%;
+    white-space: nowrap;
 }
 
 .headerAmountUnit {
@@ -92,6 +94,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    max-width: 100%;
 }
 
 .amountFiat {

frontends/web/src/components/transactions/transaction.tsx

@@ -20,7 +20,7 @@ import { useMediaQuery } from '@/hooks/mediaquery';
 import { Loupe } from '@/components/icon/icon';
 import { parseTimeLong, parseTimeShort } from '@/utils/date';
 import { ProgressRing } from '@/components/progressRing/progressRing';
-import { Amount } from '@/components/amount/amount';
+import { AmountWithUnit } from '../amount/amount-with-unit';
 import { ConversionAmount } from '@/components/amount/conversion-amount';
 import { Arrow } from './components/arrows';
 import { getTxSign } from '@/utils/transaction';
@@ -162,7 +162,6 @@ const Amounts = ({
   const txTypeClass = `txAmount-${type}`;
   const recv = type === 'receive';
   const displayAmount = recv ? amount.amount : deductedAmount.amount;
-  const displayUnit = recv ? amount.unit : deductedAmount.unit;
   const sign = displayAmount ? getTxSign(type) : '';
 
   return (
@@ -172,14 +171,10 @@ const Amounts = ({
     `}>
       <span className={styles.txAmount}>
         {sign}
-        <Amount
-          amount={displayAmount}
-          unit={displayUnit}
+        <AmountWithUnit
+          amount={amount}
+          unitClassName={styles.txUnit}
         />
-        <span className={styles.txUnit}>
-          {' '}
-          {displayUnit}
-        </span>
       </span>
       <ConversionAmount amount={amount} deductedAmount={deductedAmount} type={type} />
     </span>

frontends/web/src/routes/account/account.module.css

@@ -35,6 +35,11 @@
     width: var(--size-default);
 }
 
+.button {
+    height: 37px;
+    min-height: auto;
+}
+
 @media (max-width: 768px) {
     .accountHeader {
         padding: 0 var(--space-half);
@@ -46,22 +51,24 @@
 }
 
 .subTitle {
+    color: var(--color-secondary);
     font-size: var(--size-subheader);
     font-weight: normal;
-    margin-bottom: var(--space-quarter);
-    margin-top: 0;
+    margin: 0;
 }
 
 .balanceHeader {
-    align-items: flex-start;
+    align-items: flex-end;
+    color: var(--color-default);
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin-bottom: var(--space-half);
+    gap: var(--space-half);
     min-height: var(--button-height);
 }
 
 .actionsContainer {
+    --size-default: var(--size-small);
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;