diff options
Diffstat (limited to 'packages')
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', |