diff options
Diffstat (limited to 'packages/website/ts')
21 files changed, 48 insertions, 50 deletions
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index e2a8b932a..05a15526f 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -146,7 +146,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, <div className="overflow-hidden" style={{width: 180}}> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500}} + floatingLabelStyle={{color: colors.grey}} floatingLabelText="Update path derivation (advanced)" value={this.state.derivationPath} errorText={this.state.derivationErrMsg} diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index e32311e9e..fb1205b62 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -92,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <a target="_blank" href="https://weth.io/" - style={{color: colors.gray}} + style={{color: colors.grey}} > <div className="flex"> <div>About Wrapped ETH</div> diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index f7473b79e..f91540c26 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -221,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { <div className="clearfix pb2" style={{width: '100%'}}> <div className="inline left">Order details</div> <div className="inline right" style={{minWidth: 208}}> - <div className="col col-4 pl2" style={{color: colors.gray}}> + <div className="col col-4 pl2" style={{color: colors.grey}}> Maker: </div> <div className="col col-2 pr1"> @@ -273,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { </div> <div className="col col-5 pl1" - style={{color: colors.lightGray, paddingTop: 39}} + style={{color: colors.grey400, paddingTop: 39}} > = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol} </div> diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 67e966033..4b03c49e6 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -124,7 +124,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { <img src="/images/protocol_logo_white.png" height="30" /> </div> <div - style={{fontSize: 11, color: colors.gray, paddingLeft: 37, paddingTop: 2}} + style={{fontSize: 11, color: colors.grey, paddingLeft: 37, paddingTop: 2}} > © ZeroEx, Intl. </div> @@ -209,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { private renderHeader(title: string) { const headerStyle = { textTransform: 'uppercase', - color: colors.lightGray, + color: colors.grey400, letterSpacing: 2, fontFamily: 'Roboto Mono', fontSize: 13, diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 7f4c25718..587fdc6f1 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -154,7 +154,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G </div> <div className="pt1 sm-pb2 lg-px4 md-px4"> <div className="lg-px3 md-px3"> - <div style={{fontSize: 12, color: colors.grey500}}>Expiration</div> + <div style={{fontSize: 12, color: colors.grey}}>Expiration</div> <ExpirationInput orderExpiryTimestamp={this.props.orderExpiryTimestamp} updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)} diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 8b04919e0..604a54b18 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -49,7 +49,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor <div> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500}} + floatingLabelStyle={{color: colors.grey}} floatingLabelText={<RequiredLabel label="Name" />} value={this.state.name} errorText={this.state.nameErrText} @@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor <div> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500}} + floatingLabelStyle={{color: colors.grey}} floatingLabelText={<RequiredLabel label="Symbol" />} value={this.state.symbol} errorText={this.state.symbolErrText} @@ -78,7 +78,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor <div> <TextField floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500}} + floatingLabelStyle={{color: colors.grey}} floatingLabelText={<RequiredLabel label="Decimals" />} value={this.state.decimals} errorText={this.state.decimalsErrText} diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index f5ebb4112..d432a038e 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -50,7 +50,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu fullWidth={true} hintText={hintText} floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500, display: labelDisplay}} + floatingLabelStyle={{color: colors.grey, display: labelDisplay}} floatingLabelText={label} errorText={this.state.errMsg} value={this.state.address} diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index d02778392..0b92a5856 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -83,7 +83,7 @@ export class BalanceBoundedInput extends fullWidth={true} floatingLabelText={label} floatingLabelFixed={true} - floatingLabelStyle={{color: colors.grey500, width: 206}} + floatingLabelStyle={{color: colors.grey, width: 206}} errorText={errorText} value={this.state.amountString} hintText={<span style={{textTransform: 'capitalize'}}>amount</span>} @@ -133,7 +133,7 @@ export class BalanceBoundedInput extends const increaseBalanceText = 'Increase balance'; const linkStyle = { cursor: 'pointer', - color: colors.grey900, + color: colors.darkestGray, textDecoration: 'underline', display: 'inline', }; diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 363904e4d..ddf0d3307 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok Insufficient allowance.{' '} <Link to={`${WebsitePaths.Portal}/balances`} - style={{cursor: 'pointer', color: colors.grey900}} + style={{cursor: 'pointer', color: colors.darkestGray}} > Set allowance </Link> diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index e406ca27b..806c8b21f 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -62,7 +62,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState > <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} /> </div> - <div className="py1 center" style={{color: colors.grey500}}> + <div className="py1 center" style={{color: colors.grey}}> {token.name} </div> </Paper> diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx index 82ce0dee2..179840ffc 100644 --- a/packages/website/ts/components/top_bar.tsx +++ b/packages/website/ts/components/top_bar.tsx @@ -220,7 +220,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { {this.renderPortalMenu()} {this.renderDocsMenu()} {this.renderWiki()} - <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightestGray}}>Website</div> + <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div> <Link to={WebsitePaths.Home} className="text-decoration-none"> <MenuItem className="py2">Home</MenuItem> </Link> @@ -284,7 +284,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>{sectionTitle}</div> + <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>{sectionTitle}</div> <NestedSidebarMenu topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} @@ -304,7 +304,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>0x Protocol Wiki</div> + <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>0x Protocol Wiki</div> <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} @@ -321,7 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>Portal DApp</div> + <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div> <PortalMenu menuItemStyle={{color: 'black'}} onClick={this.onMenuButtonClick.bind(this)} diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx index 83e4cbc35..d912abe06 100644 --- a/packages/website/ts/components/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar_menu_item.tsx @@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM public render() { const primaryStyles = this.props.isPrimary ? { borderRadius: 4, - border: `1px solid ${this.props.isNightVersion ? colors.gray : colors.grayishPink}`, + border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`, marginTop: 15, paddingLeft: 9, paddingRight: 9, diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx index 39a667d74..55347cb98 100644 --- a/packages/website/ts/components/ui/drop_down_menu_item.tsx +++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx @@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro onMouseEnter={this.onHover.bind(this)} onMouseLeave={this.onHoverOff.bind(this)} > - <Menu style={{color: colors.gray}}> + <Menu style={{color: colors.grey}}> {this.props.subMenuItems} </Menu> </div> diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 1f26f5fd2..43f101d11 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -7,7 +7,7 @@ export interface InputLabelProps { const styles = { label: { - color: colors.grey500, + color: colors.grey, fontSize: 12, pointerEvents: 'none', textAlign: 'left', diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index e0780c220..60d8ac66d 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -152,12 +152,12 @@ export class About extends React.Component<AboutProps, AboutState> { } public render() { return ( - <div style={{backgroundColor: colors.lightestGray}}> + <div style={{backgroundColor: colors.lightGrey}}> <DocumentTitle title="0x About Us"/> <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{backgroundColor: colors.lightestGray}} + style={{backgroundColor: colors.lightGrey}} /> <div id="about" @@ -194,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: colors.gray, fontSize: 24, fontFamily: 'Roboto Mono'}} + style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}} > Advisors: </div> diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index df580fcd0..b19a97e2d 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -150,7 +150,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt <div className="bold"> {parameter.name} </div> - <div className="pt1" style={{color: colors.grey500, fontSize: 14}}> + <div className="pt1" style={{color: colors.grey, fontSize: 14}}> {isOptional && 'optional'} </div> </div> diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 9fe919c4e..dceb88b7b 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -29,7 +29,7 @@ export function SourceLink(props: SourceLinkProps) { href={sourceCodeUrl} target="_blank" className="underline" - style={{color: colors.grey500}} + style={{color: colors.grey}} > Source </a> diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 56d021b8d..11d891e4f 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -287,7 +287,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }); const titleStyle: React.CSSProperties = { fontFamily: 'Roboto Mono', - color: colors.gray, + color: colors.grey, textTransform: 'uppercase', fontWeight: 300, letterSpacing: 3, @@ -329,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: colors.offWhite}} + style={{backgroundColor: colors.grey100}} > <div className="mx-auto max-width-4 py4 clearfix"> {isSmallScreen && @@ -601,7 +601,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const boxStyle: React.CSSProperties = { maxWidth: 252, height: 386, - backgroundColor: colors.lightestGray, + backgroundColor: colors.lightGrey, borderRadius: 5, padding: '10px 24px 24px', }; @@ -705,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: colors.gray, + color: colors.grey, border: '1px solid #565656', borderRadius: 4, maxWidth: isSmallScreen ? 375 : 'none', ...style, }; const typeStyle: React.CSSProperties = { - color: colors.lightestGray, + color: colors.lightGrey, fontSize: 13, textTransform: 'uppercase', fontFamily: 'Roboto Mono', diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 7a8c9abbd..b06c05a1a 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -55,7 +55,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N containerId={constants.DOCS_CONTAINER_ID} > <div - style={{color: colors.grey500, cursor: 'pointer'}} + style={{color: colors.grey, cursor: 'pointer'}} className="pb1" > {finalSectionName.toUpperCase()} diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 68383ac36..78a97e04a 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,6 +1,5 @@ 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 { @@ -11,6 +10,7 @@ import {MarkdownSection} from 'ts/pages/shared/markdown_section'; import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; import {SectionHeader} from 'ts/pages/shared/section_header'; import {Article, ArticlesBySection, HeaderSizes, Styles, 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'; @@ -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.lightestGray}}> + <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightGrey}}> 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 c6a8547d1..886cfe64e 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -2,29 +2,27 @@ 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', + grayishPink: '#E6E5E5', + lightGrey: '#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', + darkestGray: '#272727', + dharmaDarkGray: '#252525', + lightBlue: '#60A4F4', darkBlue: '#4D5481', - lightPurple: '#a81ca6', + lightPurple: '#A81CA6', purple: '#690596', - red: '#e91751', + 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)', + orange: '#E69D00', + lightestGreen: '#89C774', + lightGreen: '#4DC55C', + limeGreen: '#66DE75', + green: '#4DA24B', + brightGreen: '#00C33E', }; |