diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 21 |
5 files changed, 23 insertions, 12 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 24da860ba..cd14c80ba 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -52,7 +52,7 @@ export const Link = (props: ButtonInterface) => { const Component = Button.withComponent(ReactRouterLink); return ( - <Component to={href} {...props}> + <Component to={href} isTransparent={true} {...props}> {children} { isWithArrow && diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index e4add9ecf..144eb5eb2 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -58,7 +58,9 @@ export class Header extends React.Component<HeaderProps, HeaderState> { <ReactRouterLink to="/next"> <Logo/> </ReactRouterLink> + <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/> + <Nav> <MobileProductLinksWrap> <Paragraph isNoMargin={true} isMuted={0.5} size="small">Products</Paragraph> @@ -73,9 +75,10 @@ export class Header extends React.Component<HeaderProps, HeaderState> { </StyledLink> ))} </MobileProductLinksWrap> - <StyledButtonWrap> + + <StyledButtonWrap> {_.map(navItems, (link, index) => this._getNavItem(link, index))} - </StyledButtonWrap> + </StyledButtonWrap> </Nav> <TradeButton href="#">Trade on 0x</TradeButton> </HeaderWrap> diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index d300031dc..a434c325f 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -17,6 +17,7 @@ interface HeadingProps extends BaseTextInterface { interface ParagraphProps extends BaseTextInterface { isNoMargin?: boolean; + marginBottom?: string; // maybe we should remove isNoMargin isMuted?: boolean | number; } @@ -56,7 +57,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { // for literally anything = export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; - margin-bottom: ${props => !props.isNoMargin && '30px'}; + margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; padding: ${props => props.padding && getCSSPadding(props.padding)}; color: ${props => props.color || props.theme.textColor}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index c7c90c0ba..2408dfe4e 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -53,7 +53,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` @media (max-width: 768px) { :root { - --smallHeading: 16px; + --smallHeading: 18px; --defaultHeading: 18px; --mediumHeading: 40px; --largeHeading: 46px; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 88c0ca69b..43e37a74b 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -6,9 +6,9 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; import { Banner } from 'ts/@next/components/banner'; +import { Link } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout'; -import { Link } from 'ts/@next/components/link'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; @@ -73,20 +73,27 @@ export class NextWhy extends React.PureComponent { size="medium" isCentered={true} > - The exchange layer for the crypto economy + The exchange layer for<br /> + the crypto economy </Heading> <Paragraph size="medium" isMuted={true} isCentered={true} + marginBottom="60px" > 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> - <Link href="/docs" isCentered={true}> + <Link + href="/docs" + isCentered={true} + isWithArrow={true} + isAccentColor={true} + > Build on 0x - </Link> + </Link> </Column> </WrapCentered> </Section> @@ -95,19 +102,19 @@ export class NextWhy extends React.PureComponent { <Wrap> <Column colWidth="1/3"> <Icon name="coin" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small">Support for all Ethereum Standards</Heading> + <Heading size="small" marginBottom="15px">Support for all Ethereum Standards</Heading> <Paragraph isMuted={true}>0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol...</Paragraph> </Column> <Column colWidth="1/3"> <Icon name="coin" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small">Shared Networked Liquidity</Heading> + <Heading size="small" marginBottom="15px">Shared Networked Liquidity</Heading> <Paragraph isMuted={true}>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph> </Column> <Column colWidth="1/3"> <Icon name="coin" size="large" margin={[0, 0, 32, 0]} /> - <Heading size="small">Customize the User Experience</Heading> + <Heading size="small" marginBottom="15px">Customize the User Experience</Heading> <Paragraph isMuted={true}>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Paragraph> </Column> </Wrap> |