Center all the things

1 files changed, 16 insertions, 6 deletions

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 };
+    }
 }