From df9d3e3e16e5a00ea84369691c46a6e4a6a53049 Mon Sep 17 00:00:00 2001 From: Fabio Berger 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 +- packages/website/ts/index.tsx | 39 ++++++------ packages/website/ts/pages/about/about.tsx | 19 +++--- packages/website/ts/pages/about/profile.tsx | 3 +- .../ts/pages/documentation/documentation.tsx | 12 ++-- .../ts/pages/documentation/event_definition.tsx | 5 +- .../ts/pages/documentation/method_block.tsx | 2 +- .../website/ts/pages/documentation/source_link.tsx | 2 +- packages/website/ts/pages/documentation/type.tsx | 10 ++- .../ts/pages/documentation/type_definition.tsx | 9 ++- packages/website/ts/pages/faq/faq.tsx | 2 +- packages/website/ts/pages/faq/question.tsx | 3 +- packages/website/ts/pages/landing/landing.tsx | 54 ++++++++-------- .../ts/pages/shared/nested_sidebar_menu.tsx | 2 +- packages/website/ts/pages/wiki/wiki.tsx | 4 +- packages/website/ts/utils/colors.ts | 30 +++++++++ packages/website/ts/utils/constants.ts | 1 - 48 files changed, 169 insertions(+), 226 deletions(-) delete mode 100644 packages/website/ts/components/ui/labeled_switcher.tsx create mode 100644 packages/website/ts/utils/colors.ts 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)}
@@ -124,7 +124,7 @@ export class EthWethConversionDialog extends
{name}
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
About Wrapped ETH
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 {
Order details
-
+
Maker:
@@ -274,7 +273,7 @@ export class FillOrder extends React.Component {
= {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
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 { public render() { return ( -
+
-
+
© ZeroEx, Intl.
@@ -209,7 +209,7 @@ export class Footer extends React.Component { 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 {
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 { {this.renderPortalMenu()} {this.renderDocsMenu()} {this.renderWiki()} -
Website
+
Website
Home @@ -286,7 +284,7 @@ export class TopBar extends React.Component { const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return (
-
{sectionTitle}
+
{sectionTitle}
{ return (
-
0x Protocol Wiki
+
0x Protocol Wiki
{ return (
-
Portal DApp
+
Portal DApp
- + {this.props.subMenuItems}
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; - onRightLabelClickAsync: () => Promise; -} - -interface LabeledSwitcherState { - isLeftSelected: boolean; -} - -export class LabeledSwitcher extends React.Component { - constructor(props: LabeledSwitcherProps) { - super(props); - this.state = { - isLeftSelected: props.isLeftInitiallySelected, - }; - } - public render() { - const isLeft = true; - return ( -
- {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)} - {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)} -
- ); - } - 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 ( -
- {title} -
- ); - } - private async onLabelClickAsync(isLeft: boolean): Promise { - 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 = { 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 { className="mx-auto" style={{fontSize: 13, width: 127}} > - + 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 { } public render() { return ( -
+
{
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 {
Advisors:
@@ -206,13 +205,13 @@ export class About extends React.Component {
WE'RE HIRING
We are seeking outstanding candidates to{' '} {props.profileInfo.title.toUpperCase()}
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 indexed; + const indexed = indexed; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { const type = ( - type {customType.name} ={' '} + + type + {customType.name} ={' '} {customType.type.typeDocType !== TypeDocTypes.Reflection ? : { 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 { 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 { return (
{ 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 { }); 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 { return (
{
view the{' '} full list @@ -333,7 +329,7 @@ export class Landing extends React.Component { return (
{isSmallScreen && @@ -386,7 +382,7 @@ export class Landing extends React.Component { return (
@@ -397,7 +393,7 @@ export class Landing extends React.Component {
{
{ view all @@ -485,7 +481,7 @@ export class Landing extends React.Component { return (
{isSmallScreen && @@ -493,7 +489,7 @@ export class Landing extends React.Component { }
{ 0x.js @@ -525,7 +521,7 @@ export class Landing extends React.Component { smart contract @@ -605,7 +601,7 @@ export class Landing extends React.Component { 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 { return (
{ 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 { return (
{ return (
{ 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 { headerSize={HeaderSizes.H2} githubLink={githubLink} /> -
+
See a way to make this article better?{' '}