diff options
| author | Fabio Berger <me@fabioberger.com> | 2017-12-15 09:28:49 +0800 |
|---|---|---|
| committer | Fabio Berger <me@fabioberger.com> | 2017-12-15 09:28:49 +0800 |
| commit | ac1fbeb9623682ce678990d1815fcff63a6c40ae (patch) | |
| tree | b6fc1cdc1de8d6c4756548a818057975db6f2415 /packages/website | |
| parent | 6d386220d93f6fb609f8f05e27d093614a39b459 (diff) | |
| download | dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.gz dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.bz2 dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.lz dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.xz dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.zst dexon-sol-tools-ac1fbeb9623682ce678990d1815fcff63a6c40ae.zip | |
Improve WETH page styling
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/components/eth_wrappers.tsx | 39 |
2 files changed, 35 insertions, 12 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 4904ee9e2..c8bdced9b 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -53,7 +53,7 @@ export class EthWethConversionDialog extends title={title} titleStyle={{fontWeight: 100}} actions={convertDialogActions} - contentStyle={{width: 600}} + contentStyle={{width: 448}} open={this.props.isOpen} > {this.renderConversionDialogBody()} @@ -70,7 +70,7 @@ export class EthWethConversionDialog extends <div className="pb2"> {explanation} </div> - <div className="mx-auto" style={{maxWidth: 332}}> + <div className="mx-auto" style={{maxWidth: 312}}> <div className="flex"> {this.renderCurrency(isWrappedVersion)} <div style={{paddingTop: 68}}> @@ -83,7 +83,7 @@ export class EthWethConversionDialog extends </div> <div className="pt2 mx-auto" - style={{width: 235}} + style={{width: 245}} > {this.props.direction === Side.receive ? <TokenAmountInput @@ -131,7 +131,7 @@ export class EthWethConversionDialog extends <div className="center py2"> <img src={iconUrl} style={{width: 60}} /> </div> - <div className="center"> + <div className="center" style={{fontSize: 12}}> ({symbol}) </div> </div> diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index c2f9b7b45..ccbed4188 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -91,6 +91,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const etherToken = _.find(tokens, {symbol: 'WETH'}); const etherTokenState = this.props.tokenStateByAddress[etherToken.address]; const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, 18); + const isBidirectional = true; return ( <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}> <div className="relative"> @@ -113,7 +114,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <Divider /> <div> <div className="py2"> - Wrap ETH into an ERC20-compliant Ether token + Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH. </div> <div> <Table @@ -124,8 +125,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRow> <TableHeaderColumn>ETH Token</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> - <TableHeaderColumn> - {'ETH <-> WETH'} + <TableHeaderColumn className="center"> + {this.renderActionColumnTitle(isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> @@ -145,7 +146,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn> {this.props.userEtherBalance.toFixed(PRECISION)} ETH </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isOutdatedWrappedEther={false} direction={Side.deposit} @@ -172,7 +173,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn> {wethBalance.toFixed(PRECISION)} WETH </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isOutdatedWrappedEther={false} direction={Side.receive} @@ -211,8 +212,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRow> <TableHeaderColumn>WETH Version</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> - <TableHeaderColumn> - {'WETH -> ETH'} + <TableHeaderColumn className="center"> + {this.renderActionColumnTitle(!isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> @@ -225,6 +226,28 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } + private renderActionColumnTitle(isBidirectional: boolean) { + let iconClass = 'zmdi-long-arrow-right'; + let leftSymbol = 'WETH'; + let rightSymbol = 'ETH'; + if (isBidirectional) { + iconClass = 'zmdi-swap'; + leftSymbol = 'ETH'; + rightSymbol = 'WETH'; + } + return ( + <div className="flex mx-auto" style={{width: 85}}> + <div style={{paddingTop: 3}}>{leftSymbol}</div> + <div className="px1"> + <i + style={{fontSize: 18}} + className={`zmdi ${iconClass}`} + /> + </div> + <div style={{paddingTop: 3}}>{rightSymbol}</div> + </div> + ); + } private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { const rows = _.map(configs.outdatedWrappedEthers, (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { @@ -267,7 +290,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <i className="zmdi zmdi-spinner zmdi-hc-spin" /> } </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isDisabled={!isStateLoaded} isOutdatedWrappedEther={true} |