From ca6c59234993628dfda9b8ffad62e319012f6cc7 Mon Sep 17 00:00:00 2001
From: MiZiet <55240109+MiZiet@users.noreply.github.com>
Date: Wed, 6 Oct 2021 13:53:17 +0200
Subject: [PATCH] Style redeemable balance (#6220)

Co-authored-by: Ewa Kowalska <ewcia.kowalska@gmail.com>
---
 .../page-accounts/src/Accounts/Account.tsx    | 19 +++++++++++
 .../page-addresses/src/Contacts/Address.tsx   |  7 ++++
 packages/react-components/src/AddressInfo.tsx |  2 +-
 .../src/StakingRedeemable.tsx                 | 32 ++++++++++---------
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index f9ddd3088d..599a72b75b 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/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;
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index 841b0a5605..c269cc99ed 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/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
+    }
+  }
 `);
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 65824fefee..07362c8ff7 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/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] && (
diff --git a/packages/react-components/src/StakingRedeemable.tsx b/packages/react-components/src/StakingRedeemable.tsx
index 5ea4b4715d..179b82be16 100644
--- a/packages/react-components/src/StakingRedeemable.tsx
+++ b/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>
   );