From ec49ca648027cd82c4488f388e4917a879a71364 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 16 May 2018 10:15:04 -0700
Subject: Improve about page descriptions

---
 packages/website/ts/pages/about/about.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 360cbb136..ac67ca968 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -37,7 +37,7 @@ const teamRow1: ProfileInfo[] = [
         name: 'Fabio Berger',
         title: 'Senior Engineer',
         description: `Full-stack blockchain engineer. Previously software engineer \
-                      at Airtable and founder of WealthLift. Computer science at Duke.`,
+                      at Airtable and founder of WealthLift. Computer Science at Duke.`,
         image: '/images/team/fabio.jpg',
         linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
         github: 'https://github.com/fabioberger',
@@ -60,7 +60,7 @@ const teamRow2: ProfileInfo[] = [
         name: 'Leonid Logvinov',
         title: 'Engineer',
         description: `Full-stack blockchain engineer. Previously blockchain engineer \
-                      at Neufund. Computer science at University of Warsaw.`,
+                      at Neufund. Computer Science at University of Warsaw.`,
         image: '/images/team/leonid.png',
         linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
         github: 'https://github.com/LogvinovLeon',
@@ -152,7 +152,7 @@ const teamRow5: ProfileInfo[] = [
     {
         name: 'Francesco Agosti',
         title: 'Senior Frontend Engineer',
-        description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer science Duke.`,
+        description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`,
         image: 'images/team/fragosti.png',
         linkedIn: 'https://www.linkedin.com/in/fragosti/',
         github: 'http://github.com/fragosti',
-- 
cgit v1.2.3


From ea0067d99976a572dcd4a4d988f4d33ca083f230 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 16 May 2018 17:06:57 -0700
Subject: Show error messages in the wrapped ether item

---
 .../ts/components/inputs/balance_bounded_input.tsx | 32 ++++++++++----------
 .../ts/components/inputs/eth_amount_input.tsx      |  2 ++
 .../ts/components/inputs/token_amount_input.tsx    |  2 ++
 .../ts/components/wallet/wrap_ether_item.tsx       | 34 +++++++++++++++++-----
 packages/website/ts/types.ts                       |  2 +-
 packages/website/ts/utils/utils.ts                 |  3 ++
 6 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 68b77cfc3..72a246280 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -14,6 +14,7 @@ interface BalanceBoundedInputProps {
     amount?: BigNumber;
     hintText?: string;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs?: boolean;
     shouldCheckBalance: boolean;
     validate?: (amount: BigNumber) => InputErrMsg;
@@ -36,6 +37,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         isDisabled: false,
         shouldShowErrs: true,
         hintText: 'amount',
+        onErrorMsgChange: utils.noop,
         shouldShowUnderline: true,
     };
     constructor(props: BalanceBoundedInputProps) {
@@ -63,17 +65,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             }
             if (shouldResetState) {
                 const amountString = nextProps.amount.toString();
-                this.setState({
-                    errMsg: this._validate(amountString, nextProps.balance),
-                    amountString,
-                });
+                this._setAmountState(amountString, nextProps.balance);
             }
         } else if (isCurrentAmountNumeric) {
             const amountString = '';
-            this.setState({
-                errMsg: this._validate(amountString, nextProps.balance),
-                amountString,
-            });
+            this._setAmountState(amountString, nextProps.balance);
         }
     }
     public render(): React.ReactNode {
@@ -105,14 +101,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         );
     }
     private _onValueChange(e: any, amountString: string): void {
-        const errMsg = this._validate(amountString, this.props.balance);
-        this.setState(
-            {
-                amountString,
-                errMsg,
-            },
+        this._setAmountState(
+            amountString,
+            this.props.balance,
             () => {
-                const isValid = _.isUndefined(errMsg);
+                const isValid = _.isUndefined(this._validate(amountString, this.props.balance));
                 if (utils.isNumeric(amountString) && !_.includes(amountString, '-')) {
                     this.props.onChange(isValid, new BigNumber(amountString));
                 } else {
@@ -161,4 +154,13 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             );
         }
     }
+
+    private _setAmountState(amount: string, balance: BigNumber, callback: () => void = utils.noop): void {
+        const errorMsg = this._validate(amount, balance);
+        this.props.onErrorMsgChange(errorMsg);
+        this.setState({
+            amountString: amount,
+            errMsg: this._validate(amount, balance),
+        }, callback);
+    }
 }
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index c3822a80b..862ba25f8 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -12,6 +12,7 @@ interface EthAmountInputProps {
     amount?: BigNumber;
     hintText?: string;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs: boolean;
     onVisitBalancesPageClick?: () => void;
     shouldCheckBalance: boolean;
@@ -40,6 +41,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     balance={this.props.balance}
                     amount={amount}
                     onChange={this._onChange.bind(this)}
+                    onErrorMsgChange={this.props.onErrorMsgChange}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 9a74bdd51..3ff2c5440 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -20,6 +20,7 @@ interface TokenAmountInputProps {
     shouldCheckBalance: boolean;
     shouldCheckAllowance: boolean;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     onVisitBalancesPageClick?: () => void;
     lastForceTokenStateRefetch: number;
     shouldShowErrs?: boolean;
@@ -85,6 +86,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     amount={amount}
                     balance={ZeroEx.toUnitAmount(this.state.balance, this.props.token.decimals)}
                     onChange={this._onChange.bind(this)}
+                    onErrorMsgChange={this.props.onErrorMsgChange}
                     validate={this._validate.bind(this)}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 2ed924bcd..c8ced8d08 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -31,8 +31,8 @@ export interface WrapEtherItemProps {
 
 interface WrapEtherItemState {
     currentInputAmount?: BigNumber;
-    currentInputHasErrors: boolean;
     isEthConversionHappening: boolean;
+    errorMsg: React.ReactNode;
 }
 
 const styles: Styles = {
@@ -47,12 +47,18 @@ const styles: Styles = {
         width: 125,
     },
     ethAmountInput: { height: 32 },
-    innerDiv: { paddingLeft: 60, paddingTop: 0 },
-    wrapEtherConfirmationButtonContainer: { width: 128, top: 16 },
+    innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
+    wrapEtherConfirmationButtonContainer: { width: 128, top: 18 },
     wrapEtherConfirmationButtonLabel: {
-        fontSize: 10,
+        fontSize: 12,
         color: colors.white,
     },
+    errorMsg: {
+        fontSize: 12,
+        marginTop: 4,
+        color: 'red',
+        minHeight: 20,
+    },
 };
 
 export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> {
@@ -60,8 +66,8 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
         super(props);
         this.state = {
             currentInputAmount: undefined,
-            currentInputHasErrors: false,
             isEthConversionHappening: false,
+            errorMsg: null,
         };
     }
     public render(): React.ReactNode {
@@ -85,6 +91,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                                     shouldShowErrs={false}
                                     shouldShowUnderline={false}
                                     style={styles.ethAmountInput}
+                                    onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             ) : (
                                 <TokenAmountInput
@@ -99,12 +106,14 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                                     onChange={this._onValueChange.bind(this)}
                                     amount={this.state.currentInputAmount}
                                     hintText="0.00"
-                                    shouldShowErrs={false} // TODO: error handling
+                                    shouldShowErrs={false}
                                     shouldShowUnderline={false}
                                     style={styles.ethAmountInput}
+                                    onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             )}
                         </div>
+                        {this._renderErrorMsg()}
                     </div>
                 }
                 secondaryTextLines={2}
@@ -119,7 +128,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
     private _onValueChange(isValid: boolean, amount?: BigNumber): void {
         this.setState({
             currentInputAmount: amount,
-            currentInputHasErrors: !isValid,
+        });
+    }
+    private _onErrorMsgChange(errorMsg: React.ReactNode): void {
+        this.setState({
+            errorMsg,
         });
     }
     private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> {
@@ -144,6 +157,13 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
             </div>
         );
     }
+    private _renderErrorMsg(): React.ReactNode {
+        return (
+            <div style={styles.errorMsg}>
+                {this.state.errorMsg}
+            </div>
+        );
+    }
     private async _wrapEtherConfirmationActionAsync(): Promise<void> {
         this.setState({
             isEthConversionHappening: true,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 5caf5e73c..e3901fd81 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -208,7 +208,7 @@ export interface ContractEvent {
 }
 
 export type InputErrMsg = React.ReactNode | string | undefined;
-export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
+export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber, errorMessage?: React.ReactNode) => void;
 export enum ScreenWidths {
     Sm = 'SM',
     Md = 'MD',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 3c99bd2fe..5a0ab934d 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -27,6 +27,9 @@ const MD_MIN_EM = 52;
 const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD);
 
 export const utils = {
+    noop(): void {
+        return undefined;
+    },
     assert(condition: boolean, message: string): void {
         if (!condition) {
             throw new Error(message);
-- 
cgit v1.2.3


From e7fd501200f37581fa0b97854fc0914246d3e95c Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 16 May 2018 17:12:17 -0700
Subject: Remove duplicate function call to validate

---
 packages/website/ts/components/inputs/balance_bounded_input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 72a246280..9a6ff64a7 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -160,7 +160,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         this.props.onErrorMsgChange(errorMsg);
         this.setState({
             amountString: amount,
-            errMsg: this._validate(amount, balance),
+            errMsg: errorMsg,
         }, callback);
     }
 }
-- 
cgit v1.2.3


From 5bc83fceaa3c281e45af0f30ace67643554830c8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 17 May 2018 10:54:32 -0700
Subject: Refactor code in response to CR feedback

---
 .../ts/components/inputs/balance_bounded_input.tsx        | 15 ++++++++-------
 .../website/ts/components/inputs/token_amount_input.tsx   |  4 ++--
 packages/website/ts/components/wallet/wrap_ether_item.tsx |  2 +-
 packages/website/ts/types.ts                              |  3 +--
 packages/website/ts/utils/utils.ts                        |  3 ---
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 9a6ff64a7..b90232e05 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -5,7 +5,7 @@ import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { RequiredLabel } from 'ts/components/ui/required_label';
-import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
@@ -17,7 +17,7 @@ interface BalanceBoundedInputProps {
     onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs?: boolean;
     shouldCheckBalance: boolean;
-    validate?: (amount: BigNumber) => InputErrMsg;
+    validate?: (amount: BigNumber) => React.ReactNode;
     onVisitBalancesPageClick?: () => void;
     shouldHideVisitBalancesLink?: boolean;
     isDisabled?: boolean;
@@ -26,7 +26,7 @@ interface BalanceBoundedInputProps {
 }
 
 interface BalanceBoundedInputState {
-    errMsg: InputErrMsg;
+    errMsg: React.ReactNode;
     amountString: string;
 }
 
@@ -37,7 +37,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         isDisabled: false,
         shouldShowErrs: true,
         hintText: 'amount',
-        onErrorMsgChange: utils.noop,
+        onErrorMsgChange: _.noop,
         shouldShowUnderline: true,
     };
     constructor(props: BalanceBoundedInputProps) {
@@ -106,7 +106,8 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             this.props.balance,
             () => {
                 const isValid = _.isUndefined(this._validate(amountString, this.props.balance));
-                if (utils.isNumeric(amountString) && !_.includes(amountString, '-')) {
+                const isPositiveNumber = utils.isNumeric(amountString) && !_.includes(amountString, '-');
+                if (isPositiveNumber) {
                     this.props.onChange(isValid, new BigNumber(amountString));
                 } else {
                     this.props.onChange(isValid);
@@ -114,7 +115,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             },
         );
     }
-    private _validate(amountString: string, balance: BigNumber): InputErrMsg {
+    private _validate(amountString: string, balance: BigNumber): React.ReactNode {
         if (!utils.isNumeric(amountString)) {
             return amountString !== '' ? 'Must be a number' : '';
         }
@@ -155,7 +156,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         }
     }
 
-    private _setAmountState(amount: string, balance: BigNumber, callback: () => void = utils.noop): void {
+    private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop): void {
         const errorMsg = this._validate(amount, balance);
         this.props.onErrorMsgChange(errorMsg);
         this.setState({
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 3ff2c5440..a5fd86f6c 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
-import { InputErrMsg, Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
 
 interface TokenAmountInputProps {
     userAddress: string;
@@ -107,7 +107,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
         }
         this.props.onChange(isValid, baseUnitAmount);
     }
-    private _validate(amount: BigNumber): InputErrMsg {
+    private _validate(amount: BigNumber): React.ReactNode {
         if (this.props.shouldCheckAllowance && amount.gt(this.state.allowance)) {
             return (
                 <span>
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index c8ced8d08..0dff22feb 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -56,7 +56,7 @@ const styles: Styles = {
     errorMsg: {
         fontSize: 12,
         marginTop: 4,
-        color: 'red',
+        color: colors.red,
         minHeight: 20,
     },
 };
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index e3901fd81..33e4d6c30 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -207,8 +207,7 @@ export interface ContractEvent {
     args: any;
 }
 
-export type InputErrMsg = React.ReactNode | string | undefined;
-export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber, errorMessage?: React.ReactNode) => void;
+export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
 export enum ScreenWidths {
     Sm = 'SM',
     Md = 'MD',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 5a0ab934d..3c99bd2fe 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -27,9 +27,6 @@ const MD_MIN_EM = 52;
 const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD);
 
 export const utils = {
-    noop(): void {
-        return undefined;
-    },
     assert(condition: boolean, message: string): void {
         if (!condition) {
             throw new Error(message);
-- 
cgit v1.2.3


From e9e570db4f158119dc86141201b695f52b3a5ca2 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 17 May 2018 12:00:00 -0700
Subject: Center all the things

---
 .../ts/components/inputs/balance_bounded_input.tsx |  4 ++++
 .../ts/components/inputs/eth_amount_input.tsx      |  9 ++++++++-
 .../ts/components/inputs/token_amount_input.tsx    | 22 ++++++++++++++++------
 .../ts/components/wallet/wrap_ether_item.tsx       | 22 ++++++++++++++++++----
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index b90232e05..f91a99355 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -23,6 +23,8 @@ interface BalanceBoundedInputProps {
     isDisabled?: boolean;
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
+    inputStyle?: React.CSSProperties;
+    inputHintStyle?: React.CSSProperties;
 }
 
 interface BalanceBoundedInputState {
@@ -95,6 +97,8 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
                 hintText={<span style={{ textTransform: 'capitalize' }}>{this.props.hintText}</span>}
                 onChange={this._onValueChange.bind(this)}
                 underlineStyle={{ width: 'calc(100% + 50px)' }}
+                inputStyle={this.props.inputStyle}
+                hintStyle={this.props.inputHintStyle}
                 underlineShow={this.props.shouldShowUnderline}
                 disabled={this.props.isDisabled}
             />
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 862ba25f8..fa684d85c 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -20,6 +20,8 @@ interface EthAmountInputProps {
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
     style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    inputHintStyle?: React.CSSProperties;
 }
 
 interface EthAmountInputState {}
@@ -49,8 +51,10 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     hintText={this.props.hintText}
                     shouldShowErrs={this.props.shouldShowErrs}
                     shouldShowUnderline={this.props.shouldShowUnderline}
+                    inputStyle={this.props.style}
+                    inputHintStyle={this.props.inputHintStyle}
                 />
-                <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
+                <div style={this._getLabelStyle()}>ETH</div>
             </div>
         );
     }
@@ -60,4 +64,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
             : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
         this.props.onChange(isValid, baseUnitAmountIfExists);
     }
+    private _getLabelStyle(): React.CSSProperties {
+        return this.props.labelStyle || { paddingTop: _.isUndefined(this.props.label) ? 15 : 40 };
+    }
 }
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index a5fd86f6c..f040928f1 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -26,6 +26,8 @@ interface TokenAmountInputProps {
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
     style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    inputHintStyle?: React.CSSProperties;
 }
 
 interface TokenAmountInputState {
@@ -75,12 +77,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
         const amount = this.props.amount
             ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
             : undefined;
-        const hasLabel = !_.isUndefined(this.props.label);
-        const style = !_.isUndefined(this.props.style)
-            ? this.props.style
-            : { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
         return (
-            <div className="flex overflow-hidden" style={style}>
+            <div className="flex overflow-hidden" style={this._getStyle()}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     amount={amount}
@@ -95,8 +93,10 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     hintText={this.props.hintText}
                     shouldShowErrs={this.props.shouldShowErrs}
                     shouldShowUnderline={this.props.shouldShowUnderline}
+                    inputStyle={this.props.style}
+                    inputHintStyle={this.props.inputHintStyle}
                 />
-                <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
+                <div style={this._getLabelStyle()}>{this.props.token.symbol}</div>
             </div>
         );
     }
@@ -141,4 +141,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             });
         }
     }
+    private _getStyle(): React.CSSProperties {
+        const hasLabel = !_.isUndefined(this.props.label);
+        return !_.isUndefined(this.props.style)
+            ? this.props.style
+            : { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
+    }
+    private _getLabelStyle(): React.CSSProperties {
+        const hasLabel = !_.isUndefined(this.props.label);
+        return this.props.labelStyle || { paddingTop: hasLabel ? 39 : 14 };
+    }
 }
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 0dff22feb..581d2ba97 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -46,9 +46,19 @@ const styles: Styles = {
         padding: 4,
         width: 125,
     },
-    ethAmountInput: { height: 32 },
+    amountInput: { height: 34 },
+    amountInputLabel: {
+        paddingTop: 10,
+        paddingRight: 10,
+        paddingLeft: 5,
+        color: colors.grey,
+        fontSize: 14,
+    },
+    amountInputHint: {
+        bottom: 18,
+    },
     innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
-    wrapEtherConfirmationButtonContainer: { width: 128, top: 18 },
+    wrapEtherConfirmationButtonContainer: { width: 128, top: 19 },
     wrapEtherConfirmationButtonLabel: {
         fontSize: 12,
         color: colors.white,
@@ -90,7 +100,9 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                                     shouldShowIncompleteErrs={false}
                                     shouldShowErrs={false}
                                     shouldShowUnderline={false}
-                                    style={styles.ethAmountInput}
+                                    style={styles.amountInput}
+                                    labelStyle={styles.amountInputLabel}
+                                    inputHintStyle={styles.amountInputHint}
                                     onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             ) : (
@@ -108,7 +120,9 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                                     hintText="0.00"
                                     shouldShowErrs={false}
                                     shouldShowUnderline={false}
-                                    style={styles.ethAmountInput}
+                                    style={styles.amountInput}
+                                    labelStyle={styles.amountInputLabel}
+                                    inputHintStyle={styles.amountInputHint}
                                     onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             )}
-- 
cgit v1.2.3