Style redeemable balance (#6220)

Co-authored-by: Ewa Kowalska <ewcia.kowalska@gmail.com>

packages/page-accounts/src/Accounts/Account.tsx

@@ -757,6 +757,25 @@ export default React.memo(styled(Account)`
     }
   }
 
+  && .ui--AddressInfo .ui--FormatBalance {
+    .ui--Icon, .icon-void {
+      margin-left: 0.7rem;
+      margin-right: 0.3rem;
+    }
+
+    .ui--Button.isIcon {
+      margin-left: 0.5rem;
+      padding: 0.15rem 0.2rem 0.05rem;
+      border: 1px solid var(--border-table);
+      border-radius: 4px;
+
+      .ui--Icon {
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+  
   .together > .badges {
     display: flex;
     flex-direction: column;

packages/page-addresses/src/Contacts/Address.tsx

@@ -319,4 +319,11 @@ export default React.memo(styled(Address)`
       }
     }
   }
+
+  && .ui--AddressInfo .ui--FormatBalance {
+    .ui--Icon, .icon-void {
+      margin-left: 0.7rem;
+      margin-right: 0.3rem
+    }
+  }
 `);

packages/react-components/src/AddressInfo.tsx

@@ -457,7 +457,7 @@ function AddressInfo (props: Props): React.ReactElement<Props> {
   });
 
   return (
-    <div className={`ui--AddressInfo${className}${withBalanceToggle ? ' ui--AddressInfo-expander' : ''}`}>
+    <div className={`ui--AddressInfo ${className}${withBalanceToggle ? ' ui--AddressInfo-expander' : ''}`}>
       <div className={`column${withBalanceToggle ? ' column--expander' : ''}`}>
         {renderBalances(props, lookup.current, bestNumber, t)}
         {withHexSessionId && withHexSessionId[0] && (

packages/react-components/src/StakingRedeemable.tsx

@@ -38,21 +38,23 @@ function StakingRedeemable ({ className = '', stakingInfo }: Props): React.React
   return (
     <div className={className}>
       <FormatBalance value={stakingInfo.redeemable}>
-        {allAccounts.includes((stakingInfo.controllerId || '').toString()) && (
-          <TxButton
-            accountId={stakingInfo.controllerId}
-            icon='lock'
-            isIcon
-            key='unlock'
-            params={
-              api.tx.staking.withdrawUnbonded.meta.args.length === 1
-                ? [spanCount]
-                : []
-            }
-            tooltip={t<string>('Withdraw these unbonded funds')}
-            tx={api.tx.staking.withdrawUnbonded}
-          />
-        )}
+        {allAccounts.includes((stakingInfo.controllerId || '').toString())
+          ? (
+            <TxButton
+              accountId={stakingInfo.controllerId}
+              icon='lock'
+              isIcon
+              key='unlock'
+              params={
+                api.tx.staking.withdrawUnbonded.meta.args.length === 1
+                  ? [spanCount]
+                  : []
+              }
+              tooltip={t<string>('Withdraw these unbonded funds')}
+              tx={api.tx.staking.withdrawUnbonded}
+            />
+          )
+          : <span className='icon-void'>&nbsp;</span>}
       </FormatBalance>
     </div>
   );