aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-15 09:28:49 +0800
committerFabio Berger <me@fabioberger.com>2017-12-15 09:28:49 +0800
commitac1fbeb9623682ce678990d1815fcff63a6c40ae (patch)
treeb6fc1cdc1de8d6c4756548a818057975db6f2415 /packages/website
parent6d386220d93f6fb609f8f05e27d093614a39b459 (diff)
downloaddexon-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.tsx8
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx39
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}