Merge pull request #2269 from oasisprotocol/lw/align-balance

Right-align balances

Author: lukaw3d

.changelog/2269.trivial.md

@@ -0,0 +1 @@
+Right-align balances

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -73,19 +73,27 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
       </dd>
       <dt>{t('account.totalBalance')}</dt>
       <dd>
-        <RoundedBalance value={account.total} ticker={account.ticker} />
+        <div className="w-full max-w-[25ex] text-right">
+          <RoundedBalance value={account.total} ticker={account.ticker} />
+        </div>
       </dd>
       <StyledListTitle>{t('account.available')}</StyledListTitle>
       <dd>
-        <RoundedBalance value={account.available} ticker={account.ticker} />
+        <div className="w-full max-w-[25ex] text-right">
+          <RoundedBalance value={account.available} ticker={account.ticker} />
+        </div>
       </dd>
       <StyledListTitle>{t('common.staked')}</StyledListTitle>
       <dd>
-        <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+        <div className="w-full max-w-[25ex] text-right">
+          <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+        </div>
       </dd>
       <StyledListTitle>{t('account.debonding')}</StyledListTitle>
       <dd>
-        <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+        <div className="w-full max-w-[25ex] text-right">
+          <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+        </div>
       </dd>
       <dt>{t('common.nonce')}</dt>
       <dd>{account.nonce}</dd>

src/app/pages/ValidatorDetailsPage/index.tsx

@@ -176,19 +176,27 @@ export const ValidatorDetailsView: FC<{
           {account && (
             <>
               <dd>
-                <RoundedBalance value={account.total} ticker={account.ticker} />
+                <div className="w-full max-w-[25ex] text-right">
+                  <RoundedBalance value={account.total} ticker={account.ticker} />
+                </div>
               </dd>
               <StyledListTitle>{t('account.available')}</StyledListTitle>
               <dd>
-                <RoundedBalance value={account.available} ticker={account.ticker} />
+                <div className="w-full max-w-[25ex] text-right">
+                  <RoundedBalance value={account.available} ticker={account.ticker} />
+                </div>
               </dd>
               <StyledListTitle>{t('common.staked')}</StyledListTitle>
               <dd>
-                <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+                <div className="w-full max-w-[25ex] text-right">
+                  <RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
+                </div>
               </dd>
               <StyledListTitle>{t('account.debonding')}</StyledListTitle>
               <dd>
-                <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+                <div className="w-full max-w-[25ex] text-right">
+                  <RoundedBalance value={account.debonding_delegations_balance} ticker={account.ticker} />
+                </div>
               </dd>
             </>
           )}

src/locales/en/translation.json

@@ -25,7 +25,7 @@
     "sizeTooltip": "This account is indicated as an {{size}} account based on sum of assets they own.",
     "startStaking": "Start staking now",
     "title": "Account",
-    "totalBalance": "Total Balance",
+    "totalBalance": "Total balance",
     "totalValue": "Total {{value}}"
   },
   "activeAccounts": {