From bdaf40a0ceb3e12170589f457ee3d62bd62986c9 Mon Sep 17 00:00:00 2001
From: William O'Beirne <wbobeirne@gmail.com>
Date: Thu, 22 Mar 2018 14:30:51 -0400
Subject: [PATCH] Send Form Style Adjustments (#1368)

* Remove title from account, tighten buttons and subtabs.

* Send everything button in input.

* Request tx to full width, adjust transaction fee spacing.

* Fix token balances button spacing.

* Fix address identicon flying offscreen. Tighten up identicon, show border even when theres no identicon.

* Add isSelfAddress boolean to AddressField, use it on WalletInfo tab.

* Use short amount again.

* Unused
---
 common/components/AddressField.tsx            |  8 +++-
 .../AddressFieldFactory.tsx                   | 16 +++++--
 .../AddressInputFactory.scss                  | 25 ++++++++++
 .../AddressInputFactory.tsx                   | 44 ++++++++++++------
 common/components/AmountField.tsx             | 11 +++--
 .../TokenBalances/AddCustomTokenForm.scss     |  5 +-
 .../BalanceSidebar/TokenBalances/Balances.tsx | 15 ++++--
 .../BalanceSidebar/TokenBalances/index.scss   |  8 +++-
 common/components/GasLimitField.tsx           |  2 +-
 .../SendEverything/SendEverything.scss        | 46 +++++++++++++++++++
 .../SendEverything/SendEverything.tsx         | 33 +++++++------
 common/components/SubTabs/SubTabs.scss        |  2 +-
 .../TXMetaDataPanel/TXMetaDataPanel.scss      |  2 +-
 .../components/AdvancedGas.scss               |  3 +-
 .../components/AdvancedGas.tsx                | 28 +++++------
 common/components/ui/Identicon.tsx            | 46 +++++++++----------
 common/components/ui/Input.scss               |  4 +-
 common/components/ui/UnlockHeader.scss        |  5 +-
 common/components/ui/UnlockHeader.tsx         |  4 +-
 .../components/Fields/Fields.tsx              |  5 +-
 .../components/RequestPayment.tsx             |  4 +-
 .../SendTransaction/components/WalletInfo.tsx | 18 ++------
 .../containers/Tabs/SendTransaction/index.tsx |  4 +-
 .../sass/styles/overrides/react-select.scss   |  3 +-
 common/sass/variables/forms.scss              |  3 +-
 25 files changed, 231 insertions(+), 113 deletions(-)
 create mode 100644 common/components/AddressFieldFactory/AddressInputFactory.scss
 create mode 100644 common/components/SendEverything/SendEverything.scss

diff --git a/common/components/AddressField.tsx b/common/components/AddressField.tsx
index 29318f82..6c66ea1c 100644
--- a/common/components/AddressField.tsx
+++ b/common/components/AddressField.tsx
@@ -6,14 +6,18 @@ import { Input } from 'components/ui';
 
 interface Props {
   isReadOnly?: boolean;
+  isSelfAddress?: boolean;
 }
 
-export const AddressField: React.SFC<Props> = ({ isReadOnly }) => (
+export const AddressField: React.SFC<Props> = ({ isReadOnly, isSelfAddress }) => (
   <AddressFieldFactory
+    isSelfAddress={isSelfAddress}
     withProps={({ currentTo, isValid, onChange, readOnly }) => (
       <div className="input-group-wrapper">
         <label className="input-group">
-          <div className="input-group-header">{translate('SEND_ADDR_SHORT')}</div>
+          <div className="input-group-header">
+            {translate(isSelfAddress ? 'X_ADDRESS' : 'SEND_ADDR')}
+          </div>
           <Input
             className={`input-group-input ${isValid ? '' : 'invalid'}`}
             type="text"
diff --git a/common/components/AddressFieldFactory/AddressFieldFactory.tsx b/common/components/AddressFieldFactory/AddressFieldFactory.tsx
index 70dd5cee..83cb3462 100644
--- a/common/components/AddressFieldFactory/AddressFieldFactory.tsx
+++ b/common/components/AddressFieldFactory/AddressFieldFactory.tsx
@@ -11,6 +11,7 @@ interface DispatchProps {
 
 interface OwnProps {
   to: string | null;
+  isSelfAddress?: boolean;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 
@@ -33,7 +34,13 @@ class AddressFieldFactoryClass extends React.Component<Props> {
   }
 
   public render() {
-    return <AddressInputFactory onChange={this.setAddress} withProps={this.props.withProps} />;
+    return (
+      <AddressInputFactory
+        isSelfAddress={this.props.isSelfAddress}
+        onChange={this.setAddress}
+        withProps={this.props.withProps}
+      />
+    );
   }
 
   private setAddress = (ev: React.FormEvent<HTMLInputElement>) => {
@@ -45,13 +52,16 @@ class AddressFieldFactoryClass extends React.Component<Props> {
 const AddressFieldFactory = connect(null, { setCurrentTo })(AddressFieldFactoryClass);
 
 interface DefaultAddressFieldProps {
+  isSelfAddress?: boolean;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 
-const DefaultAddressField: React.SFC<DefaultAddressFieldProps> = ({ withProps }) => (
+const DefaultAddressField: React.SFC<DefaultAddressFieldProps> = ({ isSelfAddress, withProps }) => (
   <Query
     params={['to']}
-    withQuery={({ to }) => <AddressFieldFactory to={to} withProps={withProps} />}
+    withQuery={({ to }) => (
+      <AddressFieldFactory to={to} isSelfAddress={isSelfAddress} withProps={withProps} />
+    )}
   />
 );
 
diff --git a/common/components/AddressFieldFactory/AddressInputFactory.scss b/common/components/AddressFieldFactory/AddressInputFactory.scss
new file mode 100644
index 00000000..b21d9bad
--- /dev/null
+++ b/common/components/AddressFieldFactory/AddressInputFactory.scss
@@ -0,0 +1,25 @@
+@import 'common/sass/variables';
+
+.AddressInput {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  &-input {
+    flex-grow: 1;
+  }
+
+  &-identicon {
+    padding-top: .75rem;
+    transform: translateX(20%);
+
+    @media (max-width: $screen-sm) {
+      padding-top: 1.5rem;
+
+      .Identicon {
+        width: 3.4rem !important;
+        height: 3.4rem !important;
+      }
+    }
+  }
+}
diff --git a/common/components/AddressFieldFactory/AddressInputFactory.tsx b/common/components/AddressFieldFactory/AddressInputFactory.tsx
index 4723a6cf..e369b6e4 100644
--- a/common/components/AddressFieldFactory/AddressInputFactory.tsx
+++ b/common/components/AddressFieldFactory/AddressInputFactory.tsx
@@ -6,8 +6,11 @@ import { connect } from 'react-redux';
 import { AppState } from 'reducers';
 import { CallbackProps } from 'components/AddressFieldFactory';
 import { addHexPrefix } from 'ethereumjs-util';
+import { getWalletInst } from 'selectors/wallet';
 import { getResolvingDomain } from 'selectors/ens';
 import { isValidENSAddress } from 'libs/validators';
+import { Address } from 'libs/units';
+import './AddressInputFactory.scss';
 
 interface StateProps {
   currentTo: ICurrentTo;
@@ -16,6 +19,7 @@ interface StateProps {
 }
 
 interface OwnProps {
+  isSelfAddress?: boolean;
   onChange(ev: React.FormEvent<HTMLInputElement>): void;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
@@ -29,12 +33,12 @@ const ENSStatus: React.SFC<{ isLoading: boolean; ensAddress: string; rawAddress:
   const text = 'Loading ENS address...';
   if (isLoading) {
     return (
-      <>
+      <React.Fragment>
         <Spinner /> {text}
-      </>
+      </React.Fragment>
     );
   } else {
-    return isENS ? <>{`Resolved Address: ${rawAddress}`}</> : null;
+    return isENS ? <React.Fragment>{`Resolved Address: ${rawAddress}`}</React.Fragment> : null;
   }
 };
 
@@ -42,12 +46,12 @@ type Props = OwnProps & StateProps;
 
 class AddressInputFactoryClass extends Component<Props> {
   public render() {
-    const { currentTo, onChange, isValid, withProps, isResolving } = this.props;
+    const { currentTo, onChange, isValid, withProps, isSelfAddress, isResolving } = this.props;
     const { value } = currentTo;
     const addr = addHexPrefix(value ? value.toString('hex') : '0');
     return (
-      <div className="row form-group">
-        <div className="col-xs-11">
+      <div className="AddressInput form-group">
+        <div className="AddressInput-input">
           <Query
             params={['readOnly']}
             withQuery={({ readOnly }) =>
@@ -55,13 +59,13 @@ class AddressInputFactoryClass extends Component<Props> {
                 currentTo,
                 isValid,
                 onChange,
-                readOnly: !!readOnly || this.props.isResolving
+                readOnly: !!(readOnly || this.props.isResolving || isSelfAddress)
               })
             }
           />
           <ENSStatus ensAddress={currentTo.raw} isLoading={isResolving} rawAddress={addr} />
         </div>
-        <div className="col-xs-1" style={{ padding: 0 }}>
+        <div className="AddressInput-identicon">
           <Identicon address={addr} />
         </div>
       </div>
@@ -69,8 +73,22 @@ class AddressInputFactoryClass extends Component<Props> {
   }
 }
 
-export const AddressInputFactory = connect((state: AppState) => ({
-  currentTo: getCurrentTo(state),
-  isResolving: getResolvingDomain(state),
-  isValid: isValidCurrentTo(state)
-}))(AddressInputFactoryClass);
+export const AddressInputFactory = connect((state: AppState, ownProps: OwnProps) => {
+  let currentTo: ICurrentTo;
+  if (ownProps.isSelfAddress) {
+    const wallet = getWalletInst(state);
+    const addr = wallet ? wallet.getAddressString() : '';
+    currentTo = {
+      raw: addr,
+      value: Address(addr)
+    };
+  } else {
+    currentTo = getCurrentTo(state);
+  }
+
+  return {
+    currentTo,
+    isResolving: getResolvingDomain(state),
+    isValid: isValidCurrentTo(state)
+  };
+})(AddressInputFactoryClass);
diff --git a/common/components/AmountField.tsx b/common/components/AmountField.tsx
index 12dba016..8ad4d8d0 100644
--- a/common/components/AmountField.tsx
+++ b/common/components/AmountField.tsx
@@ -1,35 +1,38 @@
 import React from 'react';
 import { AmountFieldFactory } from './AmountFieldFactory';
-import { UnitDropDown } from 'components';
+import { UnitDropDown, SendEverything } from 'components';
 import translate from 'translations';
 import { Input } from 'components/ui';
 
 interface Props {
   hasUnitDropdown?: boolean;
+  hasSendEverything?: boolean;
   showAllTokens?: boolean;
   customValidator?(rawAmount: string): boolean;
 }
 
 export const AmountField: React.SFC<Props> = ({
   hasUnitDropdown,
+  hasSendEverything,
   showAllTokens,
   customValidator
 }) => (
   <AmountFieldFactory
     withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
-      <div className="input-group-wrapper">
-        <label className="input-group input-group-inline">
+      <div className="AmountField input-group-wrapper">
+        <label className="AmountField-group input-group input-group-inline">
           <div className="input-group-header">{translate('SEND_AMOUNT_SHORT')}</div>
           <Input
             className={`input-group-input ${
               isAmountValid(raw, customValidator, isValid) ? '' : 'invalid'
             }`}
             type="number"
-            placeholder={'1'}
+            placeholder="1"
             value={raw}
             readOnly={!!readOnly}
             onChange={onChange}
           />
+          {hasSendEverything && <SendEverything />}
           {hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}
         </label>
       </div>
diff --git a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss
index 9c7271f5..def1066f 100644
--- a/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss
+++ b/common/components/BalanceSidebar/TokenBalances/AddCustomTokenForm.scss
@@ -2,6 +2,8 @@
 
 .AddCustom {
   &-field {
+    margin-bottom: 0;
+
     &-error {
       font-size: 13px;
       font-weight: normal;
@@ -14,6 +16,7 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
+    margin: 0 -$space-xs;
 
     &-help {
       text-align: center;
@@ -24,7 +27,7 @@
 
     &-btn {
       padding: 0.5rem 1.5rem;
-      margin: 0.25rem 0.5rem;
+      margin: 0 $space-xs;
     }
   }
 }
diff --git a/common/components/BalanceSidebar/TokenBalances/Balances.tsx b/common/components/BalanceSidebar/TokenBalances/Balances.tsx
index eec560ae..d5f448da 100644
--- a/common/components/BalanceSidebar/TokenBalances/Balances.tsx
+++ b/common/components/BalanceSidebar/TokenBalances/Balances.tsx
@@ -49,7 +49,10 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
       help = 'Select which tokens you would like to keep track of';
       bottom = (
         <div className="TokenBalances-buttons">
-          <button className="btn btn-primary btn-block" onClick={this.handleSetWalletTokens}>
+          <button
+            className="TokenBalances-buttons-btn btn btn-primary btn-block"
+            onClick={this.handleSetWalletTokens}
+          >
             <span>{translate('X_SAVE')}</span>
           </button>
           <p className="TokenBalances-buttons-help">{translate('PROMPT_ADD_CUSTOM_TKN')}</p>
@@ -68,10 +71,16 @@ export default class TokenBalances extends React.PureComponent<Props, State> {
     } else {
       bottom = (
         <div className="TokenBalances-buttons">
-          <button className="btn btn-default btn-xs" onClick={this.toggleShowCustomTokenForm}>
+          <button
+            className="TokenBalances-buttons-btn btn btn-default btn-xs"
+            onClick={this.toggleShowCustomTokenForm}
+          >
             <span>{translate('SEND_CUSTOM')}</span>
           </button>
-          <button className="btn btn-default btn-xs" onClick={this.props.scanWalletForTokens}>
+          <button
+            className="TokenBalances-buttons-btn btn btn-default btn-xs"
+            onClick={this.props.scanWalletForTokens}
+          >
             <span>{translate('SCAN_TOKENS')}</span>
           </button>
         </div>
diff --git a/common/components/BalanceSidebar/TokenBalances/index.scss b/common/components/BalanceSidebar/TokenBalances/index.scss
index 5cfc44a8..b6d2a827 100644
--- a/common/components/BalanceSidebar/TokenBalances/index.scss
+++ b/common/components/BalanceSidebar/TokenBalances/index.scss
@@ -37,9 +37,13 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    & > &-btn {
-      margin: 0.25rem 0.5rem;
+    margin: 0 #{-$space-xs} #{-$space-xs};
+
+    &-btn {
+      flex-grow: 1;
+      margin: 0 $space-xs $space-xs;
     }
+
     &-help {
       padding-top: 10px;
       text-align: center;
diff --git a/common/components/GasLimitField.tsx b/common/components/GasLimitField.tsx
index 3d20882b..92fbc722 100644
--- a/common/components/GasLimitField.tsx
+++ b/common/components/GasLimitField.tsx
@@ -14,7 +14,7 @@ interface Props {
 export const GasLimitField: React.SFC<Props> = ({ customLabel, disabled }) => (
   <GasLimitFieldFactory
     withProps={({ gasLimit: { raw }, onChange, readOnly, gasEstimationPending }) => (
-      <div className="input-group-wrapper AdvancedGas-gas-price">
+      <div className="input-group-wrapper">
         <label className="input-group">
           <div className="input-group-header">
             {customLabel ? customLabel : translate('TRANS_GAS')}
diff --git a/common/components/SendEverything/SendEverything.scss b/common/components/SendEverything/SendEverything.scss
new file mode 100644
index 00000000..427d0d9d
--- /dev/null
+++ b/common/components/SendEverything/SendEverything.scss
@@ -0,0 +1,46 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+$width: 40px;
+$default-opacity: 0.4;
+
+@keyframes send-everything-enter {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: $default-opacity;
+  }
+}
+
+.SendEverything {
+  @include reset-button;
+  display: block;
+  position: relative;
+  height: $input-height-base;
+  width: $width;
+  margin-left: -$width;
+  font-size: 1.4rem;
+  border-left: 1px solid #e5ecf3;
+  opacity: $default-opacity;
+  transition: $transition;
+  animation: send-everything-enter 200ms ease 1;
+  @include show-tooltip-on-hover;
+
+  &-icon {
+    transition: transform 150ms ease;
+  }
+
+  &:disabled {
+    display: none;
+  }
+
+  &:hover {
+    color: $brand-primary;
+    opacity: 1;
+
+    .SendEverything-icon {
+      transform: translateY(-2px);
+    }
+  }
+}
diff --git a/common/components/SendEverything/SendEverything.tsx b/common/components/SendEverything/SendEverything.tsx
index c849a401..e9307556 100644
--- a/common/components/SendEverything/SendEverything.tsx
+++ b/common/components/SendEverything/SendEverything.tsx
@@ -1,11 +1,13 @@
-import { Query } from 'components/renderCbs';
 import React, { Component } from 'react';
-import { TokenValue, Wei } from 'libs/units';
-import translate from 'translations';
 import { connect } from 'react-redux';
+import { Query } from 'components/renderCbs';
+import { Tooltip } from 'components/ui';
+import { TokenValue, Wei } from 'libs/units';
+import translate, { translateRaw } from 'translations';
 import { sendEverythingRequested, TSendEverythingRequested } from 'actions/transaction';
 import { getCurrentBalance } from 'selectors/wallet';
 import { AppState } from 'reducers';
+import './SendEverything.scss';
 
 interface DispatchProps {
   sendEverythingRequested: TSendEverythingRequested;
@@ -17,21 +19,22 @@ type Props = StateProps & DispatchProps;
 
 class SendEverythingClass extends Component<Props> {
   public render() {
-    if (!this.props.currentBalance) {
-      return null;
-    }
+    const { currentBalance } = this.props;
+
     return (
       <Query
         params={['readOnly']}
-        withQuery={({ readOnly }) =>
-          !readOnly ? (
-            <span className="help-block">
-              <a onClick={this.onSendEverything}>
-                <span>{translate('SEND_TRANSFERTOTAL')}</span>
-              </a>
-            </span>
-          ) : null
-        }
+        withQuery={({ readOnly }) => (
+          <button
+            className="SendEverything"
+            disabled={!!readOnly || !currentBalance}
+            onClick={this.onSendEverything}
+            aria-label={translateRaw('SEND_TRANSFERTOTAL')}
+          >
+            <i className="SendEverything-icon fa fa-angle-double-up" />
+            <Tooltip>{translate('SEND_TRANSFERTOTAL')}</Tooltip>
+          </button>
+        )}
       />
     );
   }
diff --git a/common/components/SubTabs/SubTabs.scss b/common/components/SubTabs/SubTabs.scss
index e85f7535..2b8ddb75 100644
--- a/common/components/SubTabs/SubTabs.scss
+++ b/common/components/SubTabs/SubTabs.scss
@@ -1,7 +1,7 @@
 @import 'common/sass/variables';
 
 .SubTabs {
-  margin-top: 15px;
+  margin-top: $space-xs;
 
   &-tabs {
     display: inline-block;
diff --git a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
index 5d2e0225..9624773a 100644
--- a/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
+++ b/common/components/TXMetaDataPanel/TXMetaDataPanel.scss
@@ -5,6 +5,6 @@
     display: inline-block;
     position: relative;
     margin-top: $space-sm;
-    left: -8px;
+    left: -14px;
   }
 }
diff --git a/common/components/TXMetaDataPanel/components/AdvancedGas.scss b/common/components/TXMetaDataPanel/components/AdvancedGas.scss
index c4029e04..f56179e2 100644
--- a/common/components/TXMetaDataPanel/components/AdvancedGas.scss
+++ b/common/components/TXMetaDataPanel/components/AdvancedGas.scss
@@ -5,6 +5,8 @@
   margin-bottom: 0;
 
   &-calculate-limit {
+    font-size: $font-size-small;
+
     .checkbox {
       display: flex;
       align-items: center;
@@ -15,7 +17,6 @@
         margin-right: 8px;
       }
       span {
-        font-size: 1rem;
         font-weight: 400;
       }
     }
diff --git a/common/components/TXMetaDataPanel/components/AdvancedGas.tsx b/common/components/TXMetaDataPanel/components/AdvancedGas.tsx
index 089deea3..c1efbf19 100644
--- a/common/components/TXMetaDataPanel/components/AdvancedGas.tsx
+++ b/common/components/TXMetaDataPanel/components/AdvancedGas.tsx
@@ -71,19 +71,21 @@ class AdvancedGas extends React.Component<Props, State> {
 
         <div className="AdvancedGas-flex-wrapper flex-wrapper">
           {gasPriceField && (
-            <div className="input-group-wrapper AdvancedGas-gas-price">
-              <label className="input-group">
-                <div className="input-group-header">
-                  {translateRaw('OFFLINE_STEP2_LABEL_3')} (gwei)
-                </div>
-                <Input
-                  className={!!gasPrice.raw && !validGasPrice ? 'is-invalid' : ''}
-                  type="number"
-                  placeholder="40"
-                  value={gasPrice.raw}
-                  onChange={this.handleGasPriceChange}
-                />
-              </label>
+            <div className="AdvancedGas-gas-price">
+              <div className="input-group-wrapper">
+                <label className="input-group">
+                  <div className="input-group-header">
+                    {translateRaw('OFFLINE_STEP2_LABEL_3')} (gwei)
+                  </div>
+                  <Input
+                    className={!!gasPrice.raw && !validGasPrice ? 'is-invalid' : ''}
+                    type="number"
+                    placeholder="40"
+                    value={gasPrice.raw}
+                    onChange={this.handleGasPriceChange}
+                  />
+                </label>
+              </div>
             </div>
           )}
 
diff --git a/common/components/ui/Identicon.tsx b/common/components/ui/Identicon.tsx
index 474d53e5..3aded96a 100644
--- a/common/components/ui/Identicon.tsx
+++ b/common/components/ui/Identicon.tsx
@@ -19,32 +19,32 @@ export default function Identicon(props: Props) {
       className={`Identicon ${className}`}
       title="Address Identicon"
       style={{ width: size, height: size, position: 'relative' }}
+      aria-hidden={!identiconDataUrl}
     >
       {identiconDataUrl && (
-        <React.Fragment>
-          <img
-            src={identiconDataUrl}
-            alt="Unique Address Image"
-            style={{
-              height: '100%',
-              width: '100%',
-              padding: '0px',
-              borderRadius: '50%'
-            }}
-          />
-          <div
-            className="border"
-            style={{
-              position: 'absolute',
-              height: 'inherit',
-              width: 'inherit',
-              top: 0,
-              boxShadow: '0 3px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 3px 0 rgba(0, 0, 0, 0.1)',
-              borderRadius: '50%'
-            }}
-          />
-        </React.Fragment>
+        <img
+          src={identiconDataUrl}
+          alt="Unique Address Image"
+          style={{
+            height: '100%',
+            width: '100%',
+            padding: '0px',
+            borderRadius: '50%'
+          }}
+        />
       )}
+      <div
+        className="border"
+        style={{
+          position: 'absolute',
+          height: '100%',
+          width: '100%',
+          top: 0,
+          boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.15), inset 0 0 3px 0 rgba(0, 0, 0, 0.15)',
+          borderRadius: '50%',
+          pointerEvents: 'none'
+        }}
+      />
     </div>
   );
 }
diff --git a/common/components/ui/Input.scss b/common/components/ui/Input.scss
index 4f0d6478..72d122aa 100644
--- a/common/components/ui/Input.scss
+++ b/common/components/ui/Input.scss
@@ -52,13 +52,15 @@
     width: 100%;
     border: 1px solid #e5ecf3;
     border-radius: 2px;
+    height: $input-height-base;
     padding: 0.75rem 1rem;
     font-weight: 400;
-    font-size: 1rem;
+    font-size: $input-margin-bottom;
     color: rgba(0, 0, 0, 0.87);
     box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05);
     transition: border-color 120ms, box-shadow 120ms;
     margin-bottom: 1rem;
+
     &.border-rad-right-0 {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
diff --git a/common/components/ui/UnlockHeader.scss b/common/components/ui/UnlockHeader.scss
index ae193520..50797ec8 100644
--- a/common/components/ui/UnlockHeader.scss
+++ b/common/components/ui/UnlockHeader.scss
@@ -6,10 +6,9 @@
 
   &-open {
     position: absolute;
-    top: 50%;
+    top: 0;
     right: 0;
     padding-right: none;
-    transform: translateY(-50%);
 
     &-text {
       padding-right: 8px;
@@ -19,7 +18,7 @@
   &-close {
     @include reset-button;
     position: absolute;
-    top: 56px;
+    top: 6px;
     right: 6px;
     margin: 0.5rem 1rem;
     z-index: 1;
diff --git a/common/components/ui/UnlockHeader.tsx b/common/components/ui/UnlockHeader.tsx
index 88a5671c..72390cc3 100644
--- a/common/components/ui/UnlockHeader.tsx
+++ b/common/components/ui/UnlockHeader.tsx
@@ -8,7 +8,7 @@ import closeIcon from 'assets/images/close.svg';
 import './UnlockHeader.scss';
 
 interface Props {
-  title: string;
+  title?: string;
   wallet: IWallet;
   disabledWallets?: DisabledWallets;
   showGenerateLink?: boolean;
@@ -35,7 +35,7 @@ export class UnlockHeader extends React.PureComponent<Props, State> {
 
     return (
       <article className="UnlockHeader">
-        <h1 className="UnlockHeader-title">{title}</h1>
+        {title && <h1 className="UnlockHeader-title">{title}</h1>}
         {wallet &&
           !isExpanded && (
             <button
diff --git a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
index 7aa26835..f185e5be 100644
--- a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
+++ b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
@@ -5,7 +5,6 @@ import {
   AddressField,
   AmountField,
   TXMetaDataPanel,
-  SendEverything,
   CurrentCustomMessage,
   GenerateTransaction,
   SendButton,
@@ -20,10 +19,10 @@ import { NonStandardTransaction } from './components';
 const content = (
   <div className="Tab-content-pane">
     <AddressField />
+
     <div className="row form-group">
       <div className="col-xs-12">
-        <AmountField hasUnitDropdown={true} />
-        <SendEverything />
+        <AmountField hasUnitDropdown={true} hasSendEverything={true} />
       </div>
     </div>
 
diff --git a/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx b/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx
index 075ee9de..8ac1799d 100644
--- a/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx
+++ b/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx
@@ -97,7 +97,7 @@ class RequestPayment extends React.Component<Props, {}> {
           <AddressField isReadOnly={true} />
 
           <div className="row form-group">
-            <div className="col-xs-11">
+            <div className="col-xs-12">
               <AmountField
                 hasUnitDropdown={true}
                 showAllTokens={true}
@@ -107,7 +107,7 @@ class RequestPayment extends React.Component<Props, {}> {
           </div>
 
           <div className="row form-group">
-            <div className="col-xs-11">
+            <div className="col-xs-12">
               <TXMetaDataPanel
                 initialState="advanced"
                 disableToggle={true}
diff --git a/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx b/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx
index 596669a1..b3c12804 100644
--- a/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx
+++ b/common/containers/Tabs/SendTransaction/components/WalletInfo.tsx
@@ -3,8 +3,8 @@ import { toChecksumAddress } from 'ethereumjs-util';
 import translate, { translateRaw } from 'translations';
 import { IWallet } from 'libs/wallet';
 import { print } from 'components/PrintableWallet';
-import { Identicon, QRCode, Input } from 'components/ui';
-import { GenerateKeystoreModal, TogglablePassword } from 'components';
+import { QRCode } from 'components/ui';
+import { GenerateKeystoreModal, TogglablePassword, AddressField } from 'components';
 import './WalletInfo.scss';
 
 interface Props {
@@ -42,19 +42,7 @@ export default class WalletInfo extends React.PureComponent<Props, State> {
     return (
       <div className="WalletInfo">
         <div className="Tab-content-pane">
-          <div className="row form-group">
-            <div className="col-xs-11">
-              <div className="input-group-wrapper">
-                <label className="input-group">
-                  <div className="input-group-header">{translate('X_ADDRESS')}</div>
-                  <Input readOnly={true} value={address} />
-                </label>
-              </div>
-            </div>
-            <div className="col-xs-1" style={{ padding: 0 }}>
-              <Identicon address={address} />
-            </div>
-          </div>
+          <AddressField isSelfAddress={true} />
 
           {privateKey && (
             <div className="row form-group">
diff --git a/common/containers/Tabs/SendTransaction/index.tsx b/common/containers/Tabs/SendTransaction/index.tsx
index a76c3255..96cc2c77 100644
--- a/common/containers/Tabs/SendTransaction/index.tsx
+++ b/common/containers/Tabs/SendTransaction/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import translate, { translateRaw } from 'translations';
+import translate from 'translations';
 import TabSection from 'containers/TabSection';
 import { UnlockHeader } from 'components/ui';
 import { getWalletInst } from 'selectors/wallet';
@@ -61,7 +61,7 @@ class SendTransaction extends React.Component<Props> {
     return (
       <TabSection>
         <section className="Tab-content">
-          <UnlockHeader title={translateRaw('ACCOUNT')} showGenerateLink={true} />
+          <UnlockHeader showGenerateLink={true} />
           {wallet && (
             <div className="SubTabs row">
               <div className="col-sm-8">
diff --git a/common/sass/styles/overrides/react-select.scss b/common/sass/styles/overrides/react-select.scss
index 369381c5..5daf9769 100644
--- a/common/sass/styles/overrides/react-select.scss
+++ b/common/sass/styles/overrides/react-select.scss
@@ -9,7 +9,8 @@
   font-size: 1rem;
   box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05);
   transition: border-color 120ms, box-shadow 120ms;
-  height: 3rem;
+  height: $input-height-base;
+
   &-control {
     min-width: 7.5rem;
     height: inherit;
diff --git a/common/sass/variables/forms.scss b/common/sass/variables/forms.scss
index 7b0be5b6..7b8f6754 100644
--- a/common/sass/variables/forms.scss
+++ b/common/sass/variables/forms.scss
@@ -8,10 +8,11 @@ $input-padding-x: 1rem;
 $input-padding-y: 0.75rem;
 $input-padding: $input-padding-y $input-padding-x;
 
-$input-height-base: 2.55rem;
+$input-height-base: 3rem;
 $input-height-large: 4rem;
 $input-height-small: 2rem;
 
+$input-margin-bottom: 1rem;
 $form-group-margin-bottom: $space-sm;
 
 $legend-color: $gray-dark;