aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-18 16:15:12 +0800
committerFabio Berger <me@fabioberger.com>2017-12-18 16:15:12 +0800
commitdf9d3e3e16e5a00ea84369691c46a6e4a6a53049 (patch)
tree18dbcd29fa9f5dd41dc4c4072aaafe9e2026e5d6 /packages/website
parent98c01c2f8097c849c53d87a4946edfd4fba94495 (diff)
downloaddexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.gz
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.bz2
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.lz
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.xz
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.zst
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.zip
Consolidate all custom colors and material-ui colors into a colors module
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx8
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx2
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx1
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx5
-rw-r--r--packages/website/ts/components/fill_order.tsx7
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx2
-rw-r--r--packages/website/ts/components/footer.tsx12
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx2
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx2
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx2
-rw-r--r--packages/website/ts/components/portal.tsx4
-rw-r--r--packages/website/ts/components/token_balances.tsx8
-rw-r--r--packages/website/ts/components/top_bar.tsx16
-rw-r--r--packages/website/ts/components/top_bar_menu_item.tsx8
-rw-r--r--packages/website/ts/components/track_token_confirmation.tsx2
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx2
-rw-r--r--packages/website/ts/components/ui/alert.tsx8
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx2
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx4
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx2
-rw-r--r--packages/website/ts/components/ui/input_label.tsx2
-rw-r--r--packages/website/ts/components/ui/labeled_switcher.tsx73
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx3
-rw-r--r--packages/website/ts/components/ui/party.tsx5
-rw-r--r--packages/website/ts/components/ui/required_label.tsx2
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx2
-rw-r--r--packages/website/ts/index.tsx39
-rw-r--r--packages/website/ts/pages/about/about.tsx19
-rw-r--r--packages/website/ts/pages/about/profile.tsx3
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx12
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx5
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx2
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx2
-rw-r--r--packages/website/ts/pages/documentation/type.tsx10
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx9
-rw-r--r--packages/website/ts/pages/faq/faq.tsx2
-rw-r--r--packages/website/ts/pages/faq/question.tsx3
-rw-r--r--packages/website/ts/pages/landing/landing.tsx54
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx2
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx4
-rw-r--r--packages/website/ts/utils/colors.ts30
-rw-r--r--packages/website/ts/utils/constants.ts1
48 files changed, 169 insertions, 226 deletions
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 {
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 69bb03dce..ba08eef16 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -3,7 +3,7 @@ import 'whatwg-fetch';
import {bigNumberConfigs} from '@0xproject/utils';
import BigNumber from 'bignumber.js';
-import {colors, getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
+import {getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
import * as React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
@@ -20,6 +20,7 @@ import {NotFound} from 'ts/pages/not_found';
import {Wiki} from 'ts/pages/wiki/wiki';
import {reducer, State} from 'ts/redux/reducer';
import {WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
injectTapEventPlugin();
@@ -29,43 +30,39 @@ bigNumberConfigs.configure();
tradeHistoryStorage.clearIfRequired();
trackedTokenStorage.clearIfRequired();
-const CUSTOM_GREY = 'rgb(39, 39, 39)';
-const CUSTOM_GREEN = 'rgb(102, 222, 117)';
-const CUSTOM_DARKER_GREEN = 'rgb(77, 197, 92)';
-
import 'basscss/css/basscss.css';
import 'less/all.less';
const muiTheme = getMuiTheme({
appBar: {
height: 45,
- color: 'white',
- textColor: 'black',
+ color: colors.white,
+ textColor: colors.black,
},
palette: {
- pickerHeaderColor: constants.CUSTOM_BLUE,
- primary1Color: constants.CUSTOM_BLUE,
- primary2Color: constants.CUSTOM_BLUE,
+ pickerHeaderColor: colors.lightBlue,
+ primary1Color: colors.lightBlue,
+ primary2Color: colors.lightBlue,
textColor: colors.grey700,
},
datePicker: {
color: colors.grey700,
- textColor: 'white',
- calendarTextColor: 'white',
- selectColor: CUSTOM_GREY,
- selectTextColor: 'white',
+ textColor: colors.white,
+ calendarTextColor: colors.white,
+ selectColor: colors.darkestGray,
+ selectTextColor: colors.white,
},
timePicker: {
color: colors.grey700,
- textColor: 'white',
- accentColor: 'white',
- headerColor: CUSTOM_GREY,
- selectColor: CUSTOM_GREY,
- selectTextColor: CUSTOM_GREY,
+ textColor: colors.white,
+ accentColor: colors.white,
+ headerColor: colors.darkestGray,
+ selectColor: colors.darkestGray,
+ selectTextColor: colors.darkestGray,
},
toggle: {
- thumbOnColor: CUSTOM_GREEN,
- trackOnColor: CUSTOM_DARKER_GREEN,
+ thumbOnColor: colors.limeGreen,
+ trackOnColor: colors.lightGreen,
},
});
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 6aeb4ae2d..e0780c220 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,17 +1,16 @@
import * as _ from 'lodash';
-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 {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {Profile} from 'ts/pages/about/profile';
import {ProfileInfo, Styles} from 'ts/types';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
-const CUSTOM_BACKGROUND_COLOR = '#F0F0F0';
-const CUSTOM_GRAY = '#4C4C4C';
-const CUSTOM_LIGHT_GRAY = '#A2A2A2';
+const DARKEST_GRAY = colors.darkestGray;
const teamRow1: ProfileInfo[] = [
{
@@ -153,12 +152,12 @@ export class About extends React.Component<AboutProps, AboutState> {
}
public render() {
return (
- <div style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}>
+ <div style={{backgroundColor: colors.lightestGray}}>
<DocumentTitle title="0x About Us"/>
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
- style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.lightestGray}}
/>
<div
id="about"
@@ -176,7 +175,7 @@ export class About extends React.Component<AboutProps, AboutState> {
</div>
<div
className="pt3"
- style={{fontSize: 17, color: CUSTOM_GRAY, lineHeight: 1.5}}
+ style={{fontSize: 17, color: DARKEST_GRAY, lineHeight: 1.5}}
>
Our team is a diverse and globally distributed group with backgrounds
in engineering, research, business and design. We are passionate about
@@ -195,7 +194,7 @@ export class About extends React.Component<AboutProps, AboutState> {
<div className="pt3 pb2">
<div
className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
- style={{color: CUSTOM_LIGHT_GRAY, fontSize: 24, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.gray, fontSize: 24, fontFamily: 'Roboto Mono'}}
>
Advisors:
</div>
@@ -206,13 +205,13 @@ export class About extends React.Component<AboutProps, AboutState> {
<div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
<div
className="pb2"
- style={{fontSize: 30, color: CUSTOM_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}}
+ style={{fontSize: 30, color: DARKEST_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}}
>
WE'RE HIRING
</div>
<div
className="pb4 mb4"
- style={{fontSize: 16, color: CUSTOM_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
+ style={{fontSize: 16, color: DARKEST_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
>
We are seeking outstanding candidates to{' '}
<a
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 86aa788b2..cb87cc946 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import {ProfileInfo, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
@@ -48,7 +49,7 @@ export function Profile(props: ProfileProps) {
{!_.isUndefined(props.profileInfo.title) &&
<div
className="pt1 center"
- style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}}
+ style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGray}}
>
{props.profileInfo.title.toUpperCase()}
</div>
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 687ba0fcc..768c6710f 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,7 @@
import findVersions = require('find-versions');
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {
@@ -34,19 +34,17 @@ import {
TypeDefinitionByName,
TypescriptMethod,
} from 'ts/types';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {docUtils} from 'ts/utils/doc_utils';
import {utils} from 'ts/utils/utils';
const SCROLL_TOP_ID = 'docsScrollTop';
-const CUSTOM_PURPLE = '#690596';
-const CUSTOM_RED = '#e91751';
-const CUSTOM_TURQUOIS = '#058789';
const networkNameToColor: {[network: string]: string} = {
- [Networks.kovan]: CUSTOM_PURPLE,
- [Networks.ropsten]: CUSTOM_RED,
- [Networks.mainnet]: CUSTOM_TURQUOIS,
+ [Networks.kovan]: colors.purple,
+ [Networks.ropsten]: colors.red,
+ [Networks.mainnet]: colors.turquois,
};
export interface DocumentationAllProps {
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 3c57666e7..695debf5b 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -4,8 +4,7 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info';
import {Type} from 'ts/pages/documentation/type';
import {AnchorTitle} from 'ts/pages/shared/anchor_title';
import {Event, EventArg, HeaderSizes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(77, 162, 75)';
+import {colors} from 'ts/utils/colors';
interface EventDefinitionProps {
event: Event;
@@ -50,7 +49,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
);
}
private renderEventCode() {
- const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>;
+ const indexed = <span style={{color: colors.green}}> indexed</span>;
const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
const type = (
<Type
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 9505f2aa4..df580fcd0 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.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 {Comment} from 'ts/pages/documentation/comment';
import {DocsInfo} from 'ts/pages/documentation/docs_info';
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 9abf01706..9fe919c4e 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.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 {Source} from 'ts/types';
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 74b146d91..393ee3a51 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,17 +1,15 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
import * as React from 'react';
import {Link as ScrollLink} from 'react-scroll';
import * as ReactTooltip from 'react-tooltip';
import {DocsInfo} from 'ts/pages/documentation/docs_info';
import {TypeDefinition} from 'ts/pages/documentation/type_definition';
import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
-const BUILT_IN_TYPE_COLOR = '#e69d00';
-const STRING_LITERAL_COLOR = '#4da24b';
-
// Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
const typeToUrl: {[typeName: string]: string} = {
Web3: constants.WEB3_DOCS_URL,
@@ -56,7 +54,7 @@ export function Type(props: TypeProps): any {
case TypeDocTypes.Intrinsic:
case TypeDocTypes.Unknown:
typeName = type.name;
- typeNameColor = BUILT_IN_TYPE_COLOR;
+ typeNameColor = colors.orange;
break;
case TypeDocTypes.Reference:
@@ -90,7 +88,7 @@ export function Type(props: TypeProps): any {
case TypeDocTypes.StringLiteral:
typeName = `'${type.value}'`;
- typeNameColor = STRING_LITERAL_COLOR;
+ typeNameColor = colors.green;
break;
case TypeDocTypes.Array:
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 4ad959631..09413faaf 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -9,10 +9,9 @@ import {MethodSignature} from 'ts/pages/documentation/method_signature';
import {Type} from 'ts/pages/documentation/type';
import {AnchorTitle} from 'ts/pages/shared/anchor_title';
import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {utils} from 'ts/utils/utils';
-const KEYWORD_COLOR = '#a81ca6';
-
interface TypeDefinitionProps {
customType: CustomType;
shouldAddId?: boolean;
@@ -80,7 +79,11 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
typePrefix = 'Type Alias';
codeSnippet = (
<span>
- <span style={{color: KEYWORD_COLOR}}>type</span> {customType.name} ={' '}
+ <span
+ style={{color: colors.lightPurple}}
+ >
+ type
+ </span> {customType.name} ={' '}
{customType.type.typeDocType !== TypeDocTypes.Reflection ?
<Type type={customType.type} docsInfo={this.props.docsInfo} /> :
<MethodSignature
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 630a48346..25fc9934c 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.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 DocumentTitle from 'react-document-title';
import {Footer} from 'ts/components/footer';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 917863e4a..ed50f6948 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import {Card, CardHeader, CardText} from 'material-ui/Card';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
export interface QuestionProps {
prompt: string;
@@ -31,7 +32,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
<CardHeader
title={this.props.prompt}
style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
- titleStyle={{color: 'rgb(66, 66, 66)'}}
+ titleStyle={{color: colors.darkerGray}}
actAsExpander={true}
showExpandableButton={true}
/>
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index cf373bbf8..56d021b8d 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,12 +1,13 @@
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {Link} from 'react-router-dom';
import {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {ScreenWidths, WebsitePaths} from 'ts/types';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
@@ -35,11 +36,6 @@ interface Project {
}
const THROTTLE_TIMEOUT = 100;
-const CUSTOM_HERO_BACKGROUND_COLOR = '#404040';
-const CUSTOM_PROJECTS_BACKGROUND_COLOR = '#343333';
-const CUSTOM_WHITE_BACKGROUND = 'rgb(245, 245, 245)';
-const CUSTOM_WHITE_TEXT = '#E4E4E4';
-const CUSTOM_GRAY_TEXT = '#919191';
const boxContents: BoxContent[] = [
{
@@ -166,7 +162,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
blockchainIsLoaded={false}
location={this.props.location}
isNightVersion={true}
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}}
+ style={{backgroundColor: colors.heroGray, position: 'relative'}}
/>
{this.renderHero()}
{this.renderProjects()}
@@ -197,7 +193,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix py4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div
className="mx-auto max-width-4 clearfix"
@@ -249,7 +245,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
style={{borderRadius: 6, minWidth: 150}}
buttonStyle={lightButtonStyle}
labelColor="white"
- backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+ backgroundColor={colors.heroGray}
labelStyle={buttonLabelStyle}
label="Join the community"
onClick={_.noop}
@@ -291,7 +287,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
});
const titleStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
- color: '#A4A4A4',
+ color: colors.gray,
textTransform: 'uppercase',
fontWeight: 300,
letterSpacing: 3,
@@ -299,7 +295,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix py4"
- style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.projectsGray}}
>
<div className="mx-auto max-width-4 clearfix sm-px3">
<div
@@ -313,13 +309,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="pt3 mx-auto center"
- style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+ style={{color: colors.landingLinkGray, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
>
view the{' '}
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: CUSTOM_GRAY_TEXT}}
+ style={{color: colors.landingLinkGray}}
>
full list
</Link>
@@ -333,7 +329,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
- style={{backgroundColor: CUSTOM_WHITE_BACKGROUND}}
+ style={{backgroundColor: colors.offWhite}}
>
<div className="mx-auto max-width-4 py4 clearfix">
{isSmallScreen &&
@@ -386,7 +382,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix lg-py4 md-py4 sm-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
<div className="col lg-col-6 md-col-6 col-12 sm-center">
@@ -397,7 +393,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
- style={{color: CUSTOM_WHITE_TEXT, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
+ style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
>
<div
className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
@@ -420,7 +416,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="pt3 sm-mx-auto sm-px3"
- style={{color: CUSTOM_GRAY_TEXT, maxWidth: isSmallScreen ? 412 : 'none'}}
+ style={{color: colors.landingLinkGray, maxWidth: isSmallScreen ? 412 : 'none'}}
>
<div className="flex" style={{fontSize: 18}}>
<div
@@ -433,7 +429,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.landingLinkGray, fontFamily: 'Roboto Mono'}}
>
view all
</Link>
@@ -485,7 +481,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix lg-pt4 md-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
{isSmallScreen &&
@@ -493,7 +489,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
- style={{color: CUSTOM_WHITE_TEXT}}
+ style={{color: colors.beigeWhite}}
>
<div
className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
@@ -517,7 +513,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={WebsitePaths.ZeroExJs}
className="text-decoration-none underline"
- style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
>
0x.js
</Link>
@@ -525,7 +521,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={WebsitePaths.SmartContracts}
className="text-decoration-none underline"
- style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
>
smart contract
</Link>
@@ -605,7 +601,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const boxStyle: React.CSSProperties = {
maxWidth: 252,
height: 386,
- backgroundColor: '#F9F9F9',
+ backgroundColor: colors.lightestGray,
borderRadius: 5,
padding: '10px 24px 24px',
};
@@ -642,7 +638,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div
className="mx-auto py4 sm-mt2 clearfix"
@@ -709,14 +705,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const cases = _.map(useCases, (useCase: UseCase) => {
const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
const useCaseBoxStyle = {
- color: '#A2A2A2',
+ color: colors.gray,
border: '1px solid #565656',
borderRadius: 4,
maxWidth: isSmallScreen ? 375 : 'none',
...style,
};
const typeStyle: React.CSSProperties = {
- color: '#EBEBEB',
+ color: colors.lightestGray,
fontSize: 13,
textTransform: 'uppercase',
fontFamily: 'Roboto Mono',
@@ -753,7 +749,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div
className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
@@ -782,7 +778,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix pb4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGray}}
>
<div
className="mx-auto max-width-4 pb4 mb3 clearfix"
@@ -799,7 +795,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
style={{borderRadius: 6, minWidth: 150}}
buttonStyle={lightButtonStyle}
labelColor={colors.white}
- backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+ backgroundColor={colors.heroGray}
labelStyle={buttonLabelStyle}
label="Build on 0x"
onClick={_.noop}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 15ec44399..7a8c9abbd 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
import * as React from 'react';
import {Link as ScrollLink} from 'react-scroll';
import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 2447a24a2..68383ac36 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {
@@ -143,7 +143,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
headerSize={HeaderSizes.H2}
githubLink={githubLink}
/>
- <div className="mb4 mt3 p3 center" style={{backgroundColor: '#f9f5ef'}}>
+ <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGray}}>
See a way to make this article better?{' '}
<a
href={githubLink}
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
new file mode 100644
index 000000000..c6a8547d1
--- /dev/null
+++ b/packages/website/ts/utils/colors.ts
@@ -0,0 +1,30 @@
+import {colors as materialUiColors} from 'material-ui/styles';
+
+export const colors = {
+ ...materialUiColors,
+ offWhite: 'rgb(245, 245, 245)',
+ beigeWhite: '#E4E4E4',
+ grayishPink: 'rgb(230, 229, 229)',
+ lightestGray: '#F0F0F0',
+ lightGray: '#BBBBBB',
+ gray: '#A5A5A5',
+ darkGray: '#818181',
+ darkerGray: '#393939',
+ heroGray: '#404040',
+ projectsGray: '#343333',
+ landingLinkGray: '#919191',
+ darkestGray: 'rgb(39, 39, 39)',
+ dharmaDarkGray: 'rgb(37, 37, 37)',
+ lightBlue: '#60a4f4',
+ darkBlue: '#4D5481',
+ lightPurple: '#a81ca6',
+ purple: '#690596',
+ red: '#e91751',
+ turquois: '#058789',
+ orange: '#e69d00',
+ lightestGreen: 'rgb(137, 199, 116)',
+ lightGreen: 'rgb(77, 197, 92)',
+ limeGreen: 'rgb(102, 222, 117)',
+ green: '#4da24b',
+ brightGreen: 'rgb(0, 195, 62)',
+};
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index fb81dd9a9..f001181ce 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -26,7 +26,6 @@ export const constants = {
BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
BITLY_ENDPOINT: 'https://api-ssl.bitly.com',
BLOG_URL: 'https://blog.0xproject.com/latest',
- CUSTOM_BLUE: '#60a4f4',
DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
ETHER_FAUCET_ENDPOINT: 'https://faucet.0xproject.com',
FEE_RECIPIENT_ADDRESS: '0x0000000000000000000000000000000000000000',