From 42e0baf3321e1be71ea67d40fb99efc7f61a44a2 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Tue, 9 Jul 2019 17:25:06 +0200
Subject: [PATCH] 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
---
 .../src/Actions/Account/BondExtra.tsx         | 24 +++----------------
 packages/ui-app/src/Labelled.tsx              |  2 +-
 packages/ui-app/src/styles/app.css            |  2 +-
 3 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 90bda7ae07..32ed0fbd29 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/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'
diff --git a/packages/ui-app/src/Labelled.tsx b/packages/ui-app/src/Labelled.tsx
index 169f234d93..2f98244a2f 100644
--- a/packages/ui-app/src/Labelled.tsx
+++ b/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;
diff --git a/packages/ui-app/src/styles/app.css b/packages/ui-app/src/styles/app.css
index c95a34034a..6a9e903103 100644
--- a/packages/ui-app/src/styles/app.css
+++ b/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;