ThemeProvider

packages/website/ts/@next/components/button.tsx

@@ -34,7 +34,7 @@ const StyledButton = styled.button<ButtonInterface>`
     display: ${props => props.inline && 'inline-block'};
     background-color: ${props => !props.transparent && colors.brandLight};
     border-color: ${props => props.transparent && '#6a6a6a'};
-    color: ${colors.white};
+    color: ${props => props.color || props.theme.textColor};
     text-align: center;
     padding: 14px 22px;
     text-decoration: none;

packages/website/ts/@next/components/footer.tsx

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
+import { Link as ReactRouterLink } from 'react-router-dom';
 
 import { colors } from 'ts/style/colors';
 
@@ -31,7 +32,7 @@ const linkRows: LinkRows[] = [
     {
         heading: 'Products',
         links: [
-            { url: '#', text: '0x Instant' },
+            { url: '/next/0x-instant', text: '0x Instant' },
             { url: '#', text: '0x Launch Kit' },
         ],
     },
@@ -61,7 +62,7 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
     noMargin>
     <Wrap>
       <Column colWidth="1/2" noPadding>
-        <Logo />
+        <Logo light />
         <NewsletterForm />
       </Column>
 
@@ -89,7 +90,7 @@ const LinkList = (props: LinkListProps) => (
   <ul>
     {_.map(props.links, (link, index) => (
       <li key={`fl-${index}`}>
-        <Link href={link.url}>
+        <Link to={link.url}>
           {link.text}
         </Link>
       </li>
@@ -97,7 +98,10 @@ const LinkList = (props: LinkListProps) => (
   </ul>
 );
 
-const FooterWrap = Section.withComponent('footer');
+const FooterSection = Section.withComponent('footer');
+const FooterWrap = styled(FooterSection)`
+    color: ${colors.white};
+`;
 
 const RowHeading = styled.h3`
     color: ${colors.white};
@@ -107,7 +111,7 @@ const RowHeading = styled.h3`
     margin-bottom: 1.25em;
 `;
 
-const Link = styled.a`
+const Link = styled(ReactRouterLink)`
     color: rgba(255, 255, 255, 0.5);
     display: block;
     font-size: 16px;

packages/website/ts/@next/components/header.tsx

@@ -38,7 +38,10 @@ const Link: React.StatelessComponent<LinkProps> = props => {
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
     <Container>
         <StyledHeader>
-            <Logo/>
+            <Link href="/next">
+                <Logo/>
+            </Link>
+
             <Links>
                 {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>

packages/website/ts/@next/components/logo.tsx

@@ -5,18 +5,25 @@ import LogoIcon from '../icons/logo-with-type.svg';
 
 interface LogoInterface {
     // showType: boolean;
+    light?: any;
 }
 
+
+// Note let's refactor this
 const StyledLogo = styled.div`
     text-align: left;
 `;
 
 const Icon = styled(LogoIcon)`
     flex-shrink: 0;
+
+    path {
+        fill: ${props => props.light ? '#fff' : props.theme.textColor};
+    }
 `;
 
-export const Logo: React.StatelessComponent<LogoInterface> = ({}) => (
+export const Logo: React.StatelessComponent<LogoInterface> = (props) => (
     <StyledLogo>
-        <Icon />
+        <Icon {...props} />
     </StyledLogo>
 );

packages/website/ts/@next/components/siteWrap.tsx

@@ -27,11 +27,11 @@ const GLOBAL_THEMES: GlobalThemes = {
     },
     light: {
         bgColor: '#FFFFFF',
-        textColor: '#FFFFFF',
+        textColor: '#000000',
     },
     gray: {
         bgColor: '#e0e0e0',
-        textColor: '#FFFFFF',
+        textColor: '#000000',
     },
 }
 

packages/website/ts/@next/pages/about/mission.tsx

@@ -14,7 +14,7 @@ import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
 import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
 
 export const NextAboutMission = () => (
-  <SiteWrap>
+  <SiteWrap theme="light">
     <Section>
       <Wrap>
          <Column colWidth="1/3">

packages/website/ts/@next/pages/why.tsx

@@ -33,7 +33,7 @@ export const NextWhy = () => (
         </Column>
 
         <Column colWidth="1/3">
-            <LogoOutlined width="150" />
+            <ProtocolIcon width="150" />
             <Heading>Shared Networked Liquidity</Heading>
             <Paragraph>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>