diff options
author | Fabio Berger <me@fabioberger.com> | 2017-12-18 16:15:12 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2017-12-18 16:15:12 +0800 |
commit | df9d3e3e16e5a00ea84369691c46a6e4a6a53049 (patch) | |
tree | 18dbcd29fa9f5dd41dc4c4072aaafe9e2026e5d6 /packages/website/ts/pages/landing/landing.tsx | |
parent | 98c01c2f8097c849c53d87a4946edfd4fba94495 (diff) | |
download | dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.gz dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.bz2 dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.lz dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.xz dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.zst dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.zip |
Consolidate all custom colors and material-ui colors into a colors module
Diffstat (limited to 'packages/website/ts/pages/landing/landing.tsx')
-rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 54 |
1 files changed, 25 insertions, 29 deletions
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index cf373bbf8..56d021b8d 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,12 +1,13 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; -import {colors} from 'material-ui/styles'; +import {colors} from 'ts/utils/colors'; 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 {configs} from 'ts/utils/configs'; import {constants} from 'ts/utils/constants'; import {utils} from 'ts/utils/utils'; @@ -35,11 +36,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[] = [ { @@ -166,7 +162,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { blockchainIsLoaded={false} location={this.props.location} isNightVersion={true} - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}} + style={{backgroundColor: colors.heroGray, position: 'relative'}} /> {this.renderHero()} {this.renderProjects()} @@ -197,7 +193,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGray}} > <div className="mx-auto max-width-4 clearfix" @@ -249,7 +245,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.heroGray} labelStyle={buttonLabelStyle} label="Join the community" onClick={_.noop} @@ -291,7 +287,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }); const titleStyle: React.CSSProperties = { fontFamily: 'Roboto Mono', - color: '#A4A4A4', + color: colors.gray, textTransform: 'uppercase', fontWeight: 300, letterSpacing: 3, @@ -299,7 +295,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix py4" - style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}} + style={{backgroundColor: colors.projectsGray}} > <div className="mx-auto max-width-4 clearfix sm-px3"> <div @@ -313,13 +309,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.landingLinkGray, 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.landingLinkGray}} > full list </Link> @@ -333,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: CUSTOM_WHITE_BACKGROUND}} + style={{backgroundColor: colors.offWhite}} > <div className="mx-auto max-width-4 py4 clearfix"> {isSmallScreen && @@ -386,7 +382,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix lg-py4 md-py4 sm-pt4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGray}} > <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 +393,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 +416,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.landingLinkGray, maxWidth: isSmallScreen ? 412 : 'none'}} > <div className="flex" style={{fontSize: 18}}> <div @@ -433,7 +429,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.landingLinkGray, fontFamily: 'Roboto Mono'}} > view all </Link> @@ -485,7 +481,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.heroGray}} > <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> {isSmallScreen && @@ -493,7 +489,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 +513,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 +521,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> @@ -605,7 +601,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const boxStyle: React.CSSProperties = { maxWidth: 252, height: 386, - backgroundColor: '#F9F9F9', + backgroundColor: colors.lightestGray, borderRadius: 5, padding: '10px 24px 24px', }; @@ -642,7 +638,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGray}} > <div className="mx-auto py4 sm-mt2 clearfix" @@ -709,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: '#A2A2A2', + color: colors.gray, border: '1px solid #565656', borderRadius: 4, maxWidth: isSmallScreen ? 375 : 'none', ...style, }; const typeStyle: React.CSSProperties = { - color: '#EBEBEB', + color: colors.lightestGray, fontSize: 13, textTransform: 'uppercase', fontFamily: 'Roboto Mono', @@ -753,7 +749,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.heroGray}} > <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" @@ -782,7 +778,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="clearfix pb4" - style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}} + style={{backgroundColor: colors.heroGray}} > <div className="mx-auto max-width-4 pb4 mb3 clearfix" @@ -799,7 +795,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.heroGray} labelStyle={buttonLabelStyle} label="Build on 0x" onClick={_.noop} |