diff options
Diffstat (limited to 'packages')
40 files changed, 91 insertions, 92 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 96533defc..44c23e4b0 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -6,7 +6,6 @@ import {EthAmountInput} from 'ts/components/inputs/eth_amount_input'; import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; import {Side, Token, TokenState} from 'ts/types'; import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; interface EthWethConversionDialogProps { direction: Side; diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx index e2bef63c7..83042624d 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,7 +1,7 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; interface U2fNotSupportedDialogProps { diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index 4f218286d..5464f8df0 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -7,7 +7,6 @@ import {Blockchain} from 'ts/blockchain'; import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog'; import {Dispatcher} from 'ts/redux/dispatcher'; import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types'; -import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {errorReporter} from 'ts/utils/error_reporter'; import {utils} from 'ts/utils/utils'; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index fb1205b62..ef1379e59 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -2,7 +2,6 @@ import {ZeroEx} from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; -import {colors} from 'ts/utils/colors'; import { Table, TableBody, @@ -24,6 +23,7 @@ import { TokenState, TokenStateByAddress, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index f91540c26..c96dfe27a 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -323,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { Order successfully filled. See the trade details in your{' '} <Link to={`${WebsitePaths.Portal}/trades`} - style={{color: 'white'}} + style={{color: colors.white}} > trade history </Link> diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index e6642d450..7370ee2d8 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -1,7 +1,7 @@ import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; interface FillWarningDialogProps { isOpen: boolean; diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx index fef7520f6..26619c54f 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx @@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import * as React from 'react'; import {Token} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; interface TokenSendCompletedProps { @@ -19,7 +20,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && ( <a - style={{color: 'white'}} + style={{color: colors.white}} href={`${this.props.etherScanLinkIfExists}`} target="_blank" > diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index cef3e2b1e..64f460e20 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; interface TransactionSubmittedProps { etherScanLinkIfExists?: string; @@ -16,7 +17,7 @@ export class TransactionSubmitted extends React.Component<TransactionSubmittedPr <div> Transaction submitted to the network:{' '} <a - style={{color: 'white'}} + style={{color: colors.white}} href={`${this.props.etherScanLinkIfExists}`} target="_blank" > diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 4b03c49e6..82e046a59 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -98,7 +98,7 @@ const menuItemsBySection: MenuItemsBySection = { ], }; const linkStyle = { - color: 'white', + color: colors.white, cursor: 'pointer', }; @@ -116,8 +116,8 @@ interface FooterState {} export class Footer extends React.Component<FooterProps, FooterState> { public render() { return ( - <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGray}}> - <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}> + <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGrey}}> + <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: colors.white}}> <div className="col lg-col-4 md-col-4 col-12 left"> <div className="sm-mx-auto" style={{width: 148}}> <div> diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 587fdc6f1..5479f0f83 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -3,7 +3,6 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import {Blockchain} from 'ts/blockchain'; import {ExpirationInput} from 'ts/components/inputs/expiration_input'; @@ -30,6 +29,7 @@ import { TokenByAddress, TokenStateByAddress, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {errorReporter} from 'ts/utils/error_reporter'; import {utils} from 'ts/utils/utils'; diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 604a54b18..6c3c01d0d 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -1,6 +1,5 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import TextField from 'material-ui/TextField'; import * as React from 'react'; import {Blockchain} from 'ts/blockchain'; @@ -9,6 +8,7 @@ import {Alert} from 'ts/components/ui/alert'; import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button'; import {RequiredLabel} from 'ts/components/ui/required_label'; import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types'; +import {colors} from 'ts/utils/colors'; interface NewTokenFormProps { blockchain: Blockchain; diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index d432a038e..a17b6e3f5 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,9 +1,9 @@ import {addressUtils} from '@0xproject/utils'; import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import TextField from 'material-ui/TextField'; import * as React from 'react'; import {RequiredLabel} from 'ts/components/ui/required_label'; +import {colors} from 'ts/utils/colors'; interface AddressInputProps { disabled?: boolean; diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 0b92a5856..61ab34f25 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -1,11 +1,11 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import TextField from 'material-ui/TextField'; import * as React from 'react'; import {Link} from 'react-router-dom'; import {RequiredLabel} from 'ts/components/ui/required_label'; import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; interface BalanceBoundedInputProps { @@ -133,7 +133,7 @@ export class BalanceBoundedInput extends const increaseBalanceText = 'Increase balance'; const linkStyle = { cursor: 'pointer', - color: colors.darkestGray, + color: colors.darkestGrey, textDecoration: 'underline', display: 'inline', }; diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index ddf0d3307..c9728dc5f 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,11 +1,11 @@ import {ZeroEx} from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import {Link} from 'react-router-dom'; import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input'; import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types'; +import {colors} from 'ts/utils/colors'; interface TokenAmountInputProps { token: Token; @@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok Insufficient allowance.{' '} <Link to={`${WebsitePaths.Portal}/balances`} - style={{cursor: 'pointer', color: colors.darkestGray}} + style={{cursor: 'pointer', color: colors.darkestGrey}} > Set allowance </Link> diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 806c8b21f..7008da12f 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,6 +1,5 @@ import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import {Blockchain} from 'ts/blockchain'; import {AssetPicker} from 'ts/components/generate_order/asset_picker'; @@ -8,6 +7,7 @@ import {InputLabel} from 'ts/components/ui/input_label'; import {TokenIcon} from 'ts/components/ui/token_icon'; import {Dispatcher} from 'ts/redux/dispatcher'; import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types'; +import {colors} from 'ts/utils/colors'; const TOKEN_ICON_DIMENSION = 80; diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index ea076205e..c292e0a92 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -1,7 +1,6 @@ import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import {Route, Switch} from 'react-router-dom'; @@ -32,6 +31,7 @@ import { TokenStateByAddress, WebsitePaths, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; @@ -138,6 +138,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { flexDirection: 'column', justifyContent: 'space-between', }; + const portalMenuContainerStyle: React.CSSProperties = { + overflow: 'hidden', + backgroundColor: colors.darkestGrey, + color: colors.white, + }; return ( <div style={portalStyle}> <DocumentTitle title="0x Portal DApp"/> @@ -171,9 +176,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { <div className="mx-auto flex"> <div className="col col-2 pr2 pt1 sm-hide xs-hide" - style={{overflow: 'hidden', backgroundColor: colors.darkestGray, color: 'white'}} + style={portalMenuContainerStyle} > - <PortalMenu menuItemStyle={{color: 'white'}} /> + <PortalMenu menuItemStyle={{color: colors.white}} /> </div> <div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12"> <div className="py2" style={{backgroundColor: colors.grey50}}> diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index a3c577a2e..61aea6a88 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -7,7 +7,6 @@ import Divider from 'material-ui/Divider'; import FlatButton from 'material-ui/FlatButton'; import FloatingActionButton from 'material-ui/FloatingActionButton'; import RaisedButton from 'material-ui/RaisedButton'; -import {colors} from 'ts/utils/colors'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentRemove from 'material-ui/svg-icons/content/remove'; import { @@ -42,6 +41,7 @@ import { TokenStateByAddress, TokenVisibility, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {errorReporter} from 'ts/utils/error_reporter'; @@ -334,7 +334,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <Dialog title="Request Dharma Loan" titleStyle={{fontWeight: 100, backgroundColor: colors.white}} - bodyStyle={{backgroundColor: colors.dharmaDarkGray}} + bodyStyle={{backgroundColor: colors.dharmaDarkGrey}} actionsContainerStyle={{backgroundColor: colors.white}} autoScrollBodyContent={true} actions={dharmaDialogActions} diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx index 179840ffc..73bdfacca 100644 --- a/packages/website/ts/components/top_bar.tsx +++ b/packages/website/ts/components/top_bar.tsx @@ -12,7 +12,6 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types'; import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; interface TopBarProps { @@ -44,11 +43,11 @@ const styles: Styles = { }, addressPopover: { backgroundColor: colors.blueGrey500, - color: 'white', + color: colors.white, padding: 3, }, topBar: { - backgroundColor: 'white', + backgroundcolor: colors.white, height: 59, width: '100%', position: 'fixed', @@ -61,7 +60,7 @@ const styles: Styles = { }, menuItem: { fontSize: 14, - color: colors.darkestGray, + color: colors.darkestGrey, paddingTop: 6, paddingBottom: 6, marginTop: 17, diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx index d912abe06..64cb48b2e 100644 --- a/packages/website/ts/components/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar_menu_item.tsx @@ -4,7 +4,7 @@ import {Link} from 'react-router-dom'; import {colors} from 'ts/utils/colors'; const DEFAULT_STYLE = { - color: colors.darkestGray, + color: colors.darkestGrey, }; interface TopBarMenuItemProps { @@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM } : {}; const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color; const linkColor = _.isUndefined(menuItemColor) ? - colors.darkestGray : + colors.darkestGrey : menuItemColor; return ( <div diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 2cda34c1a..ff840fe8c 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -1,8 +1,8 @@ import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import {Party} from 'ts/components/ui/party'; import {Token, TokenByAddress} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; interface TrackTokenConfirmationProps { diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index 27d5c1e03..d2a334df9 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -2,13 +2,13 @@ import {ZeroEx} from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; -import {colors} from 'ts/utils/colors'; import * as moment from 'moment'; import * as React from 'react'; import * as ReactTooltip from 'react-tooltip'; import {EtherScanIcon} from 'ts/components/ui/etherscan_icon'; import {Party} from 'ts/components/ui/party'; import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types'; +import {colors} from 'ts/utils/colors'; const PRECISION = 5; const IDENTICON_DIAMETER = 40; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index d3a0f47ee..3c50430df 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; import ReactTooltip = require('react-tooltip'); +import {colors} from 'ts/utils/colors'; interface CopyIconProps { data: string; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 2778fc085..111d5d478 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,8 +1,8 @@ import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import {EtherscanLinkSuffixes} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; interface EtherScanIconProps { diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 43f101d11..bfa1da280 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,5 +1,5 @@ -import {colors} from 'ts/utils/colors'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; export interface InputLabelProps { text: string | Element | React.ReactNode; diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 1856a6b50..08e8bc9ce 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -32,8 +32,8 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> { public static defaultProps: Partial<LifeCycleRaisedButtonProps> = { isDisabled: false, - backgroundColor: 'white', - labelColor: colors.darkGray, + backgroundColor: colors.white, + labelColor: colors.darkGrey, }; private buttonTimeoutId: number; private didUnmount: boolean; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index 3166ae0e7..979b06d66 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,5 +1,5 @@ -import {colors} from 'ts/utils/colors'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; export interface RequiredLabelProps { label: string|React.ReactNode; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index 0f65bf449..124e7018c 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; interface SwapIconProps { swapTokensFn: () => void; diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index ba08eef16..2f88ec8f4 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -2,7 +2,6 @@ import 'whatwg-fetch'; import {bigNumberConfigs} from '@0xproject/utils'; -import BigNumber from 'bignumber.js'; import {getMuiTheme, MuiThemeProvider} from 'material-ui/styles'; import * as React from 'react'; import {render} from 'react-dom'; @@ -21,7 +20,6 @@ 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(); bigNumberConfigs.configure(); @@ -49,16 +47,16 @@ const muiTheme = getMuiTheme({ color: colors.grey700, textColor: colors.white, calendarTextColor: colors.white, - selectColor: colors.darkestGray, + selectColor: colors.darkestGrey, selectTextColor: colors.white, }, timePicker: { color: colors.grey700, textColor: colors.white, accentColor: colors.white, - headerColor: colors.darkestGray, - selectColor: colors.darkestGray, - selectTextColor: colors.darkestGray, + headerColor: colors.darkestGrey, + selectColor: colors.darkestGrey, + selectTextColor: colors.darkestGrey, }, toggle: { thumbOnColor: colors.limeGreen, diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 60d8ac66d..8c512ee5c 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,16 +1,15 @@ import * as _ from 'lodash'; -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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; -const DARKEST_GRAY = colors.darkestGray; +const DARKEST_GRAY = colors.darkestGrey; const teamRow1: ProfileInfo[] = [ { @@ -152,12 +151,12 @@ export class About extends React.Component<AboutProps, AboutState> { } public render() { return ( - <div style={{backgroundColor: colors.lightGrey}}> + <div style={{backgroundColor: colors.lightestGrey}}> <DocumentTitle title="0x About Us"/> <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{backgroundColor: colors.lightGrey}} + style={{backgroundColor: colors.lightestGrey}} /> <div id="about" diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index cb87cc946..ef74f268a 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -49,7 +49,7 @@ export function Profile(props: ProfileProps) { {!_.isUndefined(props.profileInfo.title) && <div className="pt1 center" - style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGray}} + style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}} > {props.profileInfo.title.toUpperCase()} </div> diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 768c6710f..97e632452 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -1,7 +1,6 @@ import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { @@ -34,7 +33,7 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; -import {configs} from 'ts/utils/configs'; +import {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {docUtils} from 'ts/utils/doc_utils'; import {utils} from 'ts/utils/utils'; @@ -286,7 +285,7 @@ export class Documentation extends key={`badge-${networkName}-${sectionName}`} href={linkIfExists} target="_blank" - style={{color: 'white', textDecoration: 'none'}} + style={{color: colors.white, textDecoration: 'none'}} > <Badge title={networkName} diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index b19a97e2d..5163e03ac 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,5 +1,4 @@ import * as _ from 'lodash'; -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'; @@ -14,6 +13,7 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {typeDocUtils} from 'ts/utils/typedoc_utils'; interface MethodBlockProps { @@ -31,7 +31,7 @@ const styles: Styles = { chip: { fontSize: 13, backgroundColor: colors.lightBlueA700, - color: 'white', + color: colors.white, height: 11, borderRadius: 14, marginTop: 19, diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index dceb88b7b..1a3b58f81 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; -import {colors} from 'ts/utils/colors'; import * as React from 'react'; import {Source} from 'ts/types'; +import {colors} from 'ts/utils/colors'; interface SourceLinkProps { source: Source; diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 393ee3a51..37517afdc 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,12 +1,11 @@ import * as _ from 'lodash'; -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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 25fc9934c..8afb9e4e8 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,11 +1,11 @@ import * as _ from 'lodash'; -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 {Question} from 'ts/pages/faq/question'; import {FAQQuestion, FAQSection, Styles, WebsitePaths} 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/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index ed50f6948..534304cc8 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -32,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: colors.darkerGray}} + titleStyle={{color: colors.darkerGrey}} actAsExpander={true} showExpandableButton={true} /> diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 11d891e4f..87c8ca0b1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,13 +1,12 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; -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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; @@ -156,13 +155,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { } public render() { return ( - <div id="landing" className="clearfix" style={{color: colors.grey800}}> + <div id="landing" className="clearfix" style={{color: colors.grey500}}> <DocumentTitle title="0x Protocol"/> <TopBar blockchainIsLoaded={false} location={this.props.location} isNightVersion={true} - style={{backgroundColor: colors.heroGray, position: 'relative'}} + style={{backgroundColor: colors.heroGrey, position: 'relative'}} /> {this.renderHero()} {this.renderProjects()} @@ -193,7 +192,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto max-width-4 clearfix" @@ -207,7 +206,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className={left} - style={{color: 'white'}} + style={{color: colors.white}} > <div style={{paddingLeft: isSmallScreen ? 0 : 12}}> <div @@ -245,7 +244,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { style={{borderRadius: 6, minWidth: 150}} buttonStyle={lightButtonStyle} labelColor="white" - backgroundColor={colors.heroGray} + backgroundColor={colors.heroGrey} labelStyle={buttonLabelStyle} label="Join the community" onClick={_.noop} @@ -295,7 +294,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: colors.projectsGray}} + style={{backgroundColor: colors.projectsGrey}} > <div className="mx-auto max-width-4 clearfix sm-px3"> <div @@ -309,13 +308,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="pt3 mx-auto center" - style={{color: colors.landingLinkGray, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}} + style={{color: colors.landingLinkGrey, 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: colors.landingLinkGray}} + style={{color: colors.landingLinkGrey}} > full list </Link> @@ -382,7 +381,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix lg-py4 md-py4 sm-pt4" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <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"> @@ -416,7 +415,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="pt3 sm-mx-auto sm-px3" - style={{color: colors.landingLinkGray, maxWidth: isSmallScreen ? 412 : 'none'}} + style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}} > <div className="flex" style={{fontSize: 18}}> <div @@ -429,7 +428,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: colors.landingLinkGray, fontFamily: 'Roboto Mono'}} + style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}} > view all </Link> @@ -481,7 +480,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix lg-pt4 md-pt4" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> {isSmallScreen && @@ -601,7 +600,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const boxStyle: React.CSSProperties = { maxWidth: 252, height: 386, - backgroundColor: colors.lightGrey, + backgroundColor: colors.grey50, borderRadius: 5, padding: '10px 24px 24px', }; @@ -638,7 +637,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto py4 sm-mt2 clearfix" @@ -749,7 +748,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" @@ -778,14 +777,14 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix pb4" - style={{backgroundColor: colors.heroGray}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto max-width-4 pb4 mb3 clearfix" > <div className={callToActionClassNames} - style={{fontFamily: 'Roboto Mono', color: 'white', lineHeight: isSmallScreen ? 1.7 : 3}} + style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}} > Get started on building the decentralized future </div> @@ -795,7 +794,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { style={{borderRadius: 6, minWidth: 150}} buttonStyle={lightButtonStyle} labelColor={colors.white} - backgroundColor={colors.heroGray} + backgroundColor={colors.heroGrey} 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 b06c05a1a..fcbfaf1cf 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -1,10 +1,10 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; -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'; import {MenuSubsectionsBySection, Styles} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 78a97e04a..233df4f63 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -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: colors.lightGrey}}> + <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}> 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 index 886cfe64e..5523f581e 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -3,16 +3,17 @@ import {colors as materialUiColors} from 'material-ui/styles'; export const colors = { ...materialUiColors, beigeWhite: '#E4E4E4', - grayishPink: '#E6E5E5', + greyishPink: '#E6E5E5', + lightestGrey: '#F0F0F0', lightGrey: '#BBBBBB', - gray: '#A5A5A5', - darkGray: '#818181', - darkerGray: '#393939', - heroGray: '#404040', - projectsGray: '#343333', - landingLinkGray: '#919191', - darkestGray: '#272727', - dharmaDarkGray: '#252525', + grey: '#A5A5A5', + darkGrey: '#818181', + darkerGrey: '#393939', + heroGrey: '#404040', + projectsGrey: '#343333', + landingLinkGrey: '#919191', + darkestGrey: '#272727', + dharmaDarkGrey: '#252525', lightBlue: '#60A4F4', darkBlue: '#4D5481', lightPurple: '#A81CA6', |