From 22c4ee6ef709610155191c4b0629ba0c41ce908f Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 17 Dec 2017 19:35:24 -0500
Subject: Update first two string enums to native type

---
 .../components/dialogs/blockchain_err_dialog.tsx   |  8 +++----
 .../dialogs/eth_weth_conversion_dialog.tsx         |  8 +++----
 .../ts/components/eth_weth_conversion_button.tsx   |  6 ++---
 packages/website/ts/components/eth_wrappers.tsx    |  6 ++---
 packages/website/ts/components/fill_order_json.tsx |  4 ++--
 .../generate_order/generate_order_form.tsx         | 26 +++++++++++-----------
 .../website/ts/components/inputs/token_input.tsx   |  2 +-
 packages/website/ts/components/token_balances.tsx  |  2 +-
 8 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 963bd4388..afc89be1a 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -46,22 +46,22 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
         );
     }
     private getTitle(hasWalletAddress: boolean) {
-        if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
+        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
             return '0x smart contracts not found';
         } else if (!hasWalletAddress) {
             return 'Enable wallet communication';
-        } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
+        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
             return 'Disconnected from Ethereum network';
         } else {
             return 'Unexpected error';
         }
     }
     private renderExplanation(hasWalletAddress: boolean) {
-        if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
+        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
             return this.renderContractsNotDeployedExplanation();
         } else if (!hasWalletAddress) {
             return this.renderNoWalletFoundExplanation();
-        } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
+        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
             return this.renderDisconnectedFromNode();
         } else {
             return this.renderUnexpectedErrorExplanation();
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 c8bdced9b..e499bdcbe 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -47,7 +47,7 @@ export class EthWethConversionDialog extends
                 onTouchTap={this.onConvertClick.bind(this)}
             />,
         ];
-        const title = this.props.direction === Side.deposit ?  'Wrap ETH' : 'Unwrap WETH';
+        const title = this.props.direction === Side.Deposit ?  'Wrap ETH' : 'Unwrap WETH';
         return (
             <Dialog
                 title={title}
@@ -61,10 +61,10 @@ export class EthWethConversionDialog extends
         );
     }
     private renderConversionDialogBody() {
-        const explanation = this.props.direction === Side.deposit ?
+        const explanation = this.props.direction === Side.Deposit ?
                             'Convert your Ether into a tokenized, tradable form.' :
                             'Convert your Wrapped Ether back into it\'s native form.';
-        const isWrappedVersion = this.props.direction === Side.receive;
+        const isWrappedVersion = this.props.direction === Side.Receive;
         return (
             <div>
                 <div className="pb2">
@@ -85,7 +85,7 @@ export class EthWethConversionDialog extends
                         className="pt2 mx-auto"
                         style={{width: 245}}
                     >
-                        {this.props.direction === Side.receive ?
+                        {this.props.direction === Side.Receive ?
                             <TokenAmountInput
                                 token={this.props.token}
                                 tokenState={this.props.tokenState}
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index b017de27b..ae919921d 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -45,7 +45,7 @@ export class EthWethConversionButton extends
         const labelStyle = this.state.isEthConversionHappening ? {fontSize: 10} : {};
         let callToActionLabel;
         let inProgressLabel;
-        if (this.props.direction === Side.deposit) {
+        if (this.props.direction === Side.Deposit) {
             callToActionLabel = 'Wrap';
             inProgressLabel = 'Wrapping...';
         } else {
@@ -87,7 +87,7 @@ export class EthWethConversionButton extends
         const tokenState = this.props.ethTokenState;
         let balance = tokenState.balance;
         try {
-            if (direction === Side.deposit) {
+            if (direction === Side.Deposit) {
                 await this.props.blockchain.convertEthToWrappedEthTokensAsync(value);
                 const ethAmount = ZeroEx.toUnitAmount(value, constants.ETH_DECIMAL_PLACES);
                 this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
@@ -110,7 +110,7 @@ export class EthWethConversionButton extends
                 utils.consoleLog(`Unexpected error encountered: ${err}`);
                 utils.consoleLog(err.stack);
                 await errorReporter.reportAsync(err);
-                const errorMsg = direction === Side.deposit ?
+                const errorMsg = direction === Side.Deposit ?
                                  'Failed to wrap your ETH. Please try again.' :
                                  'Failed to unwrap your WETH. Please try again.';
                 this.props.dispatcher.showFlashMessage(errorMsg);
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 58b73b11c..9bb05becf 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -142,7 +142,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                     <TableRowColumn>
                                         <EthWethConversionButton
                                             isOutdatedWrappedEther={false}
-                                            direction={Side.deposit}
+                                            direction={Side.Deposit}
                                             ethToken={etherToken}
                                             ethTokenState={etherTokenState}
                                             dispatcher={this.props.dispatcher}
@@ -169,7 +169,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                     <TableRowColumn>
                                         <EthWethConversionButton
                                             isOutdatedWrappedEther={false}
-                                            direction={Side.receive}
+                                            direction={Side.Receive}
                                             ethToken={etherToken}
                                             ethTokenState={etherTokenState}
                                             dispatcher={this.props.dispatcher}
@@ -287,7 +287,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                         <EthWethConversionButton
                             isDisabled={!isStateLoaded}
                             isOutdatedWrappedEther={true}
-                            direction={Side.receive}
+                            direction={Side.Receive}
                             ethToken={outdatedEtherToken}
                             ethTokenState={outdatedEtherTokenState}
                             dispatcher={this.props.dispatcher}
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index f4db1f74e..393e46bee 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -24,11 +24,11 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
         const tokenAddresses = _.keys(this.props.tokenByAddress);
         const exchangeContract = this.props.blockchain.getExchangeContractAddressIfExists();
         const hintSideToAssetToken = {
-            [Side.deposit]: {
+            [Side.Deposit]: {
                 amount: new BigNumber(35),
                 address: tokenAddresses[0],
             },
-            [Side.receive]: {
+            [Side.Receive]: {
                 amount: new BigNumber(89),
                 address: tokenAddresses[1],
             },
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 59970b10c..f273045a8 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -78,10 +78,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
     }
     public render() {
         const dispatcher = this.props.dispatcher;
-        const depositTokenAddress = this.props.sideToAssetToken[Side.deposit].address;
+        const depositTokenAddress = this.props.sideToAssetToken[Side.Deposit].address;
         const depositToken = this.props.tokenByAddress[depositTokenAddress];
         const depositTokenState = this.props.tokenStateByAddress[depositTokenAddress];
-        const receiveTokenAddress = this.props.sideToAssetToken[Side.receive].address;
+        const receiveTokenAddress = this.props.sideToAssetToken[Side.Receive].address;
         const receiveToken = this.props.tokenByAddress[receiveTokenAddress];
         const receiveTokenState = this.props.tokenStateByAddress[receiveTokenAddress];
         const takerExplanation = 'If a taker is specified, only they are<br> \
@@ -102,9 +102,9 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                     blockchainErr={this.props.blockchainErr}
                                     dispatcher={this.props.dispatcher}
                                     label="Selling"
-                                    side={Side.deposit}
+                                    side={Side.Deposit}
                                     networkId={this.props.networkId}
-                                    assetToken={this.props.sideToAssetToken[Side.deposit]}
+                                    assetToken={this.props.sideToAssetToken[Side.Deposit]}
                                     updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
                                     tokenByAddress={this.props.tokenByAddress}
                                 />
@@ -112,8 +112,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                     label="Sell amount"
                                     token={depositToken}
                                     tokenState={depositTokenState}
-                                    amount={this.props.sideToAssetToken[Side.deposit].amount}
-                                    onChange={this.onTokenAmountChange.bind(this, depositToken, Side.deposit)}
+                                    amount={this.props.sideToAssetToken[Side.Deposit].amount}
+                                    onChange={this.onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
                                     shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
                                     shouldCheckBalance={true}
                                     shouldCheckAllowance={true}
@@ -133,9 +133,9 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                     blockchainErr={this.props.blockchainErr}
                                     dispatcher={this.props.dispatcher}
                                     label="Buying"
-                                    side={Side.receive}
+                                    side={Side.Receive}
                                     networkId={this.props.networkId}
-                                    assetToken={this.props.sideToAssetToken[Side.receive]}
+                                    assetToken={this.props.sideToAssetToken[Side.Receive]}
                                     updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
                                     tokenByAddress={this.props.tokenByAddress}
                                 />
@@ -143,8 +143,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                     label="Receive amount"
                                     token={receiveToken}
                                     tokenState={receiveTokenState}
-                                    amount={this.props.sideToAssetToken[Side.receive].amount}
-                                    onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.receive)}
+                                    amount={this.props.sideToAssetToken[Side.Receive].amount}
+                                    onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
                                     shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
                                     shouldCheckBalance={false}
                                     shouldCheckAllowance={false}
@@ -235,16 +235,16 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         });
     }
     private async onSignClickedAsync(): Promise<boolean> {
-        if (this.props.blockchainErr !== '') {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return false;
         }
 
         // Check if all required inputs were supplied
-        const debitToken = this.props.sideToAssetToken[Side.deposit];
+        const debitToken = this.props.sideToAssetToken[Side.Deposit];
         const debitBalance = this.props.tokenStateByAddress[debitToken.address].balance;
         const debitAllowance = this.props.tokenStateByAddress[debitToken.address].allowance;
-        const receiveAmount = this.props.sideToAssetToken[Side.receive].amount;
+        const receiveAmount = this.props.sideToAssetToken[Side.Receive].amount;
         if (!_.isUndefined(debitToken.amount) && !_.isUndefined(receiveAmount) &&
             debitToken.amount.gt(0) && receiveAmount.gt(0) &&
             this.props.userAddress !== '' &&
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 67f697f05..40fdf9689 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -95,7 +95,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
         });
     }
     private onAssetClicked() {
-        if (this.props.blockchainErr !== '') {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
         }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index db4a35062..dd7a722f5 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -357,7 +357,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         );
     }
     private renderTokenTableRows() {
-        if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== '') {
+        if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
             return '';
         }
         const isSmallScreen = this.props.screenWidth === ScreenWidths.SM;
-- 
cgit v1.2.3


From abbad68eb838ec4611d2236a7b0036a4a4d3058e Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 17 Dec 2017 20:48:23 -0500
Subject: Replace remaining strEnums with property TS string enums

---
 .../website/ts/components/eth_weth_conversion_button.tsx     |  2 +-
 packages/website/ts/components/send_button.tsx               |  2 +-
 packages/website/ts/components/token_balances.tsx            | 12 ++++++------
 .../ts/components/trade_history/trade_history_item.tsx       |  2 +-
 packages/website/ts/components/ui/ethereum_address.tsx       |  2 +-
 packages/website/ts/components/ui/etherscan_icon.tsx         |  2 +-
 packages/website/ts/components/ui/party.tsx                  |  2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index ae919921d..5464f8df0 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -104,7 +104,7 @@ export class EthWethConversionButton extends
             this.props.onConversionSuccessful();
         } catch (err) {
             const errMsg = '' + err;
-            if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+            if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
                 this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             } else if (!_.includes(errMsg, 'User denied transaction')) {
                 utils.consoleLog(`Unexpected error encountered: ${err}`);
diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx
index b3fd2aeba..1fc300964 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -70,7 +70,7 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
             this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
         } catch (err) {
             const errMsg = `${err}`;
-            if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+            if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
                 this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
                 return;
             } else if (!_.includes(errMsg, 'User denied transaction')) {
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index dd7a722f5..5338e9609 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -156,7 +156,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         const tokenTableHeight = allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ?
                                  allTokenRowHeight :
                                  MAX_TOKEN_TABLE_HEIGHT;
-        const isSmallScreen = this.props.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
         const dharmaLoanExplanation = 'If you need access to larger amounts of ether,<br> \
                                      you can request a loan from the Dharma Loan<br> \
@@ -311,7 +311,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                             <TableHeaderColumn>
                                 Action
                             </TableHeaderColumn>
-                            {this.props.screenWidth !== ScreenWidths.SM &&
+                            {this.props.screenWidth !== ScreenWidths.Sm &&
                                 <TableHeaderColumn>
                                     Send
                                 </TableHeaderColumn>
@@ -360,7 +360,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
             return '';
         }
-        const isSmallScreen = this.props.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
         const actionPaddingX = isSmallScreen ? 2 : 24;
         const allTokens = _.values(this.props.tokenByAddress);
@@ -379,7 +379,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
     private renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
         const tokenState = this.props.tokenStateByAddress[token.address];
         const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId,
-                                                         EtherscanLinkSuffixes.address);
+                                                         EtherscanLinkSuffixes.Address);
         const isMintable = _.includes(configs.symbolsOfMintableTokens, token.symbol) &&
             this.props.networkId !== constants.MAINNET_NETWORK_ID;
         return (
@@ -432,7 +432,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                         />
                     }
                 </TableRowColumn>
-                {this.props.screenWidth !== ScreenWidths.SM &&
+                {this.props.screenWidth !== ScreenWidths.Sm &&
                     <TableRowColumn
                         style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}}
                     >
@@ -580,7 +580,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             return true;
         } catch (err) {
             const errMsg = '' + err;
-            if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+            if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
                 this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
                 return false;
             }
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index 4dcceadb7..f43caecc6 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -87,7 +87,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
                             <EtherScanIcon
                                 addressOrTxHash={fill.transactionHash}
                                 networkId={this.props.networkId}
-                                etherscanLinkSuffixes={EtherscanLinkSuffixes.tx}
+                                etherscanLinkSuffixes={EtherscanLinkSuffixes.Tx}
                             />
                         </div>
                     </div>
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b3bc0bc59..d56840689 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -26,7 +26,7 @@ export const EthereumAddress = (props: EthereumAddressProps) => {
                 <EtherScanIcon
                     addressOrTxHash={props.address}
                     networkId={props.networkId}
-                    etherscanLinkSuffixes={EtherscanLinkSuffixes.address}
+                    etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
                 />
             </div>
             <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 9b4d172f1..3ccbf0bd9 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -13,7 +13,7 @@ interface EtherScanIconProps {
 
 export const EtherScanIcon = (props: EtherScanIconProps) => {
     const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-        props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.address,
+        props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.Address,
     );
     const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
     return (
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index e6b6ea9e2..2ff5b155e 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -45,7 +45,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
             height: IMAGE_DIMENSION,
         };
         const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-            this.props.address, this.props.networkId, EtherscanLinkSuffixes.address,
+            this.props.address, this.props.networkId, EtherscanLinkSuffixes.Address,
         );
         const isRegistered = this.props.isInTokenRegistry;
         const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
-- 
cgit v1.2.3


From 0578116f1dbe89a5b3c0c7e5f45948a1434b07b3 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 17 Dec 2017 20:51:54 -0500
Subject: Fix unhoverable help tooltip by renaming `Trade Permissions` to
 `Allowance`

---
 packages/website/ts/components/token_balances.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 5338e9609..b111e1ec6 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -164,7 +164,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                      minutes or less.';
         const allowanceExplanation = '0x smart contracts require access to your<br> \
                                   token balances in order to execute trades.<br> \
-                                  Toggling permissions sets an allowance for the<br> \
+                                  Toggling sets an allowance for the<br> \
                                   smart contract so you can start trading that token.';
         return (
             <div className="lg-px4 md-px4 sm-px1 pb2">
@@ -302,7 +302,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                             </TableHeaderColumn>
                             <TableHeaderColumn style={{paddingLeft: 3}}>Balance</TableHeaderColumn>
                             <TableHeaderColumn>
-                                <div className="inline-block">{!isSmallScreen && 'Trade '}Permissions</div>
+                                <div className="inline-block">Allowance</div>
                                 <HelpTooltip
                                     style={{paddingLeft: 4}}
                                     explanation={allowanceExplanation}
-- 
cgit v1.2.3


From 98c01c2f8097c849c53d87a4946edfd4fba94495 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 17 Dec 2017 20:57:39 -0500
Subject: Remove unused `location` prop

---
 packages/website/ts/components/footer.tsx | 4 +---
 packages/website/ts/components/portal.tsx | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index b26523094..7cd9128df 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -111,9 +111,7 @@ const titleToIcon: {[title: string]: string} = {
     'Reddit': 'reddit.png',
 };
 
-export interface FooterProps {
-    location: Location;
-}
+export interface FooterProps {}
 
 interface FooterState {}
 
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 74b1bdec6..439772288 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -224,7 +224,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                         flashMessage={this.props.flashMessage}
                     />
                 </div>
-                <Footer location={this.props.location} />
+                <Footer />
             </div>
         );
     }
-- 
cgit v1.2.3


From df9d3e3e16e5a00ea84369691c46a6e4a6a53049 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 09:15:12 +0100
Subject: Consolidate all custom colors and material-ui colors into a colors
 module

---
 .../components/dialogs/blockchain_err_dialog.tsx   |  2 +-
 .../dialogs/eth_weth_conversion_dialog.tsx         |  8 +--
 .../ts/components/dialogs/ledger_config_dialog.tsx |  2 +-
 .../dialogs/portal_disclaimer_dialog.tsx           |  2 +-
 .../dialogs/u2f_not_supported_dialog.tsx           |  2 +-
 .../ts/components/eth_weth_conversion_button.tsx   |  1 +
 packages/website/ts/components/eth_wrappers.tsx    |  5 +-
 packages/website/ts/components/fill_order.tsx      |  7 +--
 .../website/ts/components/fill_warning_dialog.tsx  |  2 +-
 packages/website/ts/components/footer.tsx          | 12 ++--
 .../generate_order/generate_order_form.tsx         |  2 +-
 .../components/generate_order/new_token_form.tsx   |  2 +-
 .../website/ts/components/inputs/address_input.tsx |  2 +-
 .../ts/components/inputs/balance_bounded_input.tsx |  2 +-
 .../ts/components/inputs/token_amount_input.tsx    |  2 +-
 .../website/ts/components/inputs/token_input.tsx   |  2 +-
 packages/website/ts/components/portal.tsx          |  4 +-
 packages/website/ts/components/token_balances.tsx  |  8 +--
 packages/website/ts/components/top_bar.tsx         | 16 +++--
 .../website/ts/components/top_bar_menu_item.tsx    |  8 +--
 .../ts/components/track_token_confirmation.tsx     |  2 +-
 .../trade_history/trade_history_item.tsx           |  2 +-
 packages/website/ts/components/ui/alert.tsx        |  8 +--
 packages/website/ts/components/ui/copy_icon.tsx    |  2 +-
 .../ts/components/ui/drop_down_menu_item.tsx       |  4 +-
 .../website/ts/components/ui/etherscan_icon.tsx    |  2 +-
 packages/website/ts/components/ui/input_label.tsx  |  2 +-
 .../website/ts/components/ui/labeled_switcher.tsx  | 73 ----------------------
 .../ts/components/ui/lifecycle_raised_button.tsx   |  3 +-
 packages/website/ts/components/ui/party.tsx        |  5 +-
 .../website/ts/components/ui/required_label.tsx    |  2 +-
 packages/website/ts/components/ui/swap_icon.tsx    |  2 +-
 32 files changed, 60 insertions(+), 138 deletions(-)
 delete mode 100644 packages/website/ts/components/ui/labeled_switcher.tsx

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index afc89be1a..aea5fcdd1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {BlockchainErrs} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 
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 e499bdcbe..96533defc 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
 import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
 import {Side, Token, TokenState} from 'ts/types';
-
-const DARK_BLUE = '#4D5481';
+import {colors} from 'ts/utils/colors';
+import {constants} from 'ts/utils/constants';
 
 interface EthWethConversionDialogProps {
     direction: Side;
@@ -75,7 +75,7 @@ export class EthWethConversionDialog extends
                         {this.renderCurrency(isWrappedVersion)}
                         <div style={{paddingTop: 68}}>
                             <i
-                                style={{fontSize: 28, color: DARK_BLUE}}
+                                style={{fontSize: 28, color: colors.darkBlue}}
                                 className="zmdi zmdi-arrow-right"
                             />
                         </div>
@@ -124,7 +124,7 @@ export class EthWethConversionDialog extends
             <div className="mx-auto pt2">
                 <div
                     className="center"
-                    style={{color: DARK_BLUE}}
+                    style={{color: colors.darkBlue}}
                 >
                     {name}
                 </div>
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index d3c95a011..e2a8b932a 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,7 +2,6 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import {
     Table,
     TableBody,
@@ -17,6 +16,7 @@ import ReactTooltip = require('react-tooltip');
 import {Blockchain} from 'ts/blockchain';
 import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
 import {Dispatcher} from 'ts/redux/dispatcher';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index bfff7fbb5..2f824ab44 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 interface PortalDisclaimerDialogProps {
     isOpen: boolean;
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index 09c32c997..e2bef63c7 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,6 +1,6 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {constants} from 'ts/utils/constants';
 
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index 5464f8df0..4f218286d 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -7,6 +7,7 @@ import {Blockchain} from 'ts/blockchain';
 import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 9bb05becf..e32311e9e 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -2,7 +2,7 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import {
     Table,
     TableBody,
@@ -29,7 +29,6 @@ import {constants} from 'ts/utils/constants';
 
 const PRECISION = 5;
 const DATE_FORMAT = 'D/M/YY';
-const LIGHT_GRAY = '#A5A5A5';
 const ICON_DIMENSION = 40;
 const ETHER_ICON_PATH = '/images/ether.png';
 const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
@@ -93,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                         <a
                             target="_blank"
                             href="https://weth.io/"
-                            style={{color: LIGHT_GRAY}}
+                            style={{color: colors.gray}}
                         >
                             <div className="flex">
                                 <div>About Wrapped ETH</div>
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 40a9b87d6..f7473b79e 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -28,12 +28,11 @@ import {
     TokenStateByAddress,
     WebsitePaths,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
 
-const CUSTOM_LIGHT_GRAY = '#BBBBBB';
-
 interface FillOrderProps {
     blockchain: Blockchain;
     blockchainErr: BlockchainErrs;
@@ -222,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 <div className="clearfix pb2" style={{width: '100%'}}>
                     <div className="inline left">Order details</div>
                     <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: '#BEBEBE'}}>
+                        <div className="col col-4 pl2" style={{color: colors.gray}}>
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
@@ -274,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                        </div>
                        <div
                            className="col col-5 pl1"
-                           style={{color: CUSTOM_LIGHT_GRAY, paddingTop: 39}}
+                           style={{color: colors.lightGray, paddingTop: 39}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 83e46cc8f..e6642d450 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,6 +1,6 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 
 interface FillWarningDialogProps {
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 7cd9128df..67e966033 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -4,6 +4,7 @@ import {
   Link,
 } from 'react-router-dom';
 import {WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 
 interface MenuItemsBySection {
@@ -24,9 +25,6 @@ enum Sections {
 }
 
 const ICON_DIMENSION = 16;
-const CUSTOM_DARK_GRAY = '#393939';
-const CUSTOM_LIGHT_GRAY = '#CACACA';
-const CUSTOM_LIGHTEST_GRAY = '#9E9E9E';
 const menuItemsBySection: MenuItemsBySection = {
     Documentation: [
         {
@@ -118,14 +116,16 @@ interface FooterState {}
 export class Footer extends React.Component<FooterProps, FooterState> {
     public render() {
         return (
-            <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}>
+            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGray}}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
                     <div className="col lg-col-4 md-col-4 col-12 left">
                         <div className="sm-mx-auto" style={{width: 148}}>
                             <div>
                                 <img src="/images/protocol_logo_white.png" height="30" />
                             </div>
-                            <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}>
+                            <div
+                                style={{fontSize: 11, color: colors.gray, paddingLeft: 37, paddingTop: 2}}
+                            >
                                 © ZeroEx, Intl.
                             </div>
                         </div>
@@ -209,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
     private renderHeader(title: string) {
         const headerStyle = {
             textTransform: 'uppercase',
-            color: CUSTOM_LIGHT_GRAY,
+            color: colors.lightGray,
             letterSpacing: 2,
             fontFamily: 'Roboto Mono',
             fontSize: 13,
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index f273045a8..7f4c25718 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {ExpirationInput} from 'ts/components/inputs/expiration_input';
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 1be9f5ece..8b04919e0 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index bd9e24c80..f5ebb4112 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,6 +1,6 @@
 import {addressUtils} from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {RequiredLabel} from 'ts/components/ui/required_label';
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 7ddefc3b9..d02778392 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 1ae9bc85e..363904e4d 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,7 +1,7 @@
 import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 40fdf9689..e406ca27b 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {AssetPicker} from 'ts/components/generate_order/asset_picker';
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 439772288..ea076205e 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Route, Switch} from 'react-router-dom';
@@ -171,7 +171,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                             <div className="mx-auto flex">
                                 <div
                                     className="col col-2 pr2 pt1 sm-hide xs-hide"
-                                    style={{overflow: 'hidden', backgroundColor: 'rgb(39, 39, 39)', color: 'white'}}
+                                    style={{overflow: 'hidden', backgroundColor: colors.darkestGray, color: 'white'}}
                                 >
                                     <PortalMenu menuItemStyle={{color: 'white'}} />
                                 </div>
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index b111e1ec6..a3c577a2e 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -7,7 +7,7 @@ import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
 import {
@@ -333,9 +333,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </Dialog>
                 <Dialog
                     title="Request Dharma Loan"
-                    titleStyle={{fontWeight: 100, backgroundColor: 'rgb(250, 250, 250)'}}
-                    bodyStyle={{backgroundColor: 'rgb(37, 37, 37)'}}
-                    actionsContainerStyle={{backgroundColor: 'rgb(250, 250, 250)'}}
+                    titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
+                    bodyStyle={{backgroundColor: colors.dharmaDarkGray}}
+                    actionsContainerStyle={{backgroundColor: colors.white}}
                     autoScrollBodyContent={true}
                     actions={dharmaDialogActions}
                     open={this.state.isDharmaDialogVisible}
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 27de49620..82ce0dee2 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import ReactTooltip = require('react-tooltip');
@@ -12,11 +11,10 @@ import {Identicon} from 'ts/components/ui/identicon';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
 import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 
-const CUSTOM_DARK_GRAY = '#231F20';
-const SECTION_HEADER_COLOR = 'rgb(234, 234, 234)';
-
 interface TopBarProps {
     userAddress?: string;
     blockchainIsLoaded: boolean;
@@ -63,7 +61,7 @@ const styles: Styles = {
     },
     menuItem: {
         fontSize: 14,
-        color: CUSTOM_DARK_GRAY,
+        color: colors.darkestGray,
         paddingTop: 6,
         paddingBottom: 6,
         marginTop: 17,
@@ -222,7 +220,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 {this.renderPortalMenu()}
                 {this.renderDocsMenu()}
                 {this.renderWiki()}
-                <div className="pl1 py1 mt3" style={{backgroundColor: SECTION_HEADER_COLOR}}>Website</div>
+                <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightestGray}}>Website</div>
                 <Link to={WebsitePaths.Home} className="text-decoration-none">
                     <MenuItem className="py2">Home</MenuItem>
                 </Link>
@@ -286,7 +284,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>{sectionTitle}</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>{sectionTitle}</div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menu}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -306,7 +304,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>0x Protocol Wiki</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>0x Protocol Wiki</div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -323,7 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>Portal DApp</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>Portal DApp</div>
                 <PortalMenu
                     menuItemStyle={{color: 'black'}}
                     onClick={this.onMenuButtonClick.bind(this)}
diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx
index 38dc91194..83e4cbc35 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
+import {colors} from 'ts/utils/colors';
 
-const CUSTOM_DARK_GRAY = '#231F20';
 const DEFAULT_STYLE = {
-    color: CUSTOM_DARK_GRAY,
+    color: colors.darkestGray,
 };
 
 interface TopBarMenuItemProps {
@@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
     public render() {
         const primaryStyles = this.props.isPrimary ? {
             borderRadius: 4,
-            border: `1px solid ${this.props.isNightVersion ? '#979797' : 'rgb(230, 229, 229)'}`,
+            border: `1px solid ${this.props.isNightVersion ? colors.gray : colors.grayishPink}`,
             marginTop: 15,
             paddingLeft: 9,
             paddingRight: 9,
@@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         } : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
         const linkColor = _.isUndefined(menuItemColor) ?
-            CUSTOM_DARK_GRAY :
+            colors.darkestGray :
             menuItemColor;
         return (
             <div
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index cd588f239..2cda34c1a 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Party} from 'ts/components/ui/party';
 import {Token, TokenByAddress} from 'ts/types';
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index f43caecc6..27d5c1e03 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -2,7 +2,7 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as moment from 'moment';
 import * as React from 'react';
 import * as ReactTooltip from 'react-tooltip';
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 71d2388f2..bc65d0f0f 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,8 +1,6 @@
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {AlertTypes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(137, 199, 116)';
+import {colors} from 'ts/utils/colors';
 
 interface AlertProps {
     type: AlertTypes;
@@ -12,8 +10,8 @@ interface AlertProps {
 export function Alert(props: AlertProps) {
     const isAlert = props.type === AlertTypes.ERROR;
     const errMsgStyles = {
-        background: isAlert ? colors.red200 : CUSTOM_GREEN,
-        color: 'white',
+        background: isAlert ? colors.red200 : colors.lightestGreen,
+        color: colors.white,
         marginTop: 10,
         padding: 4,
         paddingLeft: 8,
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 5f8e6a060..d3a0f47ee 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx
index 041688a9d..39a667d74 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -2,9 +2,9 @@ import * as _ from 'lodash';
 import Menu from 'material-ui/Menu';
 import Popover from 'material-ui/Popover';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
-const CUSTOM_LIGHT_GRAY = '#848484';
 const DEFAULT_STYLE = {
     fontSize: 14,
 };
@@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
                         onMouseEnter={this.onHover.bind(this)}
                         onMouseLeave={this.onHoverOff.bind(this)}
                     >
-                        <Menu style={{color: CUSTOM_LIGHT_GRAY}}>
+                        <Menu style={{color: colors.gray}}>
                             {this.props.subMenuItems}
                         </Menu>
                     </div>
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 3ccbf0bd9..2778fc085 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EtherscanLinkSuffixes} from 'ts/types';
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 852097519..1f26f5fd2 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,4 +1,4 @@
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 
 export interface InputLabelProps {
diff --git a/packages/website/ts/components/ui/labeled_switcher.tsx b/packages/website/ts/components/ui/labeled_switcher.tsx
deleted file mode 100644
index 80a8fbe94..000000000
--- a/packages/website/ts/components/ui/labeled_switcher.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
-import * as React from 'react';
-
-const CUSTOM_BLUE = '#63A6F1';
-
-interface LabeledSwitcherProps {
-    labelLeft: string;
-    labelRight: string;
-    isLeftInitiallySelected: boolean;
-    onLeftLabelClickAsync: () => Promise<boolean>;
-    onRightLabelClickAsync: () => Promise<boolean>;
-}
-
-interface LabeledSwitcherState {
-    isLeftSelected: boolean;
-}
-
-export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
-    constructor(props: LabeledSwitcherProps) {
-        super(props);
-        this.state = {
-            isLeftSelected: props.isLeftInitiallySelected,
-        };
-    }
-    public render() {
-        const isLeft = true;
-        return (
-            <div
-                className="rounded clearfix"
-            >
-                {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
-                {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
-            </div>
-        );
-    }
-    private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
-        const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
-        const style = {
-            cursor: 'pointer',
-            backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
-            color: isSelected ? 'white' : '#A5A5A5',
-            boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
-            borderTop: borderStyle,
-            borderBottom: borderStyle,
-            [isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
-            paddingTop: 12,
-            paddingBottom: 12,
-        };
-        return (
-            <div
-                className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
-                style={style}
-                onClick={this.onLabelClickAsync.bind(this, isLeft)}
-            >
-                {title}
-            </div>
-        );
-    }
-    private async onLabelClickAsync(isLeft: boolean): Promise<void> {
-        this.setState({
-            isLeftSelected: isLeft,
-        });
-        const didSucceed = isLeft ?
-                           await this.props.onLeftLabelClickAsync() :
-                           await this.props.onRightLabelClickAsync();
-        if (!didSucceed) {
-            this.setState({
-                isLeftSelected: !isLeft,
-            });
-        }
-    }
-}
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 2d668fb82..1856a6b50 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
@@ -32,7 +33,7 @@ export class LifeCycleRaisedButton extends
     public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
         isDisabled: false,
         backgroundColor: 'white',
-        labelColor: 'rgb(97, 97, 97)',
+        labelColor: colors.darkGray,
     };
     private buttonTimeoutId: number;
     private didUnmount: boolean;
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index 2ff5b155e..918d42a3b 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,15 +1,14 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EthereumAddress} from 'ts/components/ui/ethereum_address';
 import {Identicon} from 'ts/components/ui/identicon';
 import {EtherscanLinkSuffixes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 const IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
-const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';
 
 interface PartyProps {
     label: string;
@@ -94,7 +93,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
                                 className="mx-auto"
                                 style={{fontSize: 13, width: 127}}
                             >
-                                <span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
+                                <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}>
                                     <i
                                         className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
                                     />
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index db69d7278..3166ae0e7 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,4 +1,4 @@
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 
 export interface RequiredLabelProps {
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index b5d4b0caa..0f65bf449 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 
 interface SwapIconProps {
-- 
cgit v1.2.3


From 445ff1e28ee572236ec963a27bff227e859f685c Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 10:06:16 +0100
Subject: Standardize colors to always be in uppercase hex and consolidate
 material-ui greys

---
 packages/website/ts/components/dialogs/ledger_config_dialog.tsx   | 2 +-
 packages/website/ts/components/eth_wrappers.tsx                   | 2 +-
 packages/website/ts/components/fill_order.tsx                     | 4 ++--
 packages/website/ts/components/footer.tsx                         | 4 ++--
 .../website/ts/components/generate_order/generate_order_form.tsx  | 2 +-
 packages/website/ts/components/generate_order/new_token_form.tsx  | 6 +++---
 packages/website/ts/components/inputs/address_input.tsx           | 2 +-
 packages/website/ts/components/inputs/balance_bounded_input.tsx   | 4 ++--
 packages/website/ts/components/inputs/token_amount_input.tsx      | 2 +-
 packages/website/ts/components/inputs/token_input.tsx             | 2 +-
 packages/website/ts/components/top_bar.tsx                        | 8 ++++----
 packages/website/ts/components/top_bar_menu_item.tsx              | 2 +-
 packages/website/ts/components/ui/drop_down_menu_item.tsx         | 2 +-
 packages/website/ts/components/ui/input_label.tsx                 | 2 +-
 14 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index e2a8b932a..05a15526f 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -146,7 +146,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                     <div className="overflow-hidden" style={{width: 180}}>
                         <TextField
                             floatingLabelFixed={true}
-                            floatingLabelStyle={{color: colors.grey500}}
+                            floatingLabelStyle={{color: colors.grey}}
                             floatingLabelText="Update path derivation (advanced)"
                             value={this.state.derivationPath}
                             errorText={this.state.derivationErrMsg}
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index e32311e9e..fb1205b62 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -92,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                         <a
                             target="_blank"
                             href="https://weth.io/"
-                            style={{color: colors.gray}}
+                            style={{color: colors.grey}}
                         >
                             <div className="flex">
                                 <div>About Wrapped ETH</div>
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f7473b79e..f91540c26 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -221,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 <div className="clearfix pb2" style={{width: '100%'}}>
                     <div className="inline left">Order details</div>
                     <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: colors.gray}}>
+                        <div className="col col-4 pl2" style={{color: colors.grey}}>
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
@@ -273,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                        </div>
                        <div
                            className="col col-5 pl1"
-                           style={{color: colors.lightGray, paddingTop: 39}}
+                           style={{color: colors.grey400, paddingTop: 39}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 67e966033..4b03c49e6 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -124,7 +124,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                                 <img src="/images/protocol_logo_white.png" height="30" />
                             </div>
                             <div
-                                style={{fontSize: 11, color: colors.gray, paddingLeft: 37, paddingTop: 2}}
+                                style={{fontSize: 11, color: colors.grey, paddingLeft: 37, paddingTop: 2}}
                             >
                                 © ZeroEx, Intl.
                             </div>
@@ -209,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
     private renderHeader(title: string) {
         const headerStyle = {
             textTransform: 'uppercase',
-            color: colors.lightGray,
+            color: colors.grey400,
             letterSpacing: 2,
             fontFamily: 'Roboto Mono',
             fontSize: 13,
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 7f4c25718..587fdc6f1 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -154,7 +154,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                     </div>
                     <div className="pt1 sm-pb2 lg-px4 md-px4">
                         <div className="lg-px3 md-px3">
-                            <div style={{fontSize: 12, color: colors.grey500}}>Expiration</div>
+                            <div style={{fontSize: 12, color: colors.grey}}>Expiration</div>
                             <ExpirationInput
                                 orderExpiryTimestamp={this.props.orderExpiryTimestamp}
                                 updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 8b04919e0..604a54b18 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -49,7 +49,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey500}}
+                        floatingLabelStyle={{color: colors.grey}}
                         floatingLabelText={<RequiredLabel label="Name" />}
                         value={this.state.name}
                         errorText={this.state.nameErrText}
@@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey500}}
+                        floatingLabelStyle={{color: colors.grey}}
                         floatingLabelText={<RequiredLabel label="Symbol" />}
                         value={this.state.symbol}
                         errorText={this.state.symbolErrText}
@@ -78,7 +78,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey500}}
+                        floatingLabelStyle={{color: colors.grey}}
                         floatingLabelText={<RequiredLabel label="Decimals" />}
                         value={this.state.decimals}
                         errorText={this.state.decimalsErrText}
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index f5ebb4112..d432a038e 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -50,7 +50,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
                     fullWidth={true}
                     hintText={hintText}
                     floatingLabelFixed={true}
-                    floatingLabelStyle={{color: colors.grey500, display: labelDisplay}}
+                    floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
                     floatingLabelText={label}
                     errorText={this.state.errMsg}
                     value={this.state.address}
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index d02778392..0b92a5856 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -83,7 +83,7 @@ export class BalanceBoundedInput extends
                 fullWidth={true}
                 floatingLabelText={label}
                 floatingLabelFixed={true}
-                floatingLabelStyle={{color: colors.grey500, width: 206}}
+                floatingLabelStyle={{color: colors.grey, width: 206}}
                 errorText={errorText}
                 value={this.state.amountString}
                 hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
@@ -133,7 +133,7 @@ export class BalanceBoundedInput extends
         const increaseBalanceText = 'Increase balance';
         const linkStyle = {
             cursor: 'pointer',
-            color: colors.grey900,
+            color: colors.darkestGray,
             textDecoration: 'underline',
             display: 'inline',
         };
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 363904e4d..ddf0d3307 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     Insufficient allowance.{' '}
                     <Link
                         to={`${WebsitePaths.Portal}/balances`}
-                        style={{cursor: 'pointer', color: colors.grey900}}
+                        style={{cursor: 'pointer', color: colors.darkestGray}}
                     >
                             Set allowance
                     </Link>
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index e406ca27b..806c8b21f 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -62,7 +62,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
                     >
                         <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
                     </div>
-                    <div className="py1 center" style={{color: colors.grey500}}>
+                    <div className="py1 center" style={{color: colors.grey}}>
                         {token.name}
                     </div>
                 </Paper>
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 82ce0dee2..179840ffc 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -220,7 +220,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 {this.renderPortalMenu()}
                 {this.renderDocsMenu()}
                 {this.renderWiki()}
-                <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightestGray}}>Website</div>
+                <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div>
                 <Link to={WebsitePaths.Home} className="text-decoration-none">
                     <MenuItem className="py2">Home</MenuItem>
                 </Link>
@@ -284,7 +284,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>{sectionTitle}</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>{sectionTitle}</div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menu}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -304,7 +304,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>0x Protocol Wiki</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>0x Protocol Wiki</div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -321,7 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>Portal DApp</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div>
                 <PortalMenu
                     menuItemStyle={{color: 'black'}}
                     onClick={this.onMenuButtonClick.bind(this)}
diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx
index 83e4cbc35..d912abe06 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
     public render() {
         const primaryStyles = this.props.isPrimary ? {
             borderRadius: 4,
-            border: `1px solid ${this.props.isNightVersion ? colors.gray : colors.grayishPink}`,
+            border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
             marginTop: 15,
             paddingLeft: 9,
             paddingRight: 9,
diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx
index 39a667d74..55347cb98 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
                         onMouseEnter={this.onHover.bind(this)}
                         onMouseLeave={this.onHoverOff.bind(this)}
                     >
-                        <Menu style={{color: colors.gray}}>
+                        <Menu style={{color: colors.grey}}>
                             {this.props.subMenuItems}
                         </Menu>
                     </div>
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 1f26f5fd2..43f101d11 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -7,7 +7,7 @@ export interface InputLabelProps {
 
 const styles = {
     label: {
-        color: colors.grey500,
+        color: colors.grey,
         fontSize: 12,
         pointerEvents: 'none',
         textAlign: 'left',
-- 
cgit v1.2.3


From 1aed970ce3468306f3bedbfdc29669d42e487441 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 10:28:34 +0100
Subject: standarize on `grey` over `gray` spelling and other color related
 fixes

---
 .../ts/components/dialogs/eth_weth_conversion_dialog.tsx      |  1 -
 .../ts/components/dialogs/u2f_not_supported_dialog.tsx        |  2 +-
 packages/website/ts/components/eth_weth_conversion_button.tsx |  1 -
 packages/website/ts/components/eth_wrappers.tsx               |  2 +-
 packages/website/ts/components/fill_order.tsx                 |  2 +-
 packages/website/ts/components/fill_warning_dialog.tsx        |  2 +-
 .../ts/components/flash_messages/token_send_completed.tsx     |  3 ++-
 .../ts/components/flash_messages/transaction_submitted.tsx    |  3 ++-
 packages/website/ts/components/footer.tsx                     |  6 +++---
 .../ts/components/generate_order/generate_order_form.tsx      |  2 +-
 .../website/ts/components/generate_order/new_token_form.tsx   |  2 +-
 packages/website/ts/components/inputs/address_input.tsx       |  2 +-
 .../website/ts/components/inputs/balance_bounded_input.tsx    |  4 ++--
 packages/website/ts/components/inputs/token_amount_input.tsx  |  4 ++--
 packages/website/ts/components/inputs/token_input.tsx         |  2 +-
 packages/website/ts/components/portal.tsx                     | 11 ++++++++---
 packages/website/ts/components/token_balances.tsx             |  4 ++--
 packages/website/ts/components/top_bar.tsx                    |  7 +++----
 packages/website/ts/components/top_bar_menu_item.tsx          |  4 ++--
 packages/website/ts/components/track_token_confirmation.tsx   |  2 +-
 .../ts/components/trade_history/trade_history_item.tsx        |  2 +-
 packages/website/ts/components/ui/copy_icon.tsx               |  2 +-
 packages/website/ts/components/ui/etherscan_icon.tsx          |  2 +-
 packages/website/ts/components/ui/input_label.tsx             |  2 +-
 packages/website/ts/components/ui/lifecycle_raised_button.tsx |  4 ++--
 packages/website/ts/components/ui/required_label.tsx          |  2 +-
 packages/website/ts/components/ui/swap_icon.tsx               |  2 +-
 27 files changed, 43 insertions(+), 39 deletions(-)

(limited to 'packages/website/ts/components')

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 96533defc..44c23e4b0 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -6,7 +6,6 @@ import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
 import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
 import {Side, Token, TokenState} from 'ts/types';
 import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
 
 interface EthWethConversionDialogProps {
     direction: Side;
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index e2bef63c7..83042624d 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 
 interface U2fNotSupportedDialogProps {
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index 4f218286d..5464f8df0 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -7,7 +7,6 @@ import {Blockchain} from 'ts/blockchain';
 import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types';
-import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index fb1205b62..ef1379e59 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -2,7 +2,6 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
-import {colors} from 'ts/utils/colors';
 import {
     Table,
     TableBody,
@@ -24,6 +23,7 @@ import {
     TokenState,
     TokenStateByAddress,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f91540c26..c96dfe27a 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -323,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 Order successfully filled. See the trade details in your{' '}
                 <Link
                     to={`${WebsitePaths.Portal}/trades`}
-                    style={{color: 'white'}}
+                    style={{color: colors.white}}
                 >
                     trade history
                 </Link>
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index e6642d450..7370ee2d8 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 interface FillWarningDialogProps {
     isOpen: boolean;
diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx
index fef7520f6..26619c54f 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import * as React from 'react';
 import {Token} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 interface TokenSendCompletedProps {
@@ -19,7 +20,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps,
         const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) &&
                             (
                                 <a
-                                    style={{color: 'white'}}
+                                    style={{color: colors.white}}
                                     href={`${this.props.etherScanLinkIfExists}`}
                                     target="_blank"
                                 >
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index cef3e2b1e..64f460e20 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 interface TransactionSubmittedProps {
     etherScanLinkIfExists?: string;
@@ -16,7 +17,7 @@ export class TransactionSubmitted extends React.Component<TransactionSubmittedPr
                 <div>
                     Transaction submitted to the network:{' '}
                     <a
-                        style={{color: 'white'}}
+                        style={{color: colors.white}}
                         href={`${this.props.etherScanLinkIfExists}`}
                         target="_blank"
                     >
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 4b03c49e6..82e046a59 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -98,7 +98,7 @@ const menuItemsBySection: MenuItemsBySection = {
     ],
 };
 const linkStyle = {
-    color: 'white',
+    color: colors.white,
     cursor: 'pointer',
 };
 
@@ -116,8 +116,8 @@ interface FooterState {}
 export class Footer extends React.Component<FooterProps, FooterState> {
     public render() {
         return (
-            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGray}}>
-                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
+            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGrey}}>
+                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: colors.white}}>
                     <div className="col lg-col-4 md-col-4 col-12 left">
                         <div className="sm-mx-auto" style={{width: 148}}>
                             <div>
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index 587fdc6f1..5479f0f83 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -3,7 +3,6 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {ExpirationInput} from 'ts/components/inputs/expiration_input';
@@ -30,6 +29,7 @@ import {
     TokenByAddress,
     TokenStateByAddress,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 604a54b18..6c3c01d0d 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,5 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
@@ -9,6 +8,7 @@ import {Alert} from 'ts/components/ui/alert';
 import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
 import {RequiredLabel} from 'ts/components/ui/required_label';
 import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 interface NewTokenFormProps {
     blockchain: Blockchain;
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index d432a038e..a17b6e3f5 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
 import {addressUtils} from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {RequiredLabel} from 'ts/components/ui/required_label';
+import {colors} from 'ts/utils/colors';
 
 interface AddressInputProps {
     disabled?: boolean;
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 0b92a5856..61ab34f25 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,11 +1,11 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {RequiredLabel} from 'ts/components/ui/required_label';
 import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
@@ -133,7 +133,7 @@ export class BalanceBoundedInput extends
         const increaseBalanceText = 'Increase balance';
         const linkStyle = {
             cursor: 'pointer',
-            color: colors.darkestGray,
+            color: colors.darkestGrey,
             textDecoration: 'underline',
             display: 'inline',
         };
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index ddf0d3307..c9728dc5f 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,11 @@
 import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
 import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 interface TokenAmountInputProps {
     token: Token;
@@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     Insufficient allowance.{' '}
                     <Link
                         to={`${WebsitePaths.Portal}/balances`}
-                        style={{cursor: 'pointer', color: colors.darkestGray}}
+                        style={{cursor: 'pointer', color: colors.darkestGrey}}
                     >
                             Set allowance
                     </Link>
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 806c8b21f..7008da12f 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,6 +1,5 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {AssetPicker} from 'ts/components/generate_order/asset_picker';
@@ -8,6 +7,7 @@ import {InputLabel} from 'ts/components/ui/input_label';
 import {TokenIcon} from 'ts/components/ui/token_icon';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 const TOKEN_ICON_DIMENSION = 80;
 
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index ea076205e..c292e0a92 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Route, Switch} from 'react-router-dom';
@@ -32,6 +31,7 @@ import {
     TokenStateByAddress,
     WebsitePaths,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
@@ -138,6 +138,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
             flexDirection: 'column',
             justifyContent: 'space-between',
         };
+        const portalMenuContainerStyle: React.CSSProperties = {
+            overflow: 'hidden',
+            backgroundColor: colors.darkestGrey,
+            color: colors.white,
+        };
         return (
             <div style={portalStyle}>
                 <DocumentTitle title="0x Portal DApp"/>
@@ -171,9 +176,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                             <div className="mx-auto flex">
                                 <div
                                     className="col col-2 pr2 pt1 sm-hide xs-hide"
-                                    style={{overflow: 'hidden', backgroundColor: colors.darkestGray, color: 'white'}}
+                                    style={portalMenuContainerStyle}
                                 >
-                                    <PortalMenu menuItemStyle={{color: 'white'}} />
+                                    <PortalMenu menuItemStyle={{color: colors.white}} />
                                 </div>
                                 <div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12">
                                     <div className="py2" style={{backgroundColor: colors.grey50}}>
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index a3c577a2e..61aea6a88 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -7,7 +7,6 @@ import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'ts/utils/colors';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
 import {
@@ -42,6 +41,7 @@ import {
     TokenStateByAddress,
     TokenVisibility,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
@@ -334,7 +334,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 <Dialog
                     title="Request Dharma Loan"
                     titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
-                    bodyStyle={{backgroundColor: colors.dharmaDarkGray}}
+                    bodyStyle={{backgroundColor: colors.dharmaDarkGrey}}
                     actionsContainerStyle={{backgroundColor: colors.white}}
                     autoScrollBodyContent={true}
                     actions={dharmaDialogActions}
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 179840ffc..73bdfacca 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -12,7 +12,6 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
 import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
 import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 
 interface TopBarProps {
@@ -44,11 +43,11 @@ const styles: Styles = {
     },
     addressPopover: {
         backgroundColor: colors.blueGrey500,
-        color: 'white',
+        color: colors.white,
         padding: 3,
     },
     topBar: {
-        backgroundColor: 'white',
+        backgroundcolor: colors.white,
         height: 59,
         width: '100%',
         position: 'fixed',
@@ -61,7 +60,7 @@ const styles: Styles = {
     },
     menuItem: {
         fontSize: 14,
-        color: colors.darkestGray,
+        color: colors.darkestGrey,
         paddingTop: 6,
         paddingBottom: 6,
         marginTop: 17,
diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx
index d912abe06..64cb48b2e 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -4,7 +4,7 @@ import {Link} from 'react-router-dom';
 import {colors} from 'ts/utils/colors';
 
 const DEFAULT_STYLE = {
-    color: colors.darkestGray,
+    color: colors.darkestGrey,
 };
 
 interface TopBarMenuItemProps {
@@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         } : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
         const linkColor = _.isUndefined(menuItemColor) ?
-            colors.darkestGray :
+            colors.darkestGrey :
             menuItemColor;
         return (
             <div
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index 2cda34c1a..ff840fe8c 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Party} from 'ts/components/ui/party';
 import {Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 interface TrackTokenConfirmationProps {
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index 27d5c1e03..d2a334df9 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -2,13 +2,13 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'ts/utils/colors';
 import * as moment from 'moment';
 import * as React from 'react';
 import * as ReactTooltip from 'react-tooltip';
 import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
 import {Party} from 'ts/components/ui/party';
 import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 const PRECISION = 5;
 const IDENTICON_DIAMETER = 40;
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index d3a0f47ee..3c50430df 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
 import ReactTooltip = require('react-tooltip');
+import {colors} from 'ts/utils/colors';
 
 interface CopyIconProps {
     data: string;
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 2778fc085..111d5d478 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EtherscanLinkSuffixes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
 interface EtherScanIconProps {
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 43f101d11..bfa1da280 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 export interface InputLabelProps {
     text: string | Element | React.ReactNode;
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 1856a6b50..08e8bc9ce 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -32,8 +32,8 @@ export class LifeCycleRaisedButton extends
     React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
     public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
         isDisabled: false,
-        backgroundColor: 'white',
-        labelColor: colors.darkGray,
+        backgroundColor: colors.white,
+        labelColor: colors.darkGrey,
     };
     private buttonTimeoutId: number;
     private didUnmount: boolean;
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index 3166ae0e7..979b06d66 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,5 +1,5 @@
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 export interface RequiredLabelProps {
     label: string|React.ReactNode;
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index 0f65bf449..124e7018c 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
-import {colors} from 'ts/utils/colors';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 interface SwapIconProps {
     swapTokensFn: () => void;
-- 
cgit v1.2.3


From edfae324846359a9ba378de8d7d9c5c05b2c96cf Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 10:44:41 +0100
Subject: remove unused style

---
 packages/website/ts/components/top_bar.tsx | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 73bdfacca..bcb8efd07 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -41,11 +41,6 @@ const styles: Styles = {
         whiteSpace: 'nowrap',
         width: 70,
     },
-    addressPopover: {
-        backgroundColor: colors.blueGrey500,
-        color: colors.white,
-        padding: 3,
-    },
     topBar: {
         backgroundcolor: colors.white,
         height: 59,
-- 
cgit v1.2.3


From fb0b7efc4563c7c561866ab8691361ce6919160b Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 19:30:25 +0100
Subject: Refactor configs and constants, standardize on uppercase/snakecase,
 alphebetize, rename for logical grouping

---
 .../components/dialogs/blockchain_err_dialog.tsx   | 24 +++++++++++-----------
 .../ts/components/dialogs/ledger_config_dialog.tsx |  5 +++--
 .../dialogs/u2f_not_supported_dialog.tsx           |  2 +-
 .../ts/components/eth_weth_conversion_button.tsx   |  2 +-
 packages/website/ts/components/eth_wrappers.tsx    | 12 ++++++-----
 packages/website/ts/components/fill_order_json.tsx |  3 ++-
 packages/website/ts/components/footer.tsx          | 10 ++++-----
 .../ts/components/inputs/eth_amount_input.tsx      |  4 ++--
 packages/website/ts/components/order_json.tsx      |  5 ++---
 packages/website/ts/components/portal.tsx          |  6 +++---
 packages/website/ts/components/token_balances.tsx  | 18 ++++++++--------
 packages/website/ts/components/top_bar.tsx         |  6 +++---
 12 files changed, 50 insertions(+), 47 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index aea5fcdd1..9a5cd90d7 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -71,9 +71,9 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
         return (
             <div>
                 You were disconnected from the backing Ethereum node.
-                {' '}If using <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+                {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                     Metamask
-                </a> or <a href={constants.MIST_DOWNLOAD_URL} target="_blank">Mist</a> try refreshing
+                </a> or <a href={constants.URL_MIST_DOWNLOAD} target="_blank">Mist</a> try refreshing
                 {' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
             </div>
         );
@@ -97,7 +97,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                 <h4>1. Metamask chrome extension</h4>
                 <div>
                     You can install the{' '}
-                    <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+                    <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                         Metamask
                     </a> Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
                     <div className="pt1">
@@ -107,11 +107,11 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
-                    The <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer
+                    The <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
                     Chrome extension</a>{' '}lets you connect to a locally running Parity node.
                     Make sure you have started your local Parity node with{' '}
-                    {configs.isMainnetEnabled && '`parity ui` or'} `parity --chain kovan ui`{' '}
-                    in order to connect to {configs.isMainnetEnabled ? 'mainnet or Kovan respectively.' : 'Kovan.'}
+                    {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '}
+                    in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
                 </div>
                 <div className="pt2">
                     <span className="bold">Note:</span>
@@ -130,24 +130,24 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                     {' '}currently connected to (network Id: {this.props.networkId}).
                     {' '}In order to use the 0x portal dApp,
                     {' '}please connect to the
-                    {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.TESTNET_NETWORK_ID})
-                    {configs.isMainnetEnabled ?
-                        ` or ${constants.MAINNET_NAME} (network Id: ${constants.MAINNET_NETWORK_ID}).` :
+                    {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+                    {configs.IS_MAINNET_ENABLED ?
+                        ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` :
                         `.`
                     }
                 </div>
                 <h4>Metamask</h4>
                 <div>
                     If you are using{' '}
-                    <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+                    <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                         Metamask
                     </a>, you can switch networks in the top left corner of the extension popover.
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
-                    If using the <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer
+                    If using the <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
                     Chrome extension</a>, make sure to start your local Parity node with{' '}
-                    {configs.isMainnetEnabled ?
+                    {configs.IS_MAINNET_ENABLED ?
                         '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
                          or Kovan respectively.' :
                          '`parity --chain kovan ui` in order to connect to Kovan.'
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 05a15526f..ddd1f2cf2 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -17,6 +17,7 @@ import {Blockchain} from 'ts/blockchain';
 import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
@@ -52,7 +53,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             stepIndex: LedgerSteps.CONNECT,
             userAddresses: [],
             addressBalances: [],
-            derivationPath: constants.DEFAULT_DERIVATION_PATH,
+            derivationPath: configs.DEFAULT_DERIVATION_PATH,
             derivationErrMsg: '',
         };
     }
@@ -170,7 +171,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             const balance = this.state.addressBalances[i];
             const addressTooltipId = `address-${userAddress}`;
             const balanceTooltipId = `balance-${userAddress}`;
-            const networkName = constants.networkNameById[this.props.networkId];
+            const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
             // We specifically prefix kovan ETH.
             // TODO: We should probably add prefixes for all networks
             const isKovanNetwork = networkName === 'Kovan';
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index 83042624d..ff884a94e 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -39,7 +39,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
                         <li>
                             Firefox with{' '}
                             <a
-                                href={constants.FIREFOX_U2F_ADDON}
+                                href={constants.URL_FIREFOX_U2F_ADDON}
                                 target="_blank"
                                 style={{textDecoration: 'underline'}}
                             >
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index 5464f8df0..351dfd9a4 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -89,7 +89,7 @@ export class EthWethConversionButton extends
         try {
             if (direction === Side.Deposit) {
                 await this.props.blockchain.convertEthToWrappedEthTokensAsync(value);
-                const ethAmount = ZeroEx.toUnitAmount(value, constants.ETH_DECIMAL_PLACES);
+                const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
                 this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
                 balance = balance.plus(value);
             } else {
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index ef1379e59..59353d18c 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -82,7 +82,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         const tokens = _.values(this.props.tokenByAddress);
         const etherToken = _.find(tokens, {symbol: 'WETH'});
         const etherTokenState = this.props.tokenStateByAddress[etherToken.address];
-        const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, 18);
+        const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, constants.DECIMAL_PLACES_ETH);
         const isBidirectional = true;
         return (
             <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
@@ -155,7 +155,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                                         <div className="flex">
                                             <img
                                                 style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
-                                                src={constants.iconUrlBySymbol.WETH}
+                                                src={configs.ICON_URL_BY_SYMBOL.WETH}
                                             />
                                             <div className="mt2 ml2 sm-hide xs-hide">
                                                 Wrapped Ether
@@ -241,7 +241,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         );
     }
     private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) {
-        const rows = _.map(configs.outdatedWrappedEthers,
+        const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS,
                         (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => {
             const outdatedWETH = outdatedWETHByNetworkId[this.props.networkId];
             const timestampMsRange = outdatedWETH.timestampMsRange;
@@ -260,7 +260,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETH.address];
             const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETH.address];
             const balanceInEthIfExists = isStateLoaded ?
-                                         ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, 18).toFixed(PRECISION) :
+                                         ZeroEx.toUnitAmount(
+                                             outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH,
+                                         ).toFixed(PRECISION) :
                                          undefined;
             const onConversionSuccessful = this.onOutdatedConversionSuccessfulAsync.bind(this, outdatedWETH.address);
             return (
@@ -344,7 +346,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
         });
     }
     private getOutdatedWETHAddresses(): string[] {
-        const outdatedWETHAddresses = _.map(configs.outdatedWrappedEthers, outdatedWrappedEther => {
+        const outdatedWETHAddresses = _.map(configs.OUTDATED_WRAPPED_ETHERS, outdatedWrappedEther => {
             return outdatedWrappedEther[this.props.networkId].address;
         });
         return outdatedWETHAddresses;
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 393e46bee..4a4bdac9f 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -41,9 +41,10 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
             v: 27,
         };
         const hintSalt = ZeroEx.generatePseudoRandomSalt();
+        const feeRecipient = constants.NULL_ADDRESS;
         const hintOrder = utils.generateOrder(this.props.networkId, exchangeContract, hintSideToAssetToken,
                                               hintOrderExpiryTimestamp, '', '', constants.MAKER_FEE,
-                                              constants.TAKER_FEE, constants.FEE_RECIPIENT_ADDRESS,
+                                              constants.TAKER_FEE, feeRecipient,
                                               hintSignatureData, this.props.tokenByAddress, hintSalt);
         const hintOrderJSON = `${JSON.stringify(hintOrder, null, '\t').substring(0, 500)}...`;
         return (
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 82e046a59..0f65405d9 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -57,25 +57,25 @@ const menuItemsBySection: MenuItemsBySection = {
         {
             title: 'Rocket.chat',
             isExternal: true,
-            path: constants.ZEROEX_CHAT_URL,
+            path: constants.URL_ZEROEX_CHAT,
             fileName: 'rocketchat.png',
         },
         {
             title: 'Blog',
             isExternal: true,
-            path: constants.BLOG_URL,
+            path: constants.URL_BLOG,
             fileName: 'medium.png',
         },
         {
             title: 'Twitter',
             isExternal: true,
-            path: constants.TWITTER_URL,
+            path: constants.URL_TWITTER,
             fileName: 'twitter.png',
         },
         {
             title: 'Reddit',
             isExternal: true,
-            path: constants.REDDIT_URL,
+            path: constants.URL_REDDIT,
             fileName: 'reddit.png',
         },
     ],
@@ -88,7 +88,7 @@ const menuItemsBySection: MenuItemsBySection = {
         {
             title: 'Careers',
             isExternal: true,
-            path: constants.ANGELLIST_URL,
+            path: constants.URL_ANGELLIST,
         },
         {
             title: 'Contact',
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 5c5e23eef..3dcd2b4f3 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -22,7 +22,7 @@ interface EthAmountInputState {}
 export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
     public render() {
         const amount = this.props.amount ?
-            ZeroEx.toUnitAmount(this.props.amount, constants.ETH_DECIMAL_PLACES) :
+            ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) :
             undefined;
         return (
             <div className="flex overflow-hidden" style={{height: 63}}>
@@ -45,7 +45,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
     private onChange(isValid: boolean, amount?: BigNumber) {
         const baseUnitAmountIfExists = _.isUndefined(amount) ?
             undefined :
-            ZeroEx.toBaseUnitAmount(amount, constants.ETH_DECIMAL_PLACES);
+            ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
         this.props.onChange(isValid, baseUnitAmountIfExists);
     }
 }
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 83f25fd5a..c0f9b78e7 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -137,9 +137,8 @@ You can see and fill it here: ${this.state.shareLink}`);
     }
     private async generateShareLinkAsync(): Promise<string> {
         const longUrl = encodeURIComponent(this.getOrderUrl());
-        const bitlyRequestUrl = constants.BITLY_ENDPOINT + '/v3/shorten?' +
-                                     'access_token=' + constants.BITLY_ACCESS_TOKEN +
-                                     '&longUrl=' + longUrl;
+        const bitlyRequestUrl =
+            `${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`;
         const response = await fetch(bitlyRequestUrl);
         const responseBody = await response.text();
         const bodyObj = JSON.parse(responseBody);
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index c292e0a92..521dd2b5f 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -87,7 +87,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
     }
     public componentWillMount() {
         this.blockchain = new Blockchain(this.props.dispatcher);
-        const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY);
+        const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
         const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
                                       !_.isEmpty(didAcceptPortalDisclaimer);
         this.setState({
@@ -153,7 +153,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                 />
                 <div id="portal" className="mx-auto max-width-4 pt4" style={{width: '100%'}}>
                     <Paper className="mb3 mt2">
-                        {!configs.isMainnetEnabled && this.props.networkId === constants.MAINNET_NETWORK_ID  ?
+                        {!configs.IS_MAINNET_ENABLED && this.props.networkId === constants.NETWORK_ID_MAINNET  ?
                             <div className="p3 center">
                                 <div className="h2 py2">Mainnet unavailable</div>
                                 <div className="mx-auto pb2 pt2">
@@ -300,7 +300,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
         );
     }
     private onPortalDisclaimerAccepted() {
-        localStorage.setItem(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY, 'set');
+        localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
         this.setState({
             hasAcceptedDisclaimer: true,
         });
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 61aea6a88..ecaf63af9 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -115,7 +115,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (!_.isUndefined(this.state.currentZrxBalance) && !nextZrxTokenBalance.eq(this.state.currentZrxBalance)) {
             if (this.state.isZRXSpinnerVisible) {
                 const receivedAmount = nextZrxTokenBalance.minus(this.state.currentZrxBalance);
-                const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, 18);
+                const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, constants.DECIMAL_PLACES_ZRX);
                 this.props.dispatcher.showFlashMessage(`Received ${receiveAmountInUnits.toString(10)} Kovan ZRX`);
             }
             this.setState({
@@ -144,7 +144,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 onTouchTap={this.onDharmaDialogToggle.bind(this, false)}
             />,
         ];
-        const isTestNetwork = this.props.networkId === constants.TESTNET_NETWORK_ID;
+        const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
         const dharmaButtonColumnStyle = {
             paddingLeft: 3,
             display: isTestNetwork ? 'table-cell' : 'none',
@@ -380,8 +380,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         const tokenState = this.props.tokenStateByAddress[token.address];
         const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId,
                                                          EtherscanLinkSuffixes.Address);
-        const isMintable = _.includes(configs.symbolsOfMintableTokens, token.symbol) &&
-            this.props.networkId !== constants.MAINNET_NETWORK_ID;
+        const isMintable = _.includes(configs.SYMBOLS_OF_MINTABLE_TOKENS, token.symbol) &&
+            this.props.networkId !== constants.NETWORK_ID_MAINNET;
         return (
             <TableRow key={token.address} style={{height: TOKEN_TABLE_ROW_HEIGHT}}>
                 <TableRowColumn
@@ -423,7 +423,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                             onClickAsyncFn={this.onMintTestTokensAsync.bind(this, token)}
                         />
                     }
-                    {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.TESTNET_NETWORK_ID &&
+                    {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET &&
                         <LifeCycleRaisedButton
                             labelReady="Request"
                             labelLoading="Sending..."
@@ -456,7 +456,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             return;
         }
         const token = this.props.tokenByAddress[tokenAddress];
-        const isDefaultTrackedToken = _.includes(configs.defaultTrackedTokenSymbols, token.symbol);
+        const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
         if (!this.state.isAddingToken && !isDefaultTrackedToken) {
             if (token.isRegistered) {
                 // Remove the token from tracked tokens
@@ -507,7 +507,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 return (
                     <div>
                         Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME}
-                        {' '}testnet (networkId {constants.TESTNET_NETWORK_ID}). Please make sure you are
+                        {' '}testnet (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are
                         {' '}connected to the {constants.TESTNET_NAME} testnet and try requesting ether again.
                     </div>
                 );
@@ -604,7 +604,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
 
         // If on another network other then the testnet our faucet serves test ether
         // from, we must show user an error message
-        if (this.props.blockchain.networkId !== constants.TESTNET_NETWORK_ID) {
+        if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) {
             this.setState({
                 errorType: BalanceErrs.incorrectNetworkForFaucet,
             });
@@ -614,7 +614,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         await utils.sleepAsync(ARTIFICIAL_FAUCET_REQUEST_DELAY);
 
         const segment = isEtherRequest ? 'ether' : 'zrx';
-        const response = await fetch(`${constants.ETHER_FAUCET_ENDPOINT}/${segment}/${this.props.userAddress}`);
+        const response = await fetch(`${constants.URL_ETHER_FAUCET}/${segment}/${this.props.userAddress}`);
         const responseBody = await response.text();
         if (response.status !== constants.SUCCESS_STATUS) {
             utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index bcb8efd07..b731ee173 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -106,7 +106,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 key="subMenuItem-standard-relayer-api"
                 target="_blank"
                 className="text-decoration-none"
-                href={constants.STANDARD_RELAYER_API_GITHUB}
+                href={constants.URL_STANDARD_RELAYER_API_GITHUB}
             >
                 <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Standard Relayer API" />
             </a>,
@@ -114,7 +114,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 key="subMenuItem-github"
                 target="_blank"
                 className="text-decoration-none"
-                href={constants.GITHUB_URL}
+                href={constants.URL_GITHUB_ORG}
             >
                 <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="GitHub" />
             </a>,
@@ -254,7 +254,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <a
                     className="text-decoration-none"
                     target="_blank"
-                    href={constants.BLOG_URL}
+                    href={constants.URL_BLOG}
                 >
                     <MenuItem className="py2">Blog</MenuItem>
                 </a>
-- 
cgit v1.2.3


From b7004b30029f26e3a556676f5e713ba23cd5151d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 11:25:50 +0100
Subject: Refactor remaining _.assign to spread operator

---
 .../ts/components/dialogs/track_token_confirmation_dialog.tsx  |  4 +++-
 packages/website/ts/components/fill_order.tsx                  | 10 ++++++----
 packages/website/ts/components/generate_order/asset_picker.tsx |  4 +++-
 packages/website/ts/components/token_balances.tsx              |  5 +++--
 4 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 2d45009d5..f17893a83 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -73,7 +73,9 @@ export class TrackTokenConfirmationDialog extends
             isAddingTokenToTracked: true,
         });
         for (const token of this.props.tokens) {
-            const newTokenEntry = _.assign({}, token);
+            const newTokenEntry = {
+                ...token,
+            };
 
             newTokenEntry.isTracked = true;
             trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index c96dfe27a..044424fe0 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -380,22 +380,24 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
         const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
         if (isUnseenMakerToken) {
-            tokensToTrack.push(_.assign({}, this.state.parsedOrder.maker.token, {
+            tokensToTrack.push({
+                ...this.state.parsedOrder.maker.token,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
-            }));
+            });
         } else if (!isMakerTokenTracked) {
             tokensToTrack.push(makerTokenIfExists);
         }
         const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
         const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
         if (isUnseenTakerToken) {
-            tokensToTrack.push(_.assign({}, this.state.parsedOrder.taker.token, {
+            tokensToTrack.push({
+                ...this.state.parsedOrder.taker.token,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
-            }));
+            });
         } else if (!isTakerTokenTracked) {
             tokensToTrack.push(takerTokenIfExists);
         }
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 08b4a909e..51edd2308 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -244,7 +244,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         });
         const tokenAddress = this.state.chosenTrackTokenAddress;
         const token = this.props.tokenByAddress[tokenAddress];
-        const newTokenEntry = _.assign({}, token);
+        const newTokenEntry = {
+            ...token,
+        };
 
         newTokenEntry.isTracked = true;
         trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index ecaf63af9..ab4b04868 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -460,9 +460,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (!this.state.isAddingToken && !isDefaultTrackedToken) {
             if (token.isRegistered) {
                 // Remove the token from tracked tokens
-                const newToken = _.assign({}, token, {
+                const newToken = {
+                    ...token,
                     isTracked: false,
-                });
+                };
                 this.props.dispatcher.updateTokenByAddress([newToken]);
             } else {
                 this.props.dispatcher.removeTokenToTokenByAddress(token);
-- 
cgit v1.2.3


From 16179d2f8ec508388de8f057c9a79ff684c63fb0 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 12:37:51 +0100
Subject: Fix faulty import

---
 packages/website/ts/components/order_json.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index c0f9b78e7..340e5d91f 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {Paper} from 'material-ui/Paper';
+import Paper from 'material-ui/Paper';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {CopyIcon} from 'ts/components/ui/copy_icon';
-- 
cgit v1.2.3


From 66fe7b88b0892b5a5c7a06d66bec9035dd7782f0 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 12:38:41 +0100
Subject: Fix overflow issue on calculated fillAmount

---
 packages/website/ts/components/fill_order.tsx | 28 +++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 044424fe0..ac826fdf6 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -258,22 +258,20 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     </div>
                 </div>
                 {!isUserMaker &&
-                    <div className="clearfix mx-auto" style={{width: 315, height: 108}}>
-                       <div className="col col-7" style={{maxWidth: 235}}>
-                           <TokenAmountInput
-                               label="Fill amount"
-                               onChange={this.onFillAmountChange.bind(this)}
-                               shouldShowIncompleteErrs={false}
-                               token={fillToken}
-                               tokenState={fillTokenState}
-                               amount={fillAssetToken.amount}
-                               shouldCheckBalance={true}
-                               shouldCheckAllowance={true}
-                           />
-                       </div>
+                    <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
+                       <TokenAmountInput
+                           label="Fill amount"
+                           onChange={this.onFillAmountChange.bind(this)}
+                           shouldShowIncompleteErrs={false}
+                           token={fillToken}
+                           tokenState={fillTokenState}
+                           amount={fillAssetToken.amount}
+                           shouldCheckBalance={true}
+                           shouldCheckAllowance={true}
+                       />
                        <div
-                           className="col col-5 pl1"
-                           style={{color: colors.grey400, paddingTop: 39}}
+                           className="absolute sm-hide xs-hide"
+                           style={{color: colors.grey400, right: -247, top: 39, width: 242}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
-- 
cgit v1.2.3


From e38c7ff0760c766b92a7d19261a3a6f480adf567 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 12:42:16 +0100
Subject: Fix scrolling topBar on Portal

---
 packages/website/ts/components/portal.tsx  | 2 +-
 packages/website/ts/components/top_bar.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 521dd2b5f..2f6f9912a 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -151,7 +151,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                     blockchainIsLoaded={this.props.blockchainIsLoaded}
                     location={this.props.location}
                 />
-                <div id="portal" className="mx-auto max-width-4 pt4" style={{width: '100%'}}>
+                <div id="portal" className="mx-auto max-width-4" style={{width: '100%'}}>
                     <Paper className="mb3 mt2">
                         {!configs.IS_MAINNET_ENABLED && this.props.networkId === constants.NETWORK_ID_MAINNET  ?
                             <div className="p3 center">
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index b731ee173..025ed3635 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -45,7 +45,7 @@ const styles: Styles = {
         backgroundcolor: colors.white,
         height: 59,
         width: '100%',
-        position: 'fixed',
+        position: 'relative',
         top: 0,
         zIndex: 1100,
         paddingBottom: 1,
-- 
cgit v1.2.3