diff options
Diffstat (limited to 'packages')
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)} /> )} |