Improve WETH page styling

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}