aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx2
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx2
-rw-r--r--packages/website/ts/components/fill_order.tsx4
-rw-r--r--packages/website/ts/components/footer.tsx4
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx2
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx6
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx2
-rw-r--r--packages/website/ts/components/top_bar.tsx8
-rw-r--r--packages/website/ts/components/top_bar_menu_item.tsx2
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx2
-rw-r--r--packages/website/ts/components/ui/input_label.tsx2
-rw-r--r--packages/website/ts/pages/about/about.tsx6
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx2
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx10
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx2
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx4
-rw-r--r--packages/website/ts/utils/colors.ts28
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',
};