Form fixes (#5664)

* label fix

* label-tx-row

* form fixes

js/src/ui/Actionbar/actionbar.css

@@ -19,12 +19,14 @@
   background: transparent;
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
   padding: 0.5em 1.5em;
   margin: 0;
 
   .title {
     text-transform: uppercase;
+    margin: 0;
   }
 
   .children {

js/src/ui/Container/container.css

@@ -82,6 +82,11 @@ $borderColor: rgba(242, 242, 242, 1);
   background: $backgroundLight !important;
 }
 
+.cardContainer {
+  width: 100%;
+  height: 100%;
+}
+
 .link {
   width: 100%;
   height: 100%;

js/src/ui/Container/container.js

@@ -81,7 +81,7 @@ export default class Container extends Component {
           link
             ? this.renderLink(link, card)
             : (
-              <div>
+              <div className={ styles.cardContainer }>
                 { card }
                 { this.renderHover() }
               </div>

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -317,7 +317,7 @@ class AddressSelect extends Component {
 
       content = (
         <div className={ styles.cards }>
-          <div>{ cards }</div>
+          { cards }
         </div>
       );
     }

js/src/ui/Form/Input/input.js

@@ -114,11 +114,11 @@ export default class Input extends Component {
 
     return (
       <LabelWrapper
-        className={ styles.container }
+        className={ `${styles.container} ${className}` }
         label={ label }
       >
         <SemanticInput
-          className={ `${styles.input} ${className}` }
+          className={ styles.input }
           disabled={ disabled }
           error={ !!error }
           fluid

js/src/ui/Form/InputAddress/inputAddress.css

@@ -27,10 +27,6 @@
   }
 }
 
-.inputEmpty input {
-  padding-left: 0 !important;
-}
-
 .small {
   .input input {
     padding-left: 40px !important;
@@ -48,7 +44,7 @@
 .icon,
 .iconDisabled {
   position: absolute;
-  top: 35px;
+  top: 33px;
 
   &.noLabel {
     top: 10px;

js/src/ui/GasPriceSelector/CustomBar/customBar.js

@@ -38,7 +38,7 @@ export default class CustomBar extends Component {
       : COLORS.default;
 
     const borderWidth = 0.5;
-    const borderColor = 'rgba(255, 255, 255, 0.5)';
+    const borderColor = 'rgba(0, 0, 0, 0)';
 
     return (
       <g>

js/src/ui/GasPriceSelector/CustomShape/customShape.js

@@ -35,13 +35,13 @@ export default class CustomShape extends Component {
     return (
       <g>
         <Dot
-          style={ { fill: 'white' } }
+          style={ { fill: 'rgb(129, 190, 226)' } }
           cx={ cx }
           cy={ cy }
           r={ 5 }
         />
         <Dot
-          style={ { fill: 'rgb(255, 99, 132)' } }
+          style={ { fill: 'rgb(129, 190, 226)', zIndex: '700' } }
           cx={ cx }
           cy={ cy }
           r={ 3 }

js/src/ui/GasPriceSelector/util.js

@@ -15,12 +15,12 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 const COLORS = {
-  default: 'rgba(255, 99, 132, 0.2)',
+  default: 'rgba(33, 133, 208, 0.4)',
-  selected: 'rgba(255, 99, 132, 0.5)',
+  selected: 'rgba(33, 133, 208, 0.9)',
-  hover: 'rgba(255, 99, 132, 0.15)',
+  hover: 'rgba(33, 133, 208, 1)',
-  grid: 'rgba(255, 99, 132, 0.5)',
+  grid: 'rgba(33, 133, 208, 0.6)',
-  line: 'rgb(255, 99, 132)',
+  line: 'rgba(0, 0, 0, 0.4)',
-  intersection: '#fff'
+  intersection: '#81BEE2'
 };
 
 const countModifier = (count) => {

js/src/ui/MethodDecoding/methodDecoding.css

@@ -71,6 +71,9 @@
 }
 
 .inputs, .addressContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   padding-left: 2em;
 }
 

js/src/ui/MethodDecoding/methodDecoding.js

@@ -20,7 +20,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { TypedInput, InputAddress } from '../Form';
+import IdentityIcon from '~/ui/IdentityIcon';
+import { TypedInput, Label } from '../Form';
 import Loading from '../Loading';
 import MethodDecodingStore from './methodDecodingStore';
 
@@ -622,12 +623,12 @@ class MethodDecoding extends Component {
   renderAddressName (address, withName = true) {
     return (
       <div className={ styles.addressContainer }>
-        <InputAddress
+        <IdentityIcon
-          disabled
+          address={ address }
-          className={ styles.address }
+          center
-          value={ address }
+          inline
-          text={ withName }
         />
+        <Label>{address}</Label>
       </div>
     );
   }

js/src/views/Account/Transfer/Details/details.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
-import Form, { AddressSelect, Checkbox, Input, InputAddressSelect } from '@parity/ui/Form';
+import Form, { AddressSelect, Checkbox, Input, InputAddressSelect, Label } from '@parity/ui/Form';
 
 import TokenSelect from './tokenSelect';
 import styles from '../transfer.css';
@@ -59,13 +59,19 @@ export default class Details extends Component {
     const label = (
       <FormattedMessage
         id='transfer.details.amount.label'
-        defaultMessage='amount to transfer (in {tag})'
+        defaultMessage='Amount to transfer (in {tag})'
         values={ {
           tag: token.tag
         } }
       />
     );
 
+    let totalAmountStyle = { color: 'rgba(0,0,0,.87)' };
+
+    if (totalError) {
+      totalAmountStyle = { color: '#9F3A38' };
+    }
+
     return (
       <Form>
         { this.renderTokenSelect() }
@@ -74,12 +80,13 @@ export default class Details extends Component {
         <div className={ styles.columns }>
           <div>
             <Input
+              className={ styles.inputContainer }
               disabled={ all }
               label={ label }
               hint={
                 <FormattedMessage
                   id='transfer.details.amount.hint'
-                  defaultMessage='the amount to transfer to the recipient'
+                  defaultMessage='The amount to transfer to the recipient'
                 />
               }
               value={ value }
@@ -93,7 +100,7 @@ export default class Details extends Component {
               label={
                 <FormattedMessage
                   id='transfer.details.fullBalance.label'
-                  defaultMessage='full account balance'
+                  defaultMessage='Full account balance'
                 />
               }
               onClick={ this.onCheckAll }
@@ -102,21 +109,17 @@ export default class Details extends Component {
           </div>
         </div>
         <div className={ styles.columns }>
-          <div>
+          <div className={ styles.totalTx }>
-            <Input
+            <Label className={ styles.transferLabel }>
-              disabled
+              <FormattedMessage
-              label={
+                id='transfer.details.total.label'
-                <FormattedMessage
+                defaultMessage='Total transaction amount'
-                  id='transfer.details.total.label'
+              />
-                  defaultMessage='total transaction amount'
+            </Label>
-                />
+            <div className={ styles.totalAmount } style={ totalAmountStyle }>
-              }
+              <div>{ total }<small> ETH</small></div>
-              error={ totalError }
+              <div>{ totalError }</div>
-            >
+            </div>
-              <div className={ styles.inputoverride }>
-                { total }<small> ETH</small>
-              </div>
-            </Input>
           </div>
 
           <div>
@@ -125,7 +128,7 @@ export default class Details extends Component {
               label={
                 <FormattedMessage
                   id='transfer.details.advanced.label'
-                  defaultMessage='advanced sending options'
+                  defaultMessage='Advanced sending options'
                 />
               }
               onClick={ this.onCheckExtras }
@@ -152,13 +155,13 @@ export default class Details extends Component {
           label={
             <FormattedMessage
               id='transfer.details.sender.label'
-              defaultMessage='sender address'
+              defaultMessage='Sender address'
             />
           }
           hint={
             <FormattedMessage
               id='transfer.details.sender.hint'
-              defaultMessage='the sender address'
+              defaultMessage='The sender address'
             />
           }
           value={ sender }
@@ -174,16 +177,17 @@ export default class Details extends Component {
     return (
       <div className={ styles.address }>
         <InputAddressSelect
+          className={ styles.inputContainer }
           label={
             <FormattedMessage
               id='transfer.details.recipient.label'
-              defaultMessage='recipient address'
+              defaultMessage='Recipient address'
             />
           }
           hint={
             <FormattedMessage
               id='transfer.details.recipient.hint'
-              defaultMessage='the recipient address'
+              defaultMessage='The recipient address'
             />
           }
           error={ recipientError }

js/src/views/Account/Transfer/errors.js

@@ -15,14 +15,14 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 const ERRORS = {
-  requireSender: 'a valid sender is required for the transaction',
+  requireSender: 'A valid sender is required for the transaction',
-  requireRecipient: 'a recipient network address is required for the transaction',
+  requireRecipient: 'A recipient network address is required for the transaction',
-  invalidAddress: 'the supplied address is an invalid network address',
+  invalidAddress: 'The supplied address is an invalid network address',
-  invalidAmount: 'the supplied amount should be a valid positive number',
+  invalidAmount: 'The supplied amount should be a valid positive number',
-  invalidDecimals: 'the supplied amount exceeds the allowed decimals',
+  invalidDecimals: 'The supplied amount exceeds the allowed decimals',
-  largeAmount: 'the transaction total is higher than the available balance',
+  largeAmount: 'The transaction total is higher than the available balance',
-  gasException: 'the transaction will throw an exception with the current values',
+  gasException: 'The transaction will throw an exception with the current values',
-  gasBlockLimit: 'the transaction execution will exceed the block gas limit'
+  gasBlockLimit: 'The transaction execution will exceed the block gas limit'
 };
 
 export default ERRORS;

js/src/views/Account/Transfer/transfer.css

@@ -139,8 +139,20 @@
   font-size: 0.75em;
 }
 
-.inputoverride {
+.inputContainer {
-  padding-top: 24px !important;
+  padding-top: 10px;
+}
+
+.totalAmount {
+  padding-top: 6px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.totalTx {
+  padding-top: 10px;
 }
 
 .contentTitle {