Updates margins in why, change link component

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>