aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-22 12:15:41 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-22 12:25:43 +0800
commit130e83d9b27cb541cf4f07b3d75fcfeea076df41 (patch)
tree291a4836da520e9e9652bf7f95374b82ab951216 /packages/website/ts/components
parented8acdb11c349bd92ee89cf9c8c9921df185b67c (diff)
downloaddexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar.gz
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar.bz2
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar.lz
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar.xz
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.tar.zst
dexon-sol-tools-130e83d9b27cb541cf4f07b3d75fcfeea076df41.zip
Use flexbox for wrapped ether item
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx50
1 files changed, 29 insertions, 21 deletions
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 98b28b3ad..aab1d4439 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -37,7 +37,10 @@ interface WrapEtherItemState {
}
const styles: Styles = {
- topLabel: { color: colors.black, fontSize: 11 },
+ topLabel: {
+ color: colors.black,
+ fontSize: 11,
+ },
inputContainer: {
backgroundColor: colors.white,
borderBottomRightRadius: 3,
@@ -45,9 +48,10 @@ const styles: Styles = {
borderTopRightRadius: 3,
borderTopLeftRadius: 3,
padding: 4,
- width: 125,
},
- amountInput: { height: 34 },
+ amountInput: {
+ height: 34,
+ },
amountInputLabel: {
paddingTop: 10,
paddingRight: 10,
@@ -58,8 +62,6 @@ const styles: Styles = {
amountInputHint: {
bottom: 18,
},
- innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
- wrapEtherConfirmationButtonContainer: { width: 128, top: 19 },
wrapEtherConfirmationButtonLabel: {
fontSize: 12,
color: colors.white,
@@ -70,6 +72,12 @@ const styles: Styles = {
color: colors.red,
minHeight: 20,
},
+ conversionSpinner: {
+ paddingTop: 26,
+ },
+ conversionSpinnerPlaceholder: {
+ width: 61,
+ },
};
export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> {
@@ -85,11 +93,13 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH);
const isWrappingEth = this.props.direction === Side.Deposit;
const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
+
return (
- <ListItem
- primaryText={
- <div>
- <div style={styles.topLabel}>{topLabelText}</div>
+ <div className="flex" style={walletItemStyles.focusedItem}>
+ <div>{this._renderIsEthConversionHappeningSpinner()} </div>
+ <div className="flex flex-column">
+ <div style={styles.topLabel}>{topLabelText}</div>
+ <div className="flex items-center">
<div style={styles.inputContainer}>
{isWrappingEth ? (
<EthAmountInput
@@ -128,16 +138,12 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
/>
)}
</div>
- {this._renderErrorMsg()}
+ <div>{this._renderWrapEtherConfirmationButton()}</div>
</div>
- }
- secondaryTextLines={2}
- disableTouchRipple={true}
- style={walletItemStyles.focusedItem}
- innerDivStyle={styles.innerDiv}
- leftIcon={this._renderIsEthConversionHappeningSpinner()}
- rightAvatar={this._renderWrapEtherConfirmationButton()}
- />
+
+ {this._renderErrorMsg()}
+ </div>
+ </div>
);
}
private _onValueChange(isValid: boolean, amount?: BigNumber): void {
@@ -152,16 +158,18 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
}
private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> {
return this.state.isEthConversionHappening ? (
- <div className="pl1" style={{ paddingTop: 10 }}>
+ <div className="pl3 pr2" style={styles.conversionSpinner}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div>
- ) : null;
+ ) : (
+ <div style={styles.conversionSpinnerPlaceholder} />
+ );
}
private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> {
const isWrappingEth = this.props.direction === Side.Deposit;
const labelText = isWrappingEth ? 'wrap' : 'unwrap';
return (
- <div style={styles.wrapEtherConfirmationButtonContainer}>
+ <div className="pl1 pr3">
<FlatButton
backgroundColor={colors.wrapEtherConfirmationButton}
label={labelText}