Center all the things

3 files changed, 28 insertions, 7 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 };
+    }
 }