Bonded and available as labelExtra in Staking > bond more funds (#1371)

* bonded and available

* alphabetical ordering

* keep only available, +10% opacity for label and labelExtra

* lint

packages/app-staking/src/Actions/Account/BondExtra.tsx

@@ -8,8 +8,7 @@ import { CalculateBalanceProps } from '../../types';
 
 import BN from 'bn.js';
 import React from 'react';
-import styled from 'styled-components';
-import { Button, InputAddress, InputBalance, Modal, TxButton, TxComponent, AddressInfo } from '@polkadot/ui-app';
+import { Available, Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 import { calcSignatureLength } from '@polkadot/ui-signer/Checks';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
@@ -32,16 +31,6 @@ type State = {
 
 const ZERO = new BN(0);
 
-const BalanceWrapper = styled.div`
-  & > div {
-    justify-content: flex-end;
-
-    & .column {
-      flex: 0;
-    }
-  }
-`;
-
 class BondExtra extends TxComponent<Props, State> {
   state: State = {
     extrinsic: null
@@ -103,6 +92,7 @@ class BondExtra extends TxComponent<Props, State> {
   private renderContent () {
     const { stashId, t } = this.props;
     const { maxBalance } = this.state;
+    const available = <span className='label'>{t('available ')}</span>;
 
     return (
       <>
@@ -115,16 +105,8 @@ class BondExtra extends TxComponent<Props, State> {
             defaultValue={stashId}
             isDisabled
             label={t('stash account')}
+            labelExtra={<Available label={available} params={stashId} />}
           />
-          <BalanceWrapper>
-            <AddressInfo
-              address={stashId}
-              withBalance={{
-                available: true,
-                bonded: true
-              }}
-            />
-          </BalanceWrapper>
           <InputBalance
             autoFocus
             className='medium'

packages/ui-app/src/Labelled.tsx

@@ -62,7 +62,7 @@ const Wrapper = styled.div`
     }
 
     .labelExtra {
-      color: rgba(78, 78, 78, .75);
+      color: rgba(78, 78, 78, .85);
       font-weight: 100;
       right: 1.75rem;
       text-align: right;

packages/ui-app/src/styles/app.css

@@ -37,7 +37,7 @@ h3, h4, h5 {
 
 label {
   box-sizing: border-box;
-  color: rgba(78,78,78,.75);
+  color: rgba(78,78,78,.85);
   display: block;
   font-family: sans-serif;
   font-size: 1rem;