diff options
Diffstat (limited to 'packages/website/ts/pages')
| -rw-r--r-- | packages/website/ts/pages/about/about.tsx | 28 | ||||
| -rw-r--r-- | packages/website/ts/pages/about/profile.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/documentation.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/event_definition.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/method_block.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/source_link.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/type.tsx | 19 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/type_definition.tsx | 11 | ||||
| -rw-r--r-- | packages/website/ts/pages/faq/faq.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/pages/faq/question.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 119 | ||||
| -rw-r--r-- | packages/website/ts/pages/not_found.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/shared/nested_sidebar_menu.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 8 |
14 files changed, 116 insertions, 120 deletions
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 011bbb9d9..e9e876f45 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,18 +1,14 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; 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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; -const CUSTOM_BACKGROUND_COLOR = '#F0F0F0'; -const CUSTOM_GRAY = '#4C4C4C'; -const CUSTOM_LIGHT_GRAY = '#A2A2A2'; - const teamRow1: ProfileInfo[] = [ { name: 'Will Warren', @@ -145,6 +141,12 @@ const styles: Styles = { color: 'black', paddingTop: 110, }, + weAreHiring: { + fontSize: 30, + color: colors.darkestGrey, + fontFamily: 'Roboto Mono', + letterSpacing: 7.5, + }, }; export class About extends React.Component<AboutProps, AboutState> { @@ -153,12 +155,12 @@ export class About extends React.Component<AboutProps, AboutState> { } public render() { return ( - <div style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}> + <div style={{backgroundColor: colors.lightestGrey}}> <DocumentTitle title="0x About Us"/> <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}} + style={{backgroundColor: colors.lightestGrey}} /> <div id="about" @@ -176,7 +178,7 @@ export class About extends React.Component<AboutProps, AboutState> { </div> <div className="pt3" - style={{fontSize: 17, color: CUSTOM_GRAY, lineHeight: 1.5}} + style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}} > Our team is a diverse and globally distributed group with backgrounds in engineering, research, business and design. We are passionate about @@ -195,7 +197,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: CUSTOM_LIGHT_GRAY, fontSize: 24, fontFamily: 'Roboto Mono'}} + style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}} > Advisors: </div> @@ -206,17 +208,17 @@ export class About extends React.Component<AboutProps, AboutState> { <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}> <div className="pb2" - style={{fontSize: 30, color: CUSTOM_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}} + style={styles.weAreHiring} > WE'RE HIRING </div> <div className="pb4 mb4" - style={{fontSize: 16, color: CUSTOM_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}} + style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}} > We are seeking outstanding candidates to{' '} <a - href={constants.ANGELLIST_URL} + href={constants.URL_ANGELLIST} target="_blank" style={{color: 'black'}} > @@ -226,7 +228,7 @@ export class About extends React.Component<AboutProps, AboutState> { </div> </div> </div> - <Footer location={this.props.location} /> + <Footer /> </div> ); } diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index 86aa788b2..ef74f268a 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,6 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import {ProfileInfo, Styles} from 'ts/types'; +import {colors} from 'ts/utils/colors'; const IMAGE_DIMENSION = 149; const styles: Styles = { @@ -48,7 +49,7 @@ export function Profile(props: ProfileProps) { {!_.isUndefined(props.profileInfo.title) && <div className="pt1 center" - style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}} + 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 0ca8ae9d3..aab14a52c 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 'material-ui/styles'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { @@ -34,19 +33,18 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; +import {colors} from 'ts/utils/colors'; +import {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {docUtils} from 'ts/utils/doc_utils'; import {utils} from 'ts/utils/utils'; const SCROLL_TOP_ID = 'docsScrollTop'; -const CUSTOM_PURPLE = '#690596'; -const CUSTOM_RED = '#e91751'; -const CUSTOM_TURQUOIS = '#058789'; const networkNameToColor: {[network: string]: string} = { - [Networks.kovan]: CUSTOM_PURPLE, - [Networks.ropsten]: CUSTOM_RED, - [Networks.mainnet]: CUSTOM_TURQUOIS, + [Networks.kovan]: colors.purple, + [Networks.ropsten]: colors.red, + [Networks.mainnet]: colors.turquois, }; export interface DocumentationAllProps { @@ -273,7 +271,7 @@ export class Documentation extends ); } private renderNetworkBadgesIfExists(sectionName: string) { - const networkToAddressByContractName = constants.contractAddresses[this.props.docsVersion]; + const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion]; const badges = _.map(networkToAddressByContractName, (addressByContractName: AddressByContractName, networkName: string) => { const contractAddress = addressByContractName[sectionName]; @@ -281,14 +279,14 @@ export class Documentation extends return null; } const linkIfExists = utils.getEtherScanLinkIfExists( - contractAddress, constants.networkIdByName[networkName], EtherscanLinkSuffixes.address, + contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address, ); return ( <a 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/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 3c57666e7..695debf5b 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -4,8 +4,7 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info'; import {Type} from 'ts/pages/documentation/type'; import {AnchorTitle} from 'ts/pages/shared/anchor_title'; import {Event, EventArg, HeaderSizes} from 'ts/types'; - -const CUSTOM_GREEN = 'rgb(77, 162, 75)'; +import {colors} from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; @@ -50,7 +49,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event ); } private renderEventCode() { - const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>; + const indexed = <span style={{color: colors.green}}> indexed</span>; const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => { const type = ( <Type diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index 9505f2aa4..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 'material-ui/styles'; 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, @@ -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 9abf01706..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 'material-ui/styles'; import * as React from 'react'; import {Source} from 'ts/types'; +import {colors} from 'ts/utils/colors'; interface SourceLinkProps { source: Source; @@ -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/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 74b146d91..0516a5c68 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,24 +1,21 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; 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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; -const BUILT_IN_TYPE_COLOR = '#e69d00'; -const STRING_LITERAL_COLOR = '#4da24b'; - // Some types reference other libraries. For these types, we want to link the user to the relevant documentation. const typeToUrl: {[typeName: string]: string} = { - Web3: constants.WEB3_DOCS_URL, - Provider: constants.WEB3_PROVIDER_DOCS_URL, - BigNumber: constants.BIGNUMBERJS_GITHUB_URL, - DecodedLogEntryEvent: constants.WEB3_DECODED_LOG_ENTRY_EVENT_URL, - LogEntryEvent: constants.WEB3_LOG_ENTRY_EVENT_URL, + Web3: constants.URL_WEB3_DOCS, + Provider: constants.URL_WEB3_PROVIDER_DOCS, + BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + DecodedLogEntryEvent: constants.URL_WEB3_DECODED_LOG_ENTRY_EVENT, + LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT, }; const typePrefix: {[typeName: string]: string} = { @@ -56,7 +53,7 @@ export function Type(props: TypeProps): any { case TypeDocTypes.Intrinsic: case TypeDocTypes.Unknown: typeName = type.name; - typeNameColor = BUILT_IN_TYPE_COLOR; + typeNameColor = colors.orange; break; case TypeDocTypes.Reference: @@ -90,7 +87,7 @@ export function Type(props: TypeProps): any { case TypeDocTypes.StringLiteral: typeName = `'${type.value}'`; - typeNameColor = STRING_LITERAL_COLOR; + typeNameColor = colors.green; break; case TypeDocTypes.Array: diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index edcf7bf47..09413faaf 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -9,10 +9,9 @@ import {MethodSignature} from 'ts/pages/documentation/method_signature'; import {Type} from 'ts/pages/documentation/type'; import {AnchorTitle} from 'ts/pages/shared/anchor_title'; import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; -const KEYWORD_COLOR = '#a81ca6'; - interface TypeDefinitionProps { customType: CustomType; shouldAddId?: boolean; @@ -76,11 +75,15 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef ); break; - case KindString['Type alias']: + case KindString.TypeAlias: typePrefix = 'Type Alias'; codeSnippet = ( <span> - <span style={{color: KEYWORD_COLOR}}>type</span> {customType.name} ={' '} + <span + style={{color: colors.lightPurple}} + > + type + </span> {customType.name} ={' '} {customType.type.typeDocType !== TypeDocTypes.Reflection ? <Type type={customType.type} docsInfo={this.props.docsInfo} /> : <MethodSignature diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index b3fe21da7..296e63f1d 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 'material-ui/styles'; 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'; @@ -411,7 +411,7 @@ const sections: FAQSection[] = [ prompt: 'How can I get involved?', answer: ( <div> - Join our <a href={constants.ZEROEX_CHAT_URL} target="_blank">Rocket.chat</a>! + Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>! As an open source project, 0x will rely on a worldwide community of passionate developers to contribute proposals, ideas and code. </div> @@ -462,7 +462,7 @@ export class FAQ extends React.Component<FAQProps, FAQState> { {this.renderSections()} </div> </div> - <Footer location={this.props.location} /> + <Footer /> </div> ); } diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index 917863e4a..534304cc8 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,6 +1,7 @@ import * as _ from 'lodash'; import {Card, CardHeader, CardText} from 'material-ui/Card'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; export interface QuestionProps { prompt: string; @@ -31,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: 'rgb(66, 66, 66)'}} + 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 7992c7a6c..3d9ebe099 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,12 +1,12 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; -import {colors} from 'material-ui/styles'; 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 {colors} from 'ts/utils/colors'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; @@ -35,11 +35,6 @@ interface Project { } const THROTTLE_TIMEOUT = 100; -const CUSTOM_HERO_BACKGROUND_COLOR = '#404040'; -const CUSTOM_PROJECTS_BACKGROUND_COLOR = '#343333'; -const CUSTOM_WHITE_BACKGROUND = 'rgb(245, 245, 245)'; -const CUSTOM_WHITE_TEXT = '#E4E4E4'; -const CUSTOM_GRAY_TEXT = '#919191'; const boxContents: BoxContent[] = [ { @@ -70,67 +65,67 @@ const boxContents: BoxContent[] = [ const projects: Project[] = [ { logoFileName: 'ethfinex-top.png', - projectUrl: constants.ETHFINEX_URL, + projectUrl: constants.PROJECT_URL_ETHFINEX, }, { logoFileName: 'radar_relay_top.png', - projectUrl: constants.RADAR_RELAY_URL, + projectUrl: constants.PROJECT_URL_RADAR_RELAY, }, { logoFileName: 'paradex_top.png', - projectUrl: constants.PARADEX_URL, + projectUrl: constants.PROJECT_URL_PARADEX, }, { logoFileName: 'the_ocean.png', - projectUrl: constants.OCEAN_URL, + projectUrl: constants.PROJECT_URL_0CEAN, }, { logoFileName: 'dydx.png', - projectUrl: constants.DYDX_URL, + projectUrl: constants.PROJECT_URL_DYDX, }, { logoFileName: 'melonport.png', - projectUrl: constants.MELONPORT_URL, + projectUrl: constants.PROJECT_URL_MELONPORT, }, { logoFileName: 'maker.png', - projectUrl: constants.MAKER_URL, + projectUrl: constants.PROJECT_URL_MAKER, }, { logoFileName: 'dharma.png', - projectUrl: constants.DHARMA_URL, + projectUrl: constants.PROJECT_URL_DHARMA, }, { logoFileName: 'lendroid.png', - projectUrl: constants.LENDROID_URL, + projectUrl: constants.PROJECT_URL_LENDROID, }, { logoFileName: 'district0x.png', - projectUrl: constants.DISTRICT_0X_URL, + projectUrl: constants.PROJECT_URL_DISTRICT_0X, }, { logoFileName: 'aragon.png', - projectUrl: constants.ARAGON_URL, + projectUrl: constants.PROJECT_URL_ARAGON, }, { logoFileName: 'blocknet.png', - projectUrl: constants.BLOCKNET_URL, + projectUrl: constants.PROJECT_URL_BLOCKNET, }, { logoFileName: 'status.png', - projectUrl: constants.STATUS_URL, + projectUrl: constants.PROJECT_URL_STATUS, }, { logoFileName: 'augur.png', - projectUrl: constants.AUGUR_URL, + projectUrl: constants.PROJECT_URL_AUGUR, }, { logoFileName: 'anx.png', - projectUrl: constants.OPEN_ANX_URL, + projectUrl: constants.PROJECT_URL_OPEN_ANX, }, { logoFileName: 'auctus.png', - projectUrl: constants.AUCTUS_URL, + projectUrl: constants.PROJECT_URL_AUCTUS, }, ]; @@ -160,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: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}} + style={{backgroundColor: colors.heroGrey, position: 'relative'}} /> {this.renderHero()} {this.renderProjects()} @@ -176,12 +171,12 @@ export class Landing extends React.Component<LandingProps, LandingState> { {this.renderBuildingBlocksSection()} {this.renderUseCases()} {this.renderCallToAction()} - <Footer location={this.props.location} /> + <Footer /> </div> ); } private renderHero() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const buttonLabelStyle: React.CSSProperties = { textTransform: 'none', fontSize: isSmallScreen ? 12 : 14, @@ -197,7 +192,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto max-width-4 clearfix" @@ -211,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 @@ -241,7 +236,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="col col-6 sm-center"> <a - href={constants.ZEROEX_CHAT_URL} + href={constants.URL_ZEROEX_CHAT} target="_blank" className="text-decoration-none" > @@ -249,7 +244,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { style={{borderRadius: 6, minWidth: 150}} buttonStyle={lightButtonStyle} labelColor="white" - backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR} + backgroundColor={colors.heroGrey} labelStyle={buttonLabelStyle} label="Join the community" onClick={_.noop} @@ -265,8 +260,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderProjects() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; - const isMediumScreen = this.state.screenWidth === ScreenWidths.MD; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const isMediumScreen = this.state.screenWidth === ScreenWidths.Md; const projectList = _.map(projects, (project: Project, i: number) => { const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2)); return ( @@ -291,7 +286,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }); const titleStyle: React.CSSProperties = { fontFamily: 'Roboto Mono', - color: '#A4A4A4', + color: colors.grey, textTransform: 'uppercase', fontWeight: 300, letterSpacing: 3, @@ -299,7 +294,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}} + style={{backgroundColor: colors.projectsGrey}} > <div className="mx-auto max-width-4 clearfix sm-px3"> <div @@ -313,13 +308,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="pt3 mx-auto center" - style={{color: CUSTOM_GRAY_TEXT, 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: CUSTOM_GRAY_TEXT}} + style={{color: colors.landingLinkGrey}} > full list </Link> @@ -329,11 +324,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderTokenizationSection() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" - style={{backgroundColor: CUSTOM_WHITE_BACKGROUND}} + style={{backgroundColor: colors.grey100}} > <div className="mx-auto max-width-4 py4 clearfix"> {isSmallScreen && @@ -382,11 +377,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderProtocolSection() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="clearfix lg-py4 md-py4 sm-pt4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + 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"> @@ -397,7 +392,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{color: CUSTOM_WHITE_TEXT, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}} + style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}} > <div className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" @@ -420,7 +415,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> <div className="pt3 sm-mx-auto sm-px3" - style={{color: CUSTOM_GRAY_TEXT, maxWidth: isSmallScreen ? 412 : 'none'}} + style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}} > <div className="flex" style={{fontSize: 18}}> <div @@ -433,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: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono'}} + style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}} > view all </Link> @@ -468,7 +463,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderBuildingBlocksSection() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const descriptionStyle: React.CSSProperties = { fontFamily: 'Roboto Mono', lineHeight: isSmallScreen ? 1.5 : 2, @@ -485,7 +480,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix lg-pt4 md-pt4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> {isSmallScreen && @@ -493,7 +488,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { } <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - style={{color: CUSTOM_WHITE_TEXT}} + style={{color: colors.beigeWhite}} > <div className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center" @@ -517,7 +512,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none underline" - style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}} + style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} > 0x.js </Link> @@ -525,7 +520,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { <Link to={WebsitePaths.SmartContracts} className="text-decoration-none underline" - style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}} + style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} > smart contract </Link> @@ -540,7 +535,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderBlockChipImage() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 sm-center"> <img @@ -551,7 +546,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderTokenCloud() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 center"> <img @@ -562,7 +557,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderAssetTypes() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const assetTypes: AssetType[] = [ { title: 'Currency', @@ -601,11 +596,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { return assets; } private renderInfoBoxes() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const boxStyle: React.CSSProperties = { maxWidth: 252, height: 386, - backgroundColor: '#F9F9F9', + backgroundColor: colors.grey50, borderRadius: 5, padding: '10px 24px 24px', }; @@ -642,7 +637,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto py4 sm-mt2 clearfix" @@ -654,7 +649,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderUseCases() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const useCases: UseCase[] = [ { @@ -709,14 +704,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: '#A2A2A2', + color: colors.grey, border: '1px solid #565656', borderRadius: 4, maxWidth: isSmallScreen ? 375 : 'none', ...style, }; const typeStyle: React.CSSProperties = { - color: '#EBEBEB', + color: colors.lightGrey, fontSize: 13, textTransform: 'uppercase', fontFamily: 'Roboto Mono', @@ -753,7 +748,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGrey}} > <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" @@ -765,7 +760,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); } private renderCallToAction() { - const isSmallScreen = this.state.screenWidth === ScreenWidths.SM; + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const buttonLabelStyle: React.CSSProperties = { textTransform: 'none', fontSize: 15, @@ -782,14 +777,14 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix pb4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + 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> @@ -799,7 +794,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { style={{borderRadius: 6, minWidth: 150}} buttonStyle={lightButtonStyle} labelColor={colors.white} - backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR} + backgroundColor={colors.heroGrey} labelStyle={buttonLabelStyle} label="Build on 0x" onClick={_.noop} diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx index df505792d..bdf9ad688 100644 --- a/packages/website/ts/pages/not_found.tsx +++ b/packages/website/ts/pages/not_found.tsx @@ -38,7 +38,7 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> { </div> </div> </div> - <Footer location={this.props.location} /> + <Footer /> </div> ); } diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 15ec44399..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 'material-ui/styles'; 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'; @@ -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 2447a24a2..af5b26631 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 'material-ui/styles'; 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'; @@ -112,7 +112,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { > <div id="0xProtocolWiki" /> <h1 className="md-pl2 sm-pl3"> - <a href={constants.GITHUB_WIKI_URL} target="_blank"> + <a href={constants.URL_GITHUB_WIKI} target="_blank"> 0x Protocol Wiki </a> </h1> @@ -134,7 +134,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { private renderSection(sectionName: string) { const articles = this.state.articlesBySection[sectionName]; const renderedArticles = _.map(articles, (article: Article) => { - const githubLink = `${constants.GITHUB_WIKI_URL}/edit/master/${sectionName}/${article.fileName}`; + const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`; return ( <div key={`markdown-section-${article.title}`}> <MarkdownSection @@ -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: '#f9f5ef'}}> + <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}> See a way to make this article better?{' '} <a href={githubLink} |