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}}>
<TextField
floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey500}}
floatingLabelStyle={{color: colors.grey}}
floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath}
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
target="_blank"
href="https://weth.io/"
style={{color: colors.gray}}
style={{color: colors.grey}}
>
<div className="flex">
<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="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>

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" />
</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,

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 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)}

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>
<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}

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}
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}

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

@ -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',
};

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.{' '}
<Link
to={`${WebsitePaths.Portal}/balances`}
style={{cursor: 'pointer', color: colors.grey900}}
style={{cursor: 'pointer', color: colors.darkestGray}}
>
Set allowance
</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} />
</div>
<div className="py1 center" style={{color: colors.grey500}}>
<div className="py1 center" style={{color: colors.grey}}>
{token.name}
</div>
</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.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)}

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() {
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,

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)}
onMouseLeave={this.onHoverOff.bind(this)}
>
<Menu style={{color: colors.gray}}>
<Menu style={{color: colors.grey}}>
{this.props.subMenuItems}
</Menu>
</div>

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

@ -7,7 +7,7 @@ export interface InputLabelProps {
const styles = {
label: {
color: colors.grey500,
color: colors.grey,
fontSize: 12,
pointerEvents: 'none',
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() {
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>

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">
{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>

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

@ -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>

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 = {
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',

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}
>
<div
style={{color: colors.grey500, cursor: 'pointer'}}
style={{color: colors.grey, cursor: 'pointer'}}
className="pb1"
>
{finalSectionName.toUpperCase()}

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

@ -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}

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

@ -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',
};