aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-18 03:00:00 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-18 04:04:39 +0800
commite9e570db4f158119dc86141201b695f52b3a5ca2 (patch)
treedef4514311e9a16b5ca96c58beba5028a13b8d2e /packages/website
parent5bc83fceaa3c281e45af0f30ace67643554830c8 (diff)
downloaddexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar.gz
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar.bz2
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar.lz
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar.xz
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.tar.zst
dexon-sol-tools-e9e570db4f158119dc86141201b695f52b3a5ca2.zip
Center all the things
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx9
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx22
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx22
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)}
/>
)}