diff options
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 25 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/about/mission.tsx | 10 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 22 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 62 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 24 |
9 files changed, 107 insertions, 70 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index b431ba9e5..032d2e8a1 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -61,18 +61,18 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( bgColor="#181818" noMargin> <Wrap> - <Column colWidth="1/2" noPadding> + <Column colWidth="1/2" isNoPadding={true}> <Logo light /> <NewsletterForm /> </Column> - <Column colWidth="1/2" noPadding> + <Column colWidth="1/2" isNoPadding={true}> <Wrap> {_.map(linkRows, (row, index) => ( <Column key={`fc-${index}`} colWidth="1/3" - noPadding> + isNoPadding={true}> <RowHeading> { row.heading } </RowHeading> diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 86072b81d..28503711c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -17,11 +17,11 @@ interface PaddingSizes { } interface SectionProps { - noPadding?: any; - padLarge?: any; - noMargin?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; + isNoMargin?: any; bgColor?: string; - fullWidth?: any; + isFullWidth?: boolean; } interface WrapProps { @@ -32,8 +32,8 @@ interface WrapProps { interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; - padLarge?: any; + isNoPadding?: boolean; + isPadLarge?: boolean; bgColor?: string; } @@ -93,8 +93,8 @@ export const Main = styled.main` // just <Section asElement?="div/section/footer/header/whatever" /> ? export const Section = styled.section<SectionProps>` width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; + margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); @@ -137,7 +137,7 @@ export const WrapGrid = styled(WrapBase)` `; export const Column = styled.div<ColumnProps>` - padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; border: 1px dotted rgba(255, 0, 0, 0.3); background-color: ${props => props.bgColor}; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 0b98fcf9d..5d6258f37 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import styled from 'styled-components'; +import { ThemeInterface } from 'ts/@next/components/siteWrap'; import LogoIcon from '../icons/logo-with-type.svg'; interface LogoInterface { - // showType: boolean; light?: any; + theme?: ThemeInterface; } @@ -20,7 +21,7 @@ const Icon = styled(LogoIcon)` flex-shrink: 0; path { - fill: ${props => props.light ? '#fff' : props.theme.textColor}; + fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor}; } `; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 7529e90c9..d38c7c50c 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -13,14 +13,15 @@ interface Props { children: any; } -interface GlobalThemes { +// we proabbly want to put this somewhere else (themes) +export interface ThemeInterface { [key: string]: { bgColor: string; textColor: string; } } -const GLOBAL_THEMES: GlobalThemes = { +const GLOBAL_THEMES: ThemeInterface = { dark: { bgColor: '#000000', textColor: '#FFFFFF', diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 4bc21f0fc..4e2b22f52 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,20 +1,19 @@ import * as React from 'react'; -import styled, { withTheme } from 'styled-components'; -import { colors } from 'ts/style/colors'; +import styled from 'styled-components'; + interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; size?: 'default' | 'medium' | 'large' | 'small'; - center?: boolean; - children: Node | string; - noMargin?: any; + isCentered?: boolean; + isNoMargin?: boolean; } interface ParagraphProps { - noMargin?: any; + isNoMargin?: boolean; size?: 'default' | 'small' | 'medium' | 'large'; - muted?: any; - center?: any; + isMuted?: boolean | number; + isCentered?: boolean; } interface HeadingSizes { @@ -50,8 +49,8 @@ const StyledHeading = styled.h1<HeadingProps>` color: ${props => props.color || props.theme.textColor}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; font-weight: 300; - margin-bottom: ${props => !props.noMargin && '30px'}; - text-align: ${props => props.center && 'center'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; + text-align: ${props => props.isCentered && 'center'}; `; export const Heading: React.StatelessComponent<HeadingProps> = props => { @@ -69,9 +68,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { // for literally anything = export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; - margin-bottom: ${props => !props.noMargin && '30px'}; + margin-bottom: ${props => !props.isNoMargin && '30px'}; line-height: 1.4; color: ${props => props.color || props.theme.textColor}; - opacity: ${props => props.muted || 0.75}; - text-align: ${props => props.center && 'center'}; + opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; + text-align: ${props => props.isCentered && 'center'}; `; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index 902612703..b85a4e91e 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -31,7 +31,9 @@ export const NextAboutMission = () => ( </Wrap> </Section> - <Section fullWidth noPadding> + <Section + isFullWidth={true} + isNoPadding={true}> <Wrap width="full"> <Image src="/images/@next/about/about-mission@2x.jpg" height="320" alt="" center /> </Wrap> @@ -50,7 +52,7 @@ export const NextAboutMission = () => ( </Column> <Column colWidth="2/3"> <Heading size="medium">Do The Right Thing</Heading> - <Paragraph muted>We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.</Paragraph> + <Paragraph isMuted={true}>We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.</Paragraph> </Column> </Wrap> <Wrap> @@ -59,7 +61,7 @@ export const NextAboutMission = () => ( </Column> <Column colWidth="2/3"> <Heading size="medium">Consistently Ship</Heading> - <Paragraph muted>Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.</Paragraph> + <Paragraph isMuted={true}>Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.</Paragraph> </Column> </Wrap> <Wrap> @@ -68,7 +70,7 @@ export const NextAboutMission = () => ( </Column> <Column colWidth="2/3"> <Heading size="medium">Focus on long-term Impact</Heading> - <Paragraph muted>We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.</Paragraph> + <Paragraph isMuted={true}>We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.</Paragraph> </Column> </Wrap> </Column> diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 69a9fb6b3..a8707cdd7 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -16,13 +16,15 @@ export const Next0xInstant = () => ( <SiteWrap> <Section> <WrapCentered> - <Heading size="medium" center>Introducing 0x Instant</Heading> - <Paragraph size="medium" center>A free and flexible way to offer simple crypto purchasing in any app or website</Paragraph> + <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading> + <Paragraph size="medium" isCentered={true}>A free and flexible way to offer simple crypto purchasing in any app or website</Paragraph> <Button href="#">Get Started</Button> </WrapCentered> </Section> - <Section fullWidth noPadding> + <Section + isFullWidth={true} + isNoPadding={true}> <Wrap width="full"> <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> </Wrap> @@ -36,7 +38,7 @@ export const Next0xInstant = () => ( <Column colWidth="2/3"> <Heading>Support ERC-20 and ERC-721 tokens</Heading> - <Paragraph muted>Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.</Paragraph> + <Paragraph isMuted={true}>Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.</Paragraph> <div> <a href="#">Get Started</a><a href="#">Explore the Docs</a> </div> @@ -51,7 +53,7 @@ export const Next0xInstant = () => ( <Column colWidth="2/3"> <Heading>Generate revenue for your business</Heading> - <Paragraph muted>With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.</Paragraph> + <Paragraph isMuted={true}>With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.</Paragraph> <div> <a href="#">Learn more about affiliate fees</a> </div> @@ -66,7 +68,7 @@ export const Next0xInstant = () => ( <Column colWidth="2/3"> <Heading>Easy and flexible integration</Heading> - <Paragraph muted>Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.</Paragraph> + <Paragraph isMuted={true}>Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool.</Paragraph> <div> <a href="#">Explore AssetBuyer</a> <a href="#">Learn about liquidity</a> @@ -95,14 +97,14 @@ export const Next0xInstant = () => ( <Section bgColor={colors.brandDark}> <Wrap> - <Column colWidth="1/2" padLarge> + <Column colWidth="1/2" isPadLarge={true}> <WrapCentered> <Heading>Need more flexibility?</Heading> <Paragraph>Dive into our docs, or contact us if needed</Paragraph> </WrapCentered> </Column> - <Column colWidth="1/2" padLarge> + <Column colWidth="1/2" isPadLarge={true}> <WrapCentered> <div> <Button href="#">Explore the Docs</Button> @@ -116,8 +118,8 @@ export const Next0xInstant = () => ( <Section> <Wrap width="full"> <Column> - <Paragraph size="small" muted="0.5">Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph> - <Paragraph size="small" muted="0.5">See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph> + <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph> + <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph> </Column> </Wrap> </Section> diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 137bcda7d..9ea050af7 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -55,11 +55,15 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( </Wrap> </Section> - <Section bgColor={colors.backgroundDark} padLarge> + <Section + bgColor={colors.backgroundDark} + isPadLarge={true}> <WrapCentered width="narrow"> <ProtocolIcon/> - <Paragraph size="large" center> + <Paragraph + size="large" + isCentered={true}> 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have @@ -74,60 +78,88 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( {/* Note you can also pass in a string "large/default" or a number for custom margins */} <Wrap padding={['large', 0, 0, 0]}> {/* NOTE: this probably should be withComponent as part of a <dl> */} - <Column colWidth="1/3" noPadding> - <Heading size="medium" center> + <Column + colWidth="1/3" + isNoPadding={true}> + <Heading + size="medium" + isCentered={true}> 873,435 </Heading> - <Paragraph muted={0.4} center noMargin> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true}> Number of transactions </Paragraph> </Column> - <Column colWidth="1/3" noPadding> - <Heading size="medium" center> + <Column + colWidth="1/3" + isNoPadding={true}> + <Heading + size="medium" + isCentered={true}> $203M </Heading> - <Paragraph muted={0.4} center noMargin> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true}> Total volume </Paragraph> </Column> - <Column colWidth="1/3" noPadding> - <Heading size="medium" center> + <Column + colWidth="1/3" + isNoPadding={true}> + <Heading + size="medium" + isCentered={true}> 227,372 </Heading> - <Paragraph muted={0.4} center noMargin> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true}> Number of relayers </Paragraph> </Column> </Wrap> </Section> - <Section padLarge> + <Section + isPadLarge={true}> <WrapCentered> <Heading size="small">You're in good company</Heading> </WrapCentered> <WrapGrid width="narrow"> {_.map([...Array(9)], (item, index) => ( - <SampleLogo /> + <SampleLogo key={index} /> ))} </WrapGrid> </Section> <Section> <Wrap> - <Column bgColor="#003831" colWidth="1/2" padLarge> + <Column + bgColor="#003831" + colWidth="1/2" + isPadLarge={true}> <WrapCentered> <ReadyToBuildIcon width="150" /> Ready to build on 0x? </WrapCentered> </Column> - <Column bgColor="#003831" colWidth="1/2" padLarge> + <Column + bgColor="#003831" + colWidth="1/2" + isPadLarge={true}> <WrapCentered> <ReadyToBuildIcon width="150" /> Ready to build on 0x? diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index f9dff725b..52268bd26 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -17,9 +17,9 @@ export const NextWhy = () => ( <Section> <WrapCentered> <Column colWidth="2/3"> - <Heading size="medium" center>The exchange layer for the crypto economy</Heading> - <Paragraph size="medium" center>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph> - <Paragraph center>Build on 0x (arrow)</Paragraph> + <Heading size="medium" isCentered={true}>The exchange layer for the crypto economy</Heading> + <Paragraph size="medium" isCentered={true}>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph> + <Paragraph isCentered={true}>Build on 0x (arrow)</Paragraph> </Column> </WrapCentered> </Section> @@ -58,40 +58,40 @@ export const NextWhy = () => ( <Heading size="medium">What 0x offers</Heading> <CoinIcon width="150" /> <Heading>A Standard for Exchange</Heading> - <Paragraph muted>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Paragraph> + <Paragraph isMuted={true}>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Paragraph> <CoinIcon width="150" /> <Heading>Robust Smart Contracts</Heading> - <Paragraph muted>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Paragraph> + <Paragraph isMuted={true}>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Paragraph> <CoinIcon width="150" /> <Heading>Extensible Architecture</Heading> - <Paragraph muted>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Paragraph> + <Paragraph isMuted={true}>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Paragraph> <CoinIcon width="150" /> <Heading>Efficient Design</Heading> - <Paragraph muted>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Paragraph> + <Paragraph isMuted={true}>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Paragraph> <Heading size="medium">Use Cases</Heading> - <Paragraph muted>slider</Paragraph> + <Paragraph isMuted={true}>slider</Paragraph> <Heading size="medium">Exchange Functionality</Heading> <CoinIcon width="150" /> <Heading>Secure Non-custodial Trading</Heading> - <Paragraph muted>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Paragraph> + <Paragraph isMuted={true}>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Paragraph> <CoinIcon width="150" /> <Heading>Flexible Order Types</Heading> - <Paragraph muted>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Paragraph> + <Paragraph isMuted={true}>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Paragraph> <CoinIcon width="150" /> <Heading>Build a Business</Heading> - <Paragraph muted>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Paragraph> + <Paragraph isMuted={true}>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Paragraph> <CoinIcon width="150" /> <Heading>Networked Liquidity</Heading> - <Paragraph muted>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Paragraph> + <Paragraph isMuted={true}>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Paragraph> </Column> </Wrap> </Section> |