crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize colors to always be in uppercase hex and consolidate material-ui greys

Browse Source
This commit is contained in:
Fabio Berger 2017-12-18 10:06:16 +01:00
parent df9d3e3e16
commit 445ff1e28e
21 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/components/dialogs/ledger_config_dialog.tsx
View File

@ -146,7 +146,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
<div className="overflow-hidden" style={{width: 180}}> <div className="overflow-hidden" style={{width: 180}}>
<TextField <TextField
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500}} floatingLabelStyle={{color: colors.grey}}
floatingLabelText="Update path derivation (advanced)" floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath} value={this.state.derivationPath}
errorText={this.state.derivationErrMsg} errorText={this.state.derivationErrMsg}

2
packages/website/ts/components/eth_wrappers.tsx
View File

@ -92,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<a <a
target="_blank" target="_blank"
href="https://weth.io/" href="https://weth.io/"
style={{color: colors.gray}} style={{color: colors.grey}}
> >
<div className="flex"> <div className="flex">
<div>About Wrapped ETH</div> <div>About Wrapped ETH</div>

4
packages/website/ts/components/fill_order.tsx
View File

@ -221,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
<div className="clearfix pb2" style={{width: '100%'}}> <div className="clearfix pb2" style={{width: '100%'}}>
<div className="inline left">Order details</div> <div className="inline left">Order details</div>
<div className="inline right" style={{minWidth: 208}}> <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: Maker:
</div> </div>
<div className="col col-2 pr1"> <div className="col col-2 pr1">
@ -273,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</div> </div>
<div <div
className="col col-5 pl1" className="col col-5 pl1"
style={{color: colors.lightGray, paddingTop: 39}} style={{color: colors.grey400, paddingTop: 39}}
> >
= {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol} = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
</div> </div>

4
packages/website/ts/components/footer.tsx
View File

@ -124,7 +124,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<img src="/images/protocol_logo_white.png" height="30" /> <img src="/images/protocol_logo_white.png" height="30" />
</div> </div>
<div <div
style={{fontSize: 11, color: colors.gray, paddingLeft: 37, paddingTop: 2}} style={{fontSize: 11, color: colors.grey, paddingLeft: 37, paddingTop: 2}}
> >
© ZeroEx, Intl. © ZeroEx, Intl.
</div> </div>
@ -209,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
private renderHeader(title: string) { private renderHeader(title: string) {
const headerStyle = { const headerStyle = {
textTransform: 'uppercase', textTransform: 'uppercase',
color: colors.lightGray, color: colors.grey400,
letterSpacing: 2, letterSpacing: 2,
fontFamily: 'Roboto Mono', fontFamily: 'Roboto Mono',
fontSize: 13, fontSize: 13,

2
packages/website/ts/components/generate_order/generate_order_form.tsx
View File

@ -154,7 +154,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
</div> </div>
<div className="pt1 sm-pb2 lg-px4 md-px4"> <div className="pt1 sm-pb2 lg-px4 md-px4">
<div className="lg-px3 md-px3"> <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 <ExpirationInput
orderExpiryTimestamp={this.props.orderExpiryTimestamp} orderExpiryTimestamp={this.props.orderExpiryTimestamp}
updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)} updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}

6
packages/website/ts/components/generate_order/new_token_form.tsx
View File

@ -49,7 +49,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div> <div>
<TextField <TextField
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500}} floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Name" />} floatingLabelText={<RequiredLabel label="Name" />}
value={this.state.name} value={this.state.name}
errorText={this.state.nameErrText} errorText={this.state.nameErrText}
@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div> <div>
<TextField <TextField
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500}} floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Symbol" />} floatingLabelText={<RequiredLabel label="Symbol" />}
value={this.state.symbol} value={this.state.symbol}
errorText={this.state.symbolErrText} errorText={this.state.symbolErrText}
@ -78,7 +78,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div> <div>
<TextField <TextField
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500}} floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Decimals" />} floatingLabelText={<RequiredLabel label="Decimals" />}
value={this.state.decimals} value={this.state.decimals}
errorText={this.state.decimalsErrText} errorText={this.state.decimalsErrText}

2
packages/website/ts/components/inputs/address_input.tsx
View File

@ -50,7 +50,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
fullWidth={true} fullWidth={true}
hintText={hintText} hintText={hintText}
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500, display: labelDisplay}} floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
floatingLabelText={label} floatingLabelText={label}
errorText={this.state.errMsg} errorText={this.state.errMsg}
value={this.state.address} value={this.state.address}

4
packages/website/ts/components/inputs/balance_bounded_input.tsx
View File

@ -83,7 +83,7 @@ export class BalanceBoundedInput extends
fullWidth={true} fullWidth={true}
floatingLabelText={label} floatingLabelText={label}
floatingLabelFixed={true} floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500, width: 206}} floatingLabelStyle={{color: colors.grey, width: 206}}
errorText={errorText} errorText={errorText}
value={this.state.amountString} value={this.state.amountString}
hintText={<span style={{textTransform: 'capitalize'}}>amount</span>} hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
@ -133,7 +133,7 @@ export class BalanceBoundedInput extends
const increaseBalanceText = 'Increase balance'; const increaseBalanceText = 'Increase balance';
const linkStyle = { const linkStyle = {
cursor: 'pointer', cursor: 'pointer',
color: colors.grey900, color: colors.darkestGray,
textDecoration: 'underline', textDecoration: 'underline',
display: 'inline', display: 'inline',
}; };

2
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '} Insufficient allowance.{' '}
<Link <Link
to={`${WebsitePaths.Portal}/balances`} to={`${WebsitePaths.Portal}/balances`}
style={{cursor: 'pointer', color: colors.grey900}} style={{cursor: 'pointer', color: colors.darkestGray}}
> >
Set allowance Set allowance
</Link> </Link>

2
packages/website/ts/components/inputs/token_input.tsx
View File

@ -62,7 +62,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
> >
<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} /> <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
</div> </div>
<div className="py1 center" style={{color: colors.grey500}}> <div className="py1 center" style={{color: colors.grey}}>
{token.name} {token.name}
</div> </div>
</Paper> </Paper>

8
packages/website/ts/components/top_bar.tsx
View File

@ -220,7 +220,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
{this.renderPortalMenu()} {this.renderPortalMenu()}
{this.renderDocsMenu()} {this.renderDocsMenu()}
{this.renderWiki()} {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"> <Link to={WebsitePaths.Home} className="text-decoration-none">
<MenuItem className="py2">Home</MenuItem> <MenuItem className="py2">Home</MenuItem>
</Link> </Link>
@ -284,7 +284,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const sectionTitle = `${this.props.docsInfo.displayName} Docs`; const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
return ( return (
<div className="lg-hide md-hide"> <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 <NestedSidebarMenu
topLevelMenu={this.props.menu} topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@ -304,7 +304,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return ( return (
<div className="lg-hide md-hide"> <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 <NestedSidebarMenu
topLevelMenu={this.props.menuSubsectionsBySection} topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@ -321,7 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return ( return (
<div className="lg-hide md-hide"> <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 <PortalMenu
menuItemStyle={{color: 'black'}} menuItemStyle={{color: 'black'}}
onClick={this.onMenuButtonClick.bind(this)} onClick={this.onMenuButtonClick.bind(this)}

2
packages/website/ts/components/top_bar_menu_item.tsx
View File

@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
public render() { public render() {
const primaryStyles = this.props.isPrimary ? { const primaryStyles = this.props.isPrimary ? {
borderRadius: 4, borderRadius: 4,
border: `1px solid ${this.props.isNightVersion ? colors.gray : colors.grayishPink}`, border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
marginTop: 15, marginTop: 15,
paddingLeft: 9, paddingLeft: 9,
paddingRight: 9, paddingRight: 9,

2
packages/website/ts/components/ui/drop_down_menu_item.tsx
View File

@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
onMouseEnter={this.onHover.bind(this)} onMouseEnter={this.onHover.bind(this)}
onMouseLeave={this.onHoverOff.bind(this)} onMouseLeave={this.onHoverOff.bind(this)}
> >
<Menu style={{color: colors.gray}}> <Menu style={{color: colors.grey}}>
{this.props.subMenuItems} {this.props.subMenuItems}
</Menu> </Menu>
</div> </div>

2
packages/website/ts/components/ui/input_label.tsx
View File

@ -7,7 +7,7 @@ export interface InputLabelProps {
const styles = { const styles = {
label: { label: {
color: colors.grey500, color: colors.grey,
fontSize: 12, fontSize: 12,
pointerEvents: 'none', pointerEvents: 'none',
textAlign: 'left', textAlign: 'left',

6
packages/website/ts/pages/about/about.tsx
View File

@ -152,12 +152,12 @@ export class About extends React.Component<AboutProps, AboutState> {
} }
public render() { public render() {
return ( return (
<div style={{backgroundColor: colors.lightestGray}}> <div style={{backgroundColor: colors.lightGrey}}>
<DocumentTitle title="0x About Us"/> <DocumentTitle title="0x About Us"/>
<TopBar <TopBar
blockchainIsLoaded={false} blockchainIsLoaded={false}
location={this.props.location} location={this.props.location}
style={{backgroundColor: colors.lightestGray}} style={{backgroundColor: colors.lightGrey}}
/> />
<div <div
id="about" id="about"
@ -194,7 +194,7 @@ export class About extends React.Component<AboutProps, AboutState> {
<div className="pt3 pb2"> <div className="pt3 pb2">
<div <div
className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3" 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: Advisors:
</div> </div>

2
packages/website/ts/pages/documentation/method_block.tsx
View File

@ -150,7 +150,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
<div className="bold"> <div className="bold">
{parameter.name} {parameter.name}
</div> </div>
<div className="pt1" style={{color: colors.grey500, fontSize: 14}}> <div className="pt1" style={{color: colors.grey, fontSize: 14}}>
{isOptional && 'optional'} {isOptional && 'optional'}
</div> </div>
</div> </div>

2
packages/website/ts/pages/documentation/source_link.tsx
View File

@ -29,7 +29,7 @@ export function SourceLink(props: SourceLinkProps) {
href={sourceCodeUrl} href={sourceCodeUrl}
target="_blank" target="_blank"
className="underline" className="underline"
style={{color: colors.grey500}} style={{color: colors.grey}}
> >
Source Source
</a> </a>

10
packages/website/ts/pages/landing/landing.tsx
View File

@ -287,7 +287,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}); });
const titleStyle: React.CSSProperties = { const titleStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono', fontFamily: 'Roboto Mono',
color: colors.gray, color: colors.grey,
textTransform: 'uppercase', textTransform: 'uppercase',
fontWeight: 300, fontWeight: 300,
letterSpacing: 3, letterSpacing: 3,
@ -329,7 +329,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return ( return (
<div <div
className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" 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"> <div className="mx-auto max-width-4 py4 clearfix">
{isSmallScreen && {isSmallScreen &&
@ -601,7 +601,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const boxStyle: React.CSSProperties = { const boxStyle: React.CSSProperties = {
maxWidth: 252, maxWidth: 252,
height: 386, height: 386,
backgroundColor: colors.lightestGray, backgroundColor: colors.lightGrey,
borderRadius: 5, borderRadius: 5,
padding: '10px 24px 24px', padding: '10px 24px 24px',
}; };
@ -705,14 +705,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const cases = _.map(useCases, (useCase: UseCase) => { const cases = _.map(useCases, (useCase: UseCase) => {
const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style; const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
const useCaseBoxStyle = { const useCaseBoxStyle = {
color: colors.gray, color: colors.grey,
border: '1px solid #565656', border: '1px solid #565656',
borderRadius: 4, borderRadius: 4,
maxWidth: isSmallScreen ? 375 : 'none', maxWidth: isSmallScreen ? 375 : 'none',
...style, ...style,
}; };
const typeStyle: React.CSSProperties = { const typeStyle: React.CSSProperties = {
color: colors.lightestGray, color: colors.lightGrey,
fontSize: 13, fontSize: 13,
textTransform: 'uppercase', textTransform: 'uppercase',
fontFamily: 'Roboto Mono', fontFamily: 'Roboto Mono',

2
packages/website/ts/pages/shared/nested_sidebar_menu.tsx
View File

@ -55,7 +55,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
containerId={constants.DOCS_CONTAINER_ID} containerId={constants.DOCS_CONTAINER_ID}
> >
<div <div
style={{color: colors.grey500, cursor: 'pointer'}} style={{color: colors.grey, cursor: 'pointer'}}
className="pb1" className="pb1"
> >
{finalSectionName.toUpperCase()} {finalSectionName.toUpperCase()}

4
packages/website/ts/pages/wiki/wiki.tsx
View File

@ -1,6 +1,5 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress'; import CircularProgress from 'material-ui/CircularProgress';
import {colors} from 'ts/utils/colors';
import * as React from 'react'; import * as React from 'react';
import DocumentTitle = require('react-document-title'); import DocumentTitle = require('react-document-title');
import { import {
@ -11,6 +10,7 @@ import {MarkdownSection} from 'ts/pages/shared/markdown_section';
import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu'; import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
import {SectionHeader} from 'ts/pages/shared/section_header'; import {SectionHeader} from 'ts/pages/shared/section_header';
import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types'; import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types';
import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs'; import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants'; import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils'; import {utils} from 'ts/utils/utils';
@ -143,7 +143,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
headerSize={HeaderSizes.H2} headerSize={HeaderSizes.H2}
githubLink={githubLink} 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?{' '} See a way to make this article better?{' '}
<a <a
href={githubLink} href={githubLink}

28
packages/website/ts/utils/colors.ts
View File

@ -2,29 +2,27 @@ import {colors as materialUiColors} from 'material-ui/styles';
export const colors = { export const colors = {
...materialUiColors, ...materialUiColors,
offWhite: 'rgb(245, 245, 245)',
beigeWhite: '#E4E4E4', beigeWhite: '#E4E4E4',
grayishPink: 'rgb(230, 229, 229)', grayishPink: '#E6E5E5',
lightestGray: '#F0F0F0', lightGrey: '#BBBBBB',
lightGray: '#BBBBBB',
gray: '#A5A5A5', gray: '#A5A5A5',
darkGray: '#818181', darkGray: '#818181',
darkerGray: '#393939', darkerGray: '#393939',
heroGray: '#404040', heroGray: '#404040',
projectsGray: '#343333', projectsGray: '#343333',
landingLinkGray: '#919191', landingLinkGray: '#919191',
darkestGray: 'rgb(39, 39, 39)', darkestGray: '#272727',
dharmaDarkGray: 'rgb(37, 37, 37)', dharmaDarkGray: '#252525',
lightBlue: '#60a4f4', lightBlue: '#60A4F4',
darkBlue: '#4D5481', darkBlue: '#4D5481',
lightPurple: '#a81ca6', lightPurple: '#A81CA6',
purple: '#690596', purple: '#690596',
red: '#e91751', red: '#E91751',
turquois: '#058789', turquois: '#058789',
orange: '#e69d00', orange: '#E69D00',
lightestGreen: 'rgb(137, 199, 116)', lightestGreen: '#89C774',
lightGreen: 'rgb(77, 197, 92)', lightGreen: '#4DC55C',
limeGreen: 'rgb(102, 222, 117)', limeGreen: '#66DE75',
green: '#4da24b', green: '#4DA24B',
brightGreen: 'rgb(0, 195, 62)', brightGreen: '#00C33E',
}; };