From 56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 28 Nov 2018 16:26:56 +0100
Subject: Add ehader

---
 packages/website/ts/@next/components/header.tsx | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 packages/website/ts/@next/components/header.tsx

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
new file mode 100644
index 000000000..615cf53d5
--- /dev/null
+++ b/packages/website/ts/@next/components/header.tsx
@@ -0,0 +1,54 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Button } from './button';
+import { Container } from './container';
+import { Logo } from './logo';
+
+export interface HeaderInterface {
+}
+
+const StyledHeader = styled.header`
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.764705882rem 0;
+`;
+
+const Text = styled.span`
+    font-size: 1rem;
+    line-height: 1.375rem;
+`;
+
+const Links = styled.div`
+    display: flex;
+    justify-content: space-around;
+`;
+
+const Link = styled.a`
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 18px;
+    margin: 0 1.764705882rem;
+`;
+
+const links = [
+    { url: '', text: 'Why 0x' },
+    { url: '', text: 'Products' },
+    { url: '', text: 'Developers' },
+    { url: '', text: 'About' },
+    { url: '', text: 'Blog' },
+];
+
+export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
+    <Container>
+        <StyledHeader>
+            <Logo/>
+            <Links>
+                {_.map(links, link => <Link>{link.text}</Link>)}
+            </Links>
+            <Button text="Trade on 0x" />
+        </StyledHeader>
+    </Container>
+);
-- 
cgit 


From a1fe30e2105f197ab62715e8cfcc971a747bdb7a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 28 Nov 2018 16:33:10 +0100
Subject: Tweak links in header

---
 packages/website/ts/@next/components/header.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 615cf53d5..6afa1f58e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -31,14 +31,20 @@ const Link = styled.a`
     color: rgba(255, 255, 255, 0.5);
     font-size: 18px;
     margin: 0 1.764705882rem;
+    transition: color 0.25s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        color: rgba(255, 255, 255, 1);
+    }
 `;
 
 const links = [
-    { url: '', text: 'Why 0x' },
-    { url: '', text: 'Products' },
-    { url: '', text: 'Developers' },
-    { url: '', text: 'About' },
-    { url: '', text: 'Blog' },
+    { url: '#', text: 'Why 0x' },
+    { url: '#', text: 'Products' },
+    { url: '#', text: 'Developers' },
+    { url: '#', text: 'About' },
+    { url: '#', text: 'Blog' },
 ];
 
 export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
@@ -46,7 +52,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
         <StyledHeader>
             <Logo/>
             <Links>
-                {_.map(links, link => <Link>{link.text}</Link>)}
+                {_.map(links, link => <Link href={link.url}>{link.text}</Link>)}
             </Links>
             <Button text="Trade on 0x" />
         </StyledHeader>
-- 
cgit 


From f9a7cc94e1af962ac16f87d5300047158428279e Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 28 Nov 2018 17:11:17 +0100
Subject: Fix key in loop

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 6afa1f58e..670b84fa4 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -52,7 +52,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
         <StyledHeader>
             <Logo/>
             <Links>
-                {_.map(links, link => <Link href={link.url}>{link.text}</Link>)}
+                {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>
             <Button text="Trade on 0x" />
         </StyledHeader>
-- 
cgit 


From 0577a0dbc5fa78e2bb6289d1ff475f10e27f7a79 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 29 Nov 2018 14:26:52 +0100
Subject: Remove export of interface

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 670b84fa4..f9b71a43c 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -6,7 +6,7 @@ import { Button } from './button';
 import { Container } from './container';
 import { Logo } from './logo';
 
-export interface HeaderInterface {
+interface HeaderInterface {
 }
 
 const StyledHeader = styled.header`
-- 
cgit 


From a21bca7cf4771d04879036f3406f38276af93e3a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 29 Nov 2018 15:34:26 +0100
Subject: Cleanup button component

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index f9b71a43c..ac37e3ab2 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -54,7 +54,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
             <Links>
                 {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>
-            <Button text="Trade on 0x" />
+            <Button href="#">Trade on 0x</Button>
         </StyledHeader>
     </Container>
 );
-- 
cgit 


From 83499176d9b627d383a7edc17dd862861af05320 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 29 Nov 2018 17:43:17 +0100
Subject: Adjust global font size

---
 packages/website/ts/@next/components/header.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index ac37e3ab2..0d4679df6 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -15,11 +15,12 @@ const StyledHeader = styled.header`
     align-items: center;
     justify-content: space-between;
     padding: 1.764705882rem 0;
+    padding: 1.666666667rem 0;
 `;
 
 const Text = styled.span`
     font-size: 1rem;
-    line-height: 1.375rem;
+    line-height: 1.222222222em;
 `;
 
 const Links = styled.div`
@@ -29,8 +30,8 @@ const Links = styled.div`
 
 const Link = styled.a`
     color: rgba(255, 255, 255, 0.5);
-    font-size: 18px;
-    margin: 0 1.764705882rem;
+    font-size: 1rem;
+    margin: 0 1.666666667em;
     transition: color 0.25s ease-in-out;
     text-decoration: none;
 
-- 
cgit 


From ab24dcc29098c7b0c65c0e19be89a15bec3426af Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 09:56:01 +0100
Subject: Hide trade button on mobile

---
 packages/website/ts/@next/components/header.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 0d4679df6..9b80ec167 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,10 +11,10 @@ interface HeaderInterface {
 
 const StyledHeader = styled.header`
     display: flex;
+    flex-wrap: wrap;
     text-align: center;
     align-items: center;
     justify-content: space-between;
-    padding: 1.764705882rem 0;
     padding: 1.666666667rem 0;
 `;
 
@@ -40,6 +40,12 @@ const Link = styled.a`
     }
 `;
 
+const TradeButton = styled(Button)`
+    @media (max-width: 999px) {
+        display: none;
+    }
+`;
+
 const links = [
     { url: '#', text: 'Why 0x' },
     { url: '#', text: 'Products' },
@@ -55,7 +61,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
             <Links>
                 {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>
-            <Button href="#">Trade on 0x</Button>
+            <TradeButton href="#">Trade on 0x</TradeButton>
         </StyledHeader>
     </Container>
 );
-- 
cgit 


From e78226257265d938e1c3830c8a93199011fa085a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 14:15:23 +0100
Subject: Add route links to header

---
 packages/website/ts/@next/components/header.tsx | 75 +++++++++++++++----------
 1 file changed, 44 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 9b80ec167..b09a7ed89 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -2,13 +2,51 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { Link as ReactRouterLink } from 'react-router-dom';
+
 import { Button } from './button';
 import { Container } from './container';
 import { Logo } from './logo';
 
-interface HeaderInterface {
+interface HeaderProps {
+}
+
+interface LinkProps {
+    href: string;
 }
 
+const links = [
+    { url: '/next/why', text: 'Why 0x' },
+    { url: '#', text: 'Products' },
+    { url: '#', text: 'Developers' },
+    { url: '#', text: 'About' },
+    { url: '#', text: 'Blog' },
+];
+
+const Link: React.StatelessComponent<LinkProps> = props => {
+    const { children, href } = props;
+
+    return (
+        <StyledRouterLink
+            to={href}
+        >
+            {children}
+        </StyledRouterLink>
+    );
+};
+
+export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
+    <Container>
+        <StyledHeader>
+            <Logo/>
+            <Links>
+                {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
+            </Links>
+            <TradeButton href="#">Trade on 0x</TradeButton>
+        </StyledHeader>
+    </Container>
+);
+
 const StyledHeader = styled.header`
     display: flex;
     flex-wrap: wrap;
@@ -18,9 +56,10 @@ const StyledHeader = styled.header`
     padding: 1.666666667rem 0;
 `;
 
-const Text = styled.span`
-    font-size: 1rem;
-    line-height: 1.222222222em;
+const TradeButton = styled(Button)`
+    @media (max-width: 999px) {
+        display: none;
+    }
 `;
 
 const Links = styled.div`
@@ -28,7 +67,7 @@ const Links = styled.div`
     justify-content: space-around;
 `;
 
-const Link = styled.a`
+const StyledRouterLink = styled(ReactRouterLink)`
     color: rgba(255, 255, 255, 0.5);
     font-size: 1rem;
     margin: 0 1.666666667em;
@@ -39,29 +78,3 @@ const Link = styled.a`
         color: rgba(255, 255, 255, 1);
     }
 `;
-
-const TradeButton = styled(Button)`
-    @media (max-width: 999px) {
-        display: none;
-    }
-`;
-
-const links = [
-    { url: '#', text: 'Why 0x' },
-    { url: '#', text: 'Products' },
-    { url: '#', text: 'Developers' },
-    { url: '#', text: 'About' },
-    { url: '#', text: 'Blog' },
-];
-
-export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
-    <Container>
-        <StyledHeader>
-            <Logo/>
-            <Links>
-                {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-            </Links>
-            <TradeButton href="#">Trade on 0x</TradeButton>
-        </StyledHeader>
-    </Container>
-);
-- 
cgit 


From 7314fd72529a0aa4186e5724c48e5776e424c99d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 14:55:28 +0100
Subject: Link products to 0x instant for now

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b09a7ed89..357056c04 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -17,7 +17,7 @@ interface LinkProps {
 
 const links = [
     { url: '/next/why', text: 'Why 0x' },
-    { url: '#', text: 'Products' },
+    { url: '/next/0x-instant', text: 'Products' },
     { url: '#', text: 'Developers' },
     { url: '#', text: 'About' },
     { url: '#', text: 'Blog' },
-- 
cgit 


From 3a13286585eb1399247b808c6d45849db9d94a2d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 16:03:49 +0100
Subject: Added about / mission

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 357056c04..0f47588bd 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -19,7 +19,7 @@ const links = [
     { url: '/next/why', text: 'Why 0x' },
     { url: '/next/0x-instant', text: 'Products' },
     { url: '#', text: 'Developers' },
-    { url: '#', text: 'About' },
+    { url: '/next/about/mission', text: 'About' },
     { url: '#', text: 'Blog' },
 ];
 
-- 
cgit 


From 435d9e47e330822a4df2f8e1787e98b60df3bc0f Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 30 Nov 2018 17:07:51 +0100
Subject: ThemeProvider

---
 packages/website/ts/@next/components/header.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 0f47588bd..0e7d8f5cd 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/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>
-- 
cgit 


From 62eba1e8202925b88932bf10b65c4239131185e5 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 3 Dec 2018 11:10:33 +0100
Subject: Uses layout elems in header

---
 packages/website/ts/@next/components/header.tsx | 35 +++++++++++--------------
 1 file changed, 16 insertions(+), 19 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 0e7d8f5cd..b9b04a8c0 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
+import { Section, Wrap } from './layout';
 import { Button } from './button';
-import { Container } from './container';
 import { Logo } from './logo';
 
 interface HeaderProps {
@@ -36,27 +36,24 @@ const Link: React.StatelessComponent<LinkProps> = props => {
 };
 
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
-    <Container>
-        <StyledHeader>
-            <Link href="/next">
-                <Logo/>
-            </Link>
+      <StyledHeader>
+        <HeaderWrap>
+          <Link href="/next">
+              <Logo/>
+          </Link>
 
-            <Links>
-                {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-            </Links>
-            <TradeButton href="#">Trade on 0x</TradeButton>
-        </StyledHeader>
-    </Container>
+          <Links>
+              {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
+          </Links>
+          <TradeButton href="#">Trade on 0x</TradeButton>
+        </HeaderWrap>
+    </StyledHeader>
 );
 
-const StyledHeader = styled.header`
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1.666666667rem 0;
+const StyledHeader = Section.withComponent('header');
+const HeaderWrap = styled(Wrap)`
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const TradeButton = styled(Button)`
-- 
cgit 


From 1fab30ef80b58435405bce8cddaf375f4c5a9047 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 3 Dec 2018 11:15:34 +0100
Subject: A bit of formatting, centeres instant text

---
 packages/website/ts/@next/components/header.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b9b04a8c0..c934b29ac 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -23,18 +23,6 @@ const links = [
     { url: '#', text: 'Blog' },
 ];
 
-const Link: React.StatelessComponent<LinkProps> = props => {
-    const { children, href } = props;
-
-    return (
-        <StyledRouterLink
-            to={href}
-        >
-            {children}
-        </StyledRouterLink>
-    );
-};
-
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
       <StyledHeader>
         <HeaderWrap>
@@ -50,6 +38,16 @@ export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
     </StyledHeader>
 );
 
+const Link: React.StatelessComponent<LinkProps> = props => {
+    const { children, href } = props;
+
+    return (
+        <StyledRouterLink to={href}>
+            {children}
+        </StyledRouterLink>
+    );
+};
+
 const StyledHeader = Section.withComponent('header');
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
-- 
cgit 


From 4da419cf7591a8beb32fb5e41e31b129c5fbb99f Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 4 Dec 2018 14:58:37 +0100
Subject: Fixes all lint issues, cleanup

---
 packages/website/ts/@next/components/header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c934b29ac..dfe9028c3 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,12 +1,12 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
-import { Section, Wrap } from './layout';
-import { Button } from './button';
-import { Logo } from './logo';
+import { Button } from 'ts/@next/components/button';
+import { Section, Wrap } from 'ts/@next/components/layout';
+import { Logo } from 'ts/@next/components/logo';
 
 interface HeaderProps {
 }
-- 
cgit 


From 8acb25f577feaea910ef0c1121aaba2ea177e718 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 4 Dec 2018 15:45:04 +0100
Subject: Refactors buttons/links/header

---
 packages/website/ts/@next/components/header.tsx | 66 +++++++------------------
 1 file changed, 19 insertions(+), 47 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index dfe9028c3..a6bbe4d65 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,20 +1,15 @@
 import _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
-
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
+import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
 import { Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 
 interface HeaderProps {
 }
 
-interface LinkProps {
-    href: string;
-}
-
 const links = [
     { url: '/next/why', text: 'Why 0x' },
     { url: '/next/0x-instant', text: 'Products' },
@@ -26,53 +21,30 @@ const links = [
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
       <StyledHeader>
         <HeaderWrap>
-          <Link href="/next">
+          <ReactRouterLink to="/next">
               <Logo/>
-          </Link>
-
-          <Links>
-              {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-          </Links>
-          <TradeButton href="#">Trade on 0x</TradeButton>
+          </ReactRouterLink>
+
+          <ButtonWrap>
+              {_.map(links, (link, index) => (
+                <Link
+                    key={`hb-${index}`}
+                    href={link.url}
+                    isTransparent={true}
+                    isNoBorder={true}
+                >
+                    {link.text}
+                </Link>
+              ))}
+          </ButtonWrap>
+
+          <Button href="#">Trade on 0x</Button>
         </HeaderWrap>
     </StyledHeader>
 );
 
-const Link: React.StatelessComponent<LinkProps> = props => {
-    const { children, href } = props;
-
-    return (
-        <StyledRouterLink to={href}>
-            {children}
-        </StyledRouterLink>
-    );
-};
-
 const StyledHeader = Section.withComponent('header');
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
 `;
-
-const TradeButton = styled(Button)`
-    @media (max-width: 999px) {
-        display: none;
-    }
-`;
-
-const Links = styled.div`
-    display: flex;
-    justify-content: space-around;
-`;
-
-const StyledRouterLink = styled(ReactRouterLink)`
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 1rem;
-    margin: 0 1.666666667em;
-    transition: color 0.25s ease-in-out;
-    text-decoration: none;
-
-    &:hover {
-        color: rgba(255, 255, 255, 1);
-    }
-`;
-- 
cgit 


From c99558606347682c6c5c9bb20d37aa4fbe8ab6be Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 10 Dec 2018 11:19:20 +0100
Subject: WIP mobile header + developer dropdown

---
 packages/website/ts/@next/components/header.tsx | 222 ++++++++++++++++++++----
 1 file changed, 190 insertions(+), 32 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index a6bbe4d65..e4add9ecf 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -3,48 +3,206 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { colors } from 'ts/style/colors';
+
 import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
+import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { Hamburger } from 'ts/@next/components/hamburger';
 import { Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
+import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
+    isOpen: boolean;
+    location?: Location;
+}
+
+interface HeaderState {
+    isOpen: boolean;
+}
+
+interface HeaderState {
+    isOpen: boolean;
+}
+
+interface NavItem {
+    url?: string;
+    id?: string;
+    text?: string;
 }
 
-const links = [
-    { url: '/next/why', text: 'Why 0x' },
-    { url: '/next/0x-instant', text: 'Products' },
-    { url: '#', text: 'Developers' },
-    { url: '/next/about/mission', text: 'About' },
-    { url: '#', text: 'Blog' },
+const mobileProductLinks = [
+    { url: '/next/0x-instant', text: '0x Instant' },
+    { url: '/next/launch-kit', text: '0x Launch Kit' },
+];
+
+const navItems: NavItem[] = [
+    { id: 'why', url: '/next/why', text: 'Why 0x' },
+    { id: 'products', url: '/next/0x-instant', text: 'Products' },
+    { id: 'developers', url: '#', text: 'Developers' },
+    { id: 'about', url: '/next/about/mission', text: 'About' },
+    { id: 'blog', url: '#', text: 'Blog' },
 ];
 
-export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
-      <StyledHeader>
-        <HeaderWrap>
-          <ReactRouterLink to="/next">
-              <Logo/>
-          </ReactRouterLink>
-
-          <ButtonWrap>
-              {_.map(links, (link, index) => (
-                <Link
-                    key={`hb-${index}`}
-                    href={link.url}
-                    isTransparent={true}
-                    isNoBorder={true}
-                >
-                    {link.text}
-                </Link>
-              ))}
-          </ButtonWrap>
-
-          <Button href="#">Trade on 0x</Button>
-        </HeaderWrap>
-    </StyledHeader>
-);
-
-const StyledHeader = Section.withComponent('header');
+export class Header extends React.Component<HeaderProps, HeaderState> {
+    constructor(props: HeaderProps) {
+        super(props);
+        this.state = {
+            isOpen: false,
+        };
+    }
+    public render(): React.ReactNode {
+        return (
+            <StyledHeader isOpen={this.state.isOpen}>
+              <HeaderWrap>
+                <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>
+                        {_.map(mobileProductLinks, (link, index) => (
+                            <StyledLink
+                                key={`productlink-${index}`}
+                                href={link.url}
+                                isTransparent={true}
+                                isNoBorder={true}
+                            >
+                            {link.text}
+                            </StyledLink>
+                        ))}
+                    </MobileProductLinksWrap>
+                  <StyledButtonWrap>
+                      {_.map(navItems, (link, index) => this._getNavItem(link, index))}
+                  </StyledButtonWrap>
+                </Nav>
+                <TradeButton href="#">Trade on 0x</TradeButton>
+              </HeaderWrap>
+          </StyledHeader>
+      );
+    }
+    private _onMenuButtonClick(): void {
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    }
+    private _getNavItem(link: NavItem, index: number): React.ReactNode {
+        if (link.id === 'developers') {
+            return (
+                <DevelopersDropDown
+                    location={window.location}
+                />
+            );
+        }
+
+        return (
+            <StyledLink
+                key={`header-nav-item-${index}`}
+                href={link.url}
+                isTransparent={true}
+                isNoBorder={true}
+            >
+                {link.text}
+            </StyledLink>
+        )
+    }
+}
+
+const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
+    @media (max-width: 768px) {
+        overflow: hidden;
+        min-height: ${props => props.isOpen ? '385px' : '70px'};
+        position: relative;
+        transition: min-height 0.25s ease-in-out;
+        :root & {
+            padding: 20px 20px 0 !important;
+        }
+    }
+`;
+
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
+
+  @media (max-width: 768px) {
+      padding-top: 0;
+      display: flex;
+      padding-bottom: 0;
+  }
+`;
+
+const StyledButtonWrap = styled(ButtonWrap)`
+    display: flex;
+    @media (max-width: 768px) {
+        background-color: #022924;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 20px 20px;
+
+        a {
+            text-align: left;
+            padding-left: 0;
+        }
+    }
+
+    button + button,
+    a + a,
+    a + button,
+    button + a {
+        margin-left: 0;
+
+        @media (min-width: 768px) {
+            margin-left: 10px;
+        }
+    }
+`;
+
+const MobileProductLinksWrap = styled(StyledButtonWrap)`
+    display: none;
+
+    @media (max-width: 768px) {
+        display: block;
+        background-color: transparent;
+        flex-direction: column;
+
+        a {
+            display: block;
+            width: 100%;
+        }
+    }
+`;
+
+const StyledLink = styled(Link)`
+    width: 50%;
+    text-align: left;
+    @media (max-width: 768px) {
+    }
+
+    @media (min-width: 768px) {
+        width: auto;
+        text-align: center;
+    }
+`;
+
+const Nav = styled.div`
+    @media (max-width: 768px) {
+        background-color: ${colors.brandDark};
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        padding-top: 65px;
+    }
+
+    @media (min-width: 768px) {
+        width: auto;
+        text-align: center;
+    }
+`;
+
+const TradeButton = styled(Button)`
+    @media (max-width: 768px) {
+        display: none;
+    }
 `;
-- 
cgit 


From 7aee687e6bd585e473f3f677b383db3d636bd129 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 10 Dec 2018 17:55:51 +0100
Subject: Updates margins in why, change link component

---
 packages/website/ts/@next/components/header.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

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>
-- 
cgit 


From beffcd990cb73655ea97cc61727a9c1bde359b97 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 10 Dec 2018 19:13:52 +0100
Subject: WIP Updates dropdown menus

---
 packages/website/ts/@next/components/header.tsx | 109 +++++++++++++++++-------
 1 file changed, 78 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 144eb5eb2..99e634e18 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -7,6 +7,7 @@ import { colors } from 'ts/style/colors';
 
 import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
 import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { Dropdown } from 'ts/@next/components/dropdowns/mock';
 import { Hamburger } from 'ts/@next/components/hamburger';
 import { Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
@@ -38,8 +39,18 @@ const mobileProductLinks = [
 
 const navItems: NavItem[] = [
     { id: 'why', url: '/next/why', text: 'Why 0x' },
-    { id: 'products', url: '/next/0x-instant', text: 'Products' },
-    { id: 'developers', url: '#', text: 'Developers' },
+    {
+        id: 'products',
+        url: '/next/0x-instant',
+        text: 'Products',
+        dropdownComponent: Dropdown,
+    },
+    {
+        id: 'developers',
+        url: '#',
+        text: 'Developers',
+        dropdownComponent: Dropdown,
+    },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
 ];
@@ -63,7 +74,6 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 
                 <Nav>
                     <MobileProductLinksWrap>
-                        <Paragraph isNoMargin={true} isMuted={0.5} size="small">Products</Paragraph>
                         {_.map(mobileProductLinks, (link, index) => (
                             <StyledLink
                                 key={`productlink-${index}`}
@@ -91,24 +101,27 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         });
     }
     private _getNavItem(link: NavItem, index: number): React.ReactNode {
-        if (link.id === 'developers') {
-            return (
-                <DevelopersDropDown
-                    location={window.location}
-                />
-            );
-        }
+        const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
+        const Subnav = link.dropdownComponent;
 
         return (
-            <StyledLink
-                key={`header-nav-item-${index}`}
-                href={link.url}
-                isTransparent={true}
-                isNoBorder={true}
-            >
-                {link.text}
-            </StyledLink>
-        )
+            <Wrapper>
+                <StyledLink
+                    key={`nav-${index}`}
+                    href={link.url}
+                    isTransparent={true}
+                    isNoBorder={true}
+                >
+                    {link.text}
+                </StyledLink>
+
+                {link.dropdownComponent &&
+                    <DropdownWrap>
+                        <Subnav />
+                    </DropdownWrap>
+                }
+            </Wrapper>
+        );
     }
 }
 
@@ -176,18 +189,55 @@ const MobileProductLinksWrap = styled(StyledButtonWrap)`
     }
 `;
 
-const StyledLink = styled(Link)`
-    width: 50%;
-    text-align: left;
-    @media (max-width: 768px) {
+const LinkWrap = styled.div`
+    position: relative;
+
+    a {
+        display: block;
+    }
+
+    &:hover > div {
+        display: block;
+        visibility: visible;
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: opacity 0.35s, transform 0.35s, visibility 0s;
     }
+`;
+
+const DropdownWrap = styled.div`
+    width: 420px;
+    padding: 30px;
+    background-color: #ffffff;
+    color: #000000;
+    position: absolute;
+    top: 100%;
+    left: calc(50% - 210px);
+    visibility: hidden;
+    opacity: 0;
+    transform: translate3d(0, -10px, 0);
+    transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
 
-    @media (min-width: 768px) {
-        width: auto;
-        text-align: center;
+    &:after {
+    	bottom: 100%;
+    	left: 50%;
+    	border: solid transparent;
+    	content: " ";
+    	height: 0;
+    	width: 0;
+    	position: absolute;
+    	pointer-events: none;
+    	border-color: rgba(255, 255, 255, 0);
+    	border-bottom-color: #ffffff;
+    	border-width: 10px;
+    	margin-left: -10px;
     }
 `;
 
+const StyledLink = styled(Link)`
+
+`;
+
 const Nav = styled.div`
     @media (max-width: 768px) {
         background-color: ${colors.brandDark};
@@ -197,14 +247,11 @@ const Nav = styled.div`
         right: 0;
         padding-top: 65px;
     }
-
-    @media (min-width: 768px) {
-        width: auto;
-        text-align: center;
-    }
 `;
 
 const TradeButton = styled(Button)`
+    padding: 14px 22px;
+
     @media (max-width: 768px) {
         display: none;
     }
-- 
cgit 


From e18be3160e5d35f478157d525e8ec9f91d06fe38 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 10 Dec 2018 20:02:28 +0100
Subject: WIP dropdown header

---
 packages/website/ts/@next/components/header.tsx | 83 ++++++++++++++-----------
 1 file changed, 45 insertions(+), 38 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 99e634e18..6444a1b97 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import * as React from 'react';
+import Headroom from 'react-headroom';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -7,6 +8,8 @@ import { colors } from 'ts/style/colors';
 
 import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
 import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
+import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
 import { Hamburger } from 'ts/@next/components/hamburger';
 import { Section, Wrap } from 'ts/@next/components/layout';
@@ -43,56 +46,56 @@ const navItems: NavItem[] = [
         id: 'products',
         url: '/next/0x-instant',
         text: 'Products',
-        dropdownComponent: Dropdown,
+        dropdownComponent: DropdownProducts,
     },
     {
         id: 'developers',
         url: '#',
         text: 'Developers',
-        dropdownComponent: Dropdown,
+        dropdownComponent: DropdownDevelopers,
     },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
 ];
 
 export class Header extends React.Component<HeaderProps, HeaderState> {
-    constructor(props: HeaderProps) {
-        super(props);
-        this.state = {
-            isOpen: false,
-        };
-    }
+    public state = {
+        isOpen: false,
+    };
+
     public render(): React.ReactNode {
         return (
-            <StyledHeader isOpen={this.state.isOpen}>
-              <HeaderWrap>
-                <ReactRouterLink to="/next">
-                    <Logo/>
-                </ReactRouterLink>
-
-                <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
-
-                <Nav>
-                    <MobileProductLinksWrap>
-                        {_.map(mobileProductLinks, (link, index) => (
-                            <StyledLink
-                                key={`productlink-${index}`}
-                                href={link.url}
-                                isTransparent={true}
-                                isNoBorder={true}
-                            >
-                            {link.text}
-                            </StyledLink>
-                        ))}
-                    </MobileProductLinksWrap>
-
-                    <StyledButtonWrap>
-                      {_.map(navItems, (link, index) => this._getNavItem(link, index))}
-                    </StyledButtonWrap>
-                </Nav>
-                <TradeButton href="#">Trade on 0x</TradeButton>
-              </HeaderWrap>
-          </StyledHeader>
+            <Headroom>
+                <StyledHeader isOpen={this.state.isOpen}>
+                  <HeaderWrap>
+                    <ReactRouterLink to="/next">
+                        <Logo/>
+                    </ReactRouterLink>
+
+                    <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
+
+                    <Nav>
+                        <MobileProductLinksWrap>
+                            {_.map(mobileProductLinks, (link, index) => (
+                                <StyledLink
+                                    key={`productlink-${index}`}
+                                    href={link.url}
+                                    isTransparent={true}
+                                    isNoBorder={true}
+                                >
+                                {link.text}
+                                </StyledLink>
+                            ))}
+                        </MobileProductLinksWrap>
+
+                        <StyledButtonWrap>
+                          {_.map(navItems, (link, index) => this._getNavItem(link, index))}
+                        </StyledButtonWrap>
+                    </Nav>
+                    <TradeButton href="#">Trade on 0x</TradeButton>
+                  </HeaderWrap>
+              </StyledHeader>
+            </Headroom>
       );
     }
     private _onMenuButtonClick(): void {
@@ -135,6 +138,10 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
             padding: 20px 20px 0 !important;
         }
     }
+
+    @media (min-width: 768px) {
+        background-color: ${props => props.theme.bgColor};
+    }
 `;
 
 const HeaderWrap = styled(Wrap)`
@@ -207,7 +214,7 @@ const LinkWrap = styled.div`
 
 const DropdownWrap = styled.div`
     width: 420px;
-    padding: 30px;
+    padding: 15px 0;
     background-color: #ffffff;
     color: #000000;
     position: absolute;
-- 
cgit 


From 0a05ef36a6ba5989945f2eb99bee52647826cd85 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 10:47:48 +0100
Subject: Cleanup header

---
 packages/website/ts/@next/components/header.tsx | 93 ++++++++++---------------
 1 file changed, 38 insertions(+), 55 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 6444a1b97..9298014f3 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -25,10 +25,6 @@ interface HeaderState {
     isOpen: boolean;
 }
 
-interface HeaderState {
-    isOpen: boolean;
-}
-
 interface NavItem {
     url?: string;
     id?: string;
@@ -47,12 +43,14 @@ const navItems: NavItem[] = [
         url: '/next/0x-instant',
         text: 'Products',
         dropdownComponent: DropdownProducts,
+        dropdownWidth: 280,
     },
     {
         id: 'developers',
         url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
+        dropdownWidth: 420,
     },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
@@ -63,6 +61,36 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         isOpen: false,
     };
 
+    public onMenuButtonClick = (): void => {
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    }
+
+    public getNavItem = (link: NavItem, index: number): React.ReactNode => {
+        const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
+        const Subnav = link.dropdownComponent;
+
+        return (
+            <Wrapper>
+                <Link
+                    key={`nav-${index}`}
+                    href={link.url}
+                    isTransparent={true}
+                    isNoBorder={true}
+                >
+                    {link.text}
+                </Link>
+
+                {link.dropdownComponent &&
+                    <DropdownWrap width={link.dropdownWidth}>
+                        <Subnav />
+                    </DropdownWrap>
+                }
+            </Wrapper>
+        );
+    }
+
     public render(): React.ReactNode {
         return (
             <Headroom>
@@ -72,7 +100,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                         <Logo/>
                     </ReactRouterLink>
 
-                    <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
+                    <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/>
 
                     <Nav>
                         <MobileProductLinksWrap>
@@ -89,7 +117,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                         </MobileProductLinksWrap>
 
                         <StyledButtonWrap>
-                          {_.map(navItems, (link, index) => this._getNavItem(link, index))}
+                          {_.map(navItems, (link, index) => this.getNavItem(link, index))}
                         </StyledButtonWrap>
                     </Nav>
                     <TradeButton href="#">Trade on 0x</TradeButton>
@@ -98,45 +126,13 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
             </Headroom>
       );
     }
-    private _onMenuButtonClick(): void {
-        this.setState({
-            isOpen: !this.state.isOpen,
-        });
-    }
-    private _getNavItem(link: NavItem, index: number): React.ReactNode {
-        const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
-        const Subnav = link.dropdownComponent;
-
-        return (
-            <Wrapper>
-                <StyledLink
-                    key={`nav-${index}`}
-                    href={link.url}
-                    isTransparent={true}
-                    isNoBorder={true}
-                >
-                    {link.text}
-                </StyledLink>
-
-                {link.dropdownComponent &&
-                    <DropdownWrap>
-                        <Subnav />
-                    </DropdownWrap>
-                }
-            </Wrapper>
-        );
-    }
 }
 
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: 768px) {
-        overflow: hidden;
         min-height: ${props => props.isOpen ? '385px' : '70px'};
         position: relative;
         transition: min-height 0.25s ease-in-out;
-        :root & {
-            padding: 20px 20px 0 !important;
-        }
     }
 
     @media (min-width: 768px) {
@@ -157,6 +153,7 @@ const HeaderWrap = styled(Wrap)`
 
 const StyledButtonWrap = styled(ButtonWrap)`
     display: flex;
+
     @media (max-width: 768px) {
         background-color: #022924;
         display: flex;
@@ -166,17 +163,7 @@ const StyledButtonWrap = styled(ButtonWrap)`
         a {
             text-align: left;
             padding-left: 0;
-        }
-    }
-
-    button + button,
-    a + a,
-    a + button,
-    button + a {
-        margin-left: 0;
-
-        @media (min-width: 768px) {
-            margin-left: 10px;
+            margin: 0 !important;
         }
     }
 `;
@@ -213,13 +200,13 @@ const LinkWrap = styled.div`
 `;
 
 const DropdownWrap = styled.div`
-    width: 420px;
+    width: ${props => props.width || 280}px;
     padding: 15px 0;
     background-color: #ffffff;
     color: #000000;
     position: absolute;
     top: 100%;
-    left: calc(50% - 210px);
+    left: calc(50% - ${props => (props.width || 280) / 2}px);
     visibility: hidden;
     opacity: 0;
     transform: translate3d(0, -10px, 0);
@@ -241,10 +228,6 @@ const DropdownWrap = styled.div`
     }
 `;
 
-const StyledLink = styled(Link)`
-
-`;
-
 const Nav = styled.div`
     @media (max-width: 768px) {
         background-color: ${colors.brandDark};
-- 
cgit 


From 3652b8270af8acfe5d09396ea3a7744bfe447c75 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 10:48:28 +0100
Subject: Clean up header

---
 packages/website/ts/@next/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 9298014f3..474d36086 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -105,14 +105,14 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                     <Nav>
                         <MobileProductLinksWrap>
                             {_.map(mobileProductLinks, (link, index) => (
-                                <StyledLink
+                                <Link
                                     key={`productlink-${index}`}
                                     href={link.url}
                                     isTransparent={true}
                                     isNoBorder={true}
                                 >
                                 {link.text}
-                                </StyledLink>
+                                </Link>
                             ))}
                         </MobileProductLinksWrap>
 
-- 
cgit 


From cb2b45bf043b4dd39f656be295c3823988b63a08 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 10:59:37 +0100
Subject: Loop through products dropdown data

---
 packages/website/ts/@next/components/header.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 474d36086..4b5f8d346 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -92,9 +92,11 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     public render(): React.ReactNode {
+        const { isOpen } = this.state;
+
         return (
             <Headroom>
-                <StyledHeader isOpen={this.state.isOpen}>
+                <StyledHeader isOpen={isOpen}>
                   <HeaderWrap>
                     <ReactRouterLink to="/next">
                         <Logo/>
@@ -131,6 +133,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: 768px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
+        overflow: ${props => !props.isOpen && 'hidden'};
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }
-- 
cgit 


From 86acca5e1c37bf24bef393700fbf0909b58b9df3 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 12:11:22 +0100
Subject: WIP dropdown menus

---
 packages/website/ts/@next/components/header.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 4b5f8d346..165cba562 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -6,8 +6,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
-import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { Button, Link } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -50,7 +49,7 @@ const navItems: NavItem[] = [
         url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
-        dropdownWidth: 420,
+        dropdownWidth: 450,
     },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
@@ -154,8 +153,10 @@ const HeaderWrap = styled(Wrap)`
   }
 `;
 
-const StyledButtonWrap = styled(ButtonWrap)`
+const StyledButtonWrap = styled.div`
     display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     @media (max-width: 768px) {
         background-color: #022924;
@@ -166,7 +167,10 @@ const StyledButtonWrap = styled(ButtonWrap)`
         a {
             text-align: left;
             padding-left: 0;
-            margin: 0 !important;
+        }
+
+        a + a {
+            margin-left: 0;
         }
     }
 `;
-- 
cgit 


From 3fb74be4ba4bbb085b4fa70e119cf507a0c503f9 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 12:18:36 +0100
Subject: WIP Header styling, hidden on mobile

---
 packages/website/ts/@next/components/header.tsx | 34 +++++++++++++++----------
 1 file changed, 20 insertions(+), 14 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 165cba562..10e0ec09e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,7 +11,7 @@ import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_devel
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
 import { Hamburger } from 'ts/@next/components/hamburger';
-import { Section, Wrap } from 'ts/@next/components/layout';
+import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { Paragraph } from 'ts/@next/components/text';
 
@@ -130,14 +130,14 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 }
 
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
-    @media (max-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
-        overflow: ${props => !props.isOpen && 'hidden'};
+        overflow: hidden;
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }
 
-    @media (min-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         background-color: ${props => props.theme.bgColor};
     }
 `;
@@ -158,7 +158,7 @@ const StyledButtonWrap = styled.div`
     align-items: center;
     justify-content: space-between;
 
-    @media (max-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         background-color: #022924;
         display: flex;
         flex-wrap: wrap;
@@ -178,7 +178,7 @@ const StyledButtonWrap = styled.div`
 const MobileProductLinksWrap = styled(StyledButtonWrap)`
     display: none;
 
-    @media (max-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         display: block;
         background-color: transparent;
         flex-direction: column;
@@ -197,12 +197,14 @@ const LinkWrap = styled.div`
         display: block;
     }
 
-    &:hover > div {
-        display: block;
-        visibility: visible;
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        transition: opacity 0.35s, transform 0.35s, visibility 0s;
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        &:hover > div {
+            display: block;
+            visibility: visible;
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition: opacity 0.35s, transform 0.35s, visibility 0s;
+        }
     }
 `;
 
@@ -233,10 +235,14 @@ const DropdownWrap = styled.div`
     	border-width: 10px;
     	margin-left: -10px;
     }
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        display: none;
+    }
 `;
 
 const Nav = styled.div`
-    @media (max-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         background-color: ${colors.brandDark};
         position: absolute;
         top: 0;
@@ -249,7 +255,7 @@ const Nav = styled.div`
 const TradeButton = styled(Button)`
     padding: 14px 22px;
 
-    @media (max-width: 768px) {
+    @media (max-width: ${BREAKPOINTS.mobile}) {
         display: none;
     }
 `;
-- 
cgit 


From a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 13:33:38 +0100
Subject: Dropdown menu theming

---
 packages/website/ts/@next/components/header.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 10e0ec09e..52207ddce 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -211,8 +211,10 @@ const LinkWrap = styled.div`
 const DropdownWrap = styled.div`
     width: ${props => props.width || 280}px;
     padding: 15px 0;
-    background-color: #ffffff;
-    color: #000000;
+    border: 1px solid transparent;
+    border-color: ${props => props.theme.dropdownBorderColor};
+    background-color: ${props => props.theme.dropdownBg};
+    color: ${props => props.theme.dropdownColor};
     position: absolute;
     top: 100%;
     left: calc(50% - ${props => (props.width || 280) / 2}px);
@@ -221,7 +223,7 @@ const DropdownWrap = styled.div`
     transform: translate3d(0, -10px, 0);
     transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
 
-    &:after {
+    &:after, &:before {
     	bottom: 100%;
     	left: 50%;
     	border: solid transparent;
@@ -230,11 +232,19 @@ const DropdownWrap = styled.div`
     	width: 0;
     	position: absolute;
     	pointer-events: none;
+    }
+    &:after {
     	border-color: rgba(255, 255, 255, 0);
-    	border-bottom-color: #ffffff;
+    	border-bottom-color: ${props => props.theme.dropdownBg};
     	border-width: 10px;
     	margin-left: -10px;
     }
+    &:before {
+    	border-color: rgba(255, 0, 0, 0);
+    	border-bottom-color: ${props => props.theme.dropdownBorderColor};
+    	border-width: 11px;
+    	margin-left: -11px;
+    }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
         display: none;
-- 
cgit 


From 2471d4098fcbdc3735f77254f7f0cfcb9d597f9d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Tue, 11 Dec 2018 14:40:55 +0100
Subject: Add missing keys

---
 packages/website/ts/@next/components/header.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 52207ddce..bce5ccec7 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -71,9 +71,8 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         const Subnav = link.dropdownComponent;
 
         return (
-            <Wrapper>
+            <Wrapper key={`nav-${index}`}>
                 <Link
-                    key={`nav-${index}`}
                     href={link.url}
                     isTransparent={true}
                     isNoBorder={true}
-- 
cgit 


From 1d6e66d93708e5fcab392137a95ca40a31ad6881 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 15:16:59 +0100
Subject: Change header button color based on theme

---
 packages/website/ts/@next/components/header.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index bce5ccec7..b0dabf98d 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import * as React from 'react';
 import Headroom from 'react-headroom';
 import { Link as ReactRouterLink } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
@@ -55,7 +55,7 @@ const navItems: NavItem[] = [
     { id: 'blog', url: '#', text: 'Blog' },
 ];
 
-export class Header extends React.Component<HeaderProps, HeaderState> {
+class HeaderBase extends React.Component<HeaderProps, HeaderState> {
     public state = {
         isOpen: false,
     };
@@ -91,6 +91,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 
     public render(): React.ReactNode {
         const { isOpen } = this.state;
+        const { theme } = this.props;
 
         return (
             <Headroom>
@@ -120,7 +121,15 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                           {_.map(navItems, (link, index) => this.getNavItem(link, index))}
                         </StyledButtonWrap>
                     </Nav>
-                    <TradeButton href="#">Trade on 0x</TradeButton>
+
+                    <TradeButton
+                        bgColor={theme.headerButtonBg}
+                        color="#ffffff"
+                        href="#"
+                    >
+                        Trade on 0x
+                    </TradeButton>
+
                   </HeaderWrap>
               </StyledHeader>
             </Headroom>
@@ -128,6 +137,8 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 }
 
+export const Header = withTheme(HeaderBase);
+
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: ${BREAKPOINTS.mobile}) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
-- 
cgit 


From bc64c9566c4f1410dc7c22e287533473a6052085 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 16:18:10 +0100
Subject: Header changes, mobile alignments

---
 packages/website/ts/@next/components/header.tsx | 39 ++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b0dabf98d..73f615643 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -36,7 +36,11 @@ const mobileProductLinks = [
 ];
 
 const navItems: NavItem[] = [
-    { id: 'why', url: '/next/why', text: 'Why 0x' },
+    {
+        id: 'why',
+        url: '/next/why',
+        text: 'Why 0x',
+    },
     {
         id: 'products',
         url: '/next/0x-instant',
@@ -49,10 +53,18 @@ const navItems: NavItem[] = [
         url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
-        dropdownWidth: 450,
+        dropdownWidth: 480,
+    },
+    {
+        id: 'about',
+        url: '/next/about/mission',
+        text: 'About',
+    },
+    {
+        id: 'blog',
+        url: '#',
+        text: 'Blog',
     },
-    { id: 'about', url: '/next/about/mission', text: 'About' },
-    { id: 'blog', url: '#', text: 'Blog' },
 ];
 
 class HeaderBase extends React.Component<HeaderProps, HeaderState> {
@@ -72,13 +84,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
         return (
             <Wrapper key={`nav-${index}`}>
-                <Link
+                <NavLink
                     href={link.url}
                     isTransparent={true}
                     isNoBorder={true}
                 >
                     {link.text}
-                </Link>
+                </NavLink>
 
                 {link.dropdownComponent &&
                     <DropdownWrap width={link.dropdownWidth}>
@@ -118,7 +130,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         </MobileProductLinksWrap>
 
                         <StyledButtonWrap>
-                          {_.map(navItems, (link, index) => this.getNavItem(link, index))}
+                          {_.map(navItems, (link, index) => (
+                              this.getNavItem(link, index)
+                          ))}
                         </StyledButtonWrap>
                     </Nav>
 
@@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     }
 `;
 
+const NavLink = styled(Link).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    opacity: 0.5;
+    transition: opacity 0.35s;
+
+    &:hover {
+        opacity: 1;
+    }
+`;
+
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
-- 
cgit 


From 25f66f96b6635fcca27fc90fcded8449615d731e Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 17:00:44 +0100
Subject: Removes headroom

---
 packages/website/ts/@next/components/header.tsx | 81 ++++++++++++-------------
 1 file changed, 39 insertions(+), 42 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 73f615643..33129ce48 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import * as React from 'react';
-import Headroom from 'react-headroom';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
@@ -106,47 +105,45 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
         const { theme } = this.props;
 
         return (
-            <Headroom>
-                <StyledHeader isOpen={isOpen}>
-                  <HeaderWrap>
-                    <ReactRouterLink to="/next">
-                        <Logo/>
-                    </ReactRouterLink>
-
-                    <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/>
-
-                    <Nav>
-                        <MobileProductLinksWrap>
-                            {_.map(mobileProductLinks, (link, index) => (
-                                <Link
-                                    key={`productlink-${index}`}
-                                    href={link.url}
-                                    isTransparent={true}
-                                    isNoBorder={true}
-                                >
-                                {link.text}
-                                </Link>
-                            ))}
-                        </MobileProductLinksWrap>
-
-                        <StyledButtonWrap>
-                          {_.map(navItems, (link, index) => (
-                              this.getNavItem(link, index)
-                          ))}
-                        </StyledButtonWrap>
-                    </Nav>
-
-                    <TradeButton
-                        bgColor={theme.headerButtonBg}
-                        color="#ffffff"
-                        href="#"
-                    >
-                        Trade on 0x
-                    </TradeButton>
-
-                  </HeaderWrap>
-              </StyledHeader>
-            </Headroom>
+            <StyledHeader isOpen={isOpen}>
+              <HeaderWrap>
+                <ReactRouterLink to="/next">
+                    <Logo/>
+                </ReactRouterLink>
+
+                <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/>
+
+                <Nav>
+                    <MobileProductLinksWrap>
+                        {_.map(mobileProductLinks, (link, index) => (
+                            <Link
+                                key={`productlink-${index}`}
+                                href={link.url}
+                                isTransparent={true}
+                                isNoBorder={true}
+                            >
+                            {link.text}
+                            </Link>
+                        ))}
+                    </MobileProductLinksWrap>
+
+                    <StyledButtonWrap>
+                      {_.map(navItems, (link, index) => (
+                          this.getNavItem(link, index)
+                      ))}
+                    </StyledButtonWrap>
+                </Nav>
+
+                <TradeButton
+                    bgColor={theme.headerButtonBg}
+                    color="#ffffff"
+                    href="#"
+                >
+                    Trade on 0x
+                </TradeButton>
+
+              </HeaderWrap>
+          </StyledHeader>
       );
     }
 }
-- 
cgit 


From 26c9cd3cb2dcc21763977543e83c54f4bc32d679 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 17:02:29 +0100
Subject: dropdown z-index

---
 packages/website/ts/@next/components/header.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 33129ce48..c4f30b7b3 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -254,6 +254,7 @@ const DropdownWrap = styled.div`
     opacity: 0;
     transform: translate3d(0, -10px, 0);
     transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
+    z-index: 9999;
 
     &:after, &:before {
     	bottom: 100%;
-- 
cgit 


From 088ca6ce7cb36b26981c719460f01f3da6e00198 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 13:08:52 +0100
Subject: Added a bunch of types

---
 packages/website/ts/@next/components/header.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c4f30b7b3..3d9f2055c 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -27,6 +27,12 @@ interface NavItem {
     url?: string;
     id?: string;
     text?: string;
+    dropdownWidth?: number;
+    dropdownComponent?: React.ReactNode;
+}
+
+interface DropdownWrapInterface {
+    width?: number;
 }
 
 const mobileProductLinks = [
@@ -240,7 +246,7 @@ const LinkWrap = styled.div`
     }
 `;
 
-const DropdownWrap = styled.div`
+const DropdownWrap = styled.div<DropdownWrapInterface>`
     width: ${props => props.width || 280}px;
     padding: 15px 0;
     border: 1px solid transparent;
-- 
cgit 


From 6d2da94f8a1bd2b80b548f6484e94173c4627adb Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 16:06:31 +0100
Subject: Fix header link active state

---
 packages/website/ts/@next/components/header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 3d9f2055c..6e9616e21 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button, Link } from 'ts/@next/components/button';
+import { Button, Link, NavLink } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -89,13 +89,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
         return (
             <Wrapper key={`nav-${index}`}>
-                <NavLink
+                <StyledNavLink
                     href={link.url}
                     isTransparent={true}
                     isNoBorder={true}
                 >
                     {link.text}
-                </NavLink>
+                </StyledNavLink>
 
                 {link.dropdownComponent &&
                     <DropdownWrap width={link.dropdownWidth}>
@@ -169,7 +169,7 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     }
 `;
 
-const NavLink = styled(Link).attrs({
+const StyledNavLink = styled(NavLink).attrs({
     activeStyle: { opacity: 1 },
 })`
     opacity: 0.5;
-- 
cgit 


From bf56a2c7c49ec2817adedea359b7750a8ced15d7 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Wed, 12 Dec 2018 16:47:12 +0100
Subject: Header mobile styling

---
 packages/website/ts/@next/components/header.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 6e9616e21..7660c0d40 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -157,14 +157,14 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 export const Header = withTheme(HeaderBase);
 
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
         overflow: hidden;
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: ${props => props.theme.bgColor};
     }
 `;
@@ -184,7 +184,7 @@ const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
 
-  @media (max-width: 768px) {
+  @media (max-width: 800px) {
       padding-top: 0;
       display: flex;
       padding-bottom: 0;
@@ -196,7 +196,7 @@ const StyledButtonWrap = styled.div`
     align-items: center;
     justify-content: space-between;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: #022924;
         display: flex;
         flex-wrap: wrap;
@@ -216,7 +216,7 @@ const StyledButtonWrap = styled.div`
 const MobileProductLinksWrap = styled(StyledButtonWrap)`
     display: none;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         display: block;
         background-color: transparent;
         flex-direction: column;
@@ -235,7 +235,7 @@ const LinkWrap = styled.div`
         display: block;
     }
 
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 800px) {
         &:hover > div {
             display: block;
             visibility: visible;
@@ -291,7 +291,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 `;
 
 const Nav = styled.div`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: ${colors.brandDark};
         position: absolute;
         top: 0;
@@ -304,7 +304,7 @@ const Nav = styled.div`
 const TradeButton = styled(Button)`
     padding: 14px 22px;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 928px) {
         display: none;
     }
 `;
-- 
cgit 


From 5bd185e8319f654d1691b021d38c934983a1f107 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 10:54:18 +0100
Subject: Adds images in instant page

---
 packages/website/ts/@next/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 7660c0d40..44686686f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -67,7 +67,7 @@ const navItems: NavItem[] = [
     },
     {
         id: 'blog',
-        url: '#',
+        url: 'https://blog.0xproject.com/latest',
         text: 'Blog',
     },
 ];
@@ -143,7 +143,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                 <TradeButton
                     bgColor={theme.headerButtonBg}
                     color="#ffffff"
-                    href="#"
+                    href="https://0xproject.com/portal"
                 >
                     Trade on 0x
                 </TradeButton>
-- 
cgit 


From b4b1d54e49ff3d6c146b257ddb918fca5ddb1329 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 12:33:45 +0100
Subject: WIP refactor mobileNavMenu

---
 packages/website/ts/@next/components/header.tsx | 62 +++++++++++--------------
 1 file changed, 27 insertions(+), 35 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 44686686f..d596d43ca 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -14,6 +14,8 @@ import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { Paragraph } from 'ts/@next/components/text';
 
+import { MobileNav } from 'ts/@next/components/mobileNav';
+
 interface HeaderProps {
     isOpen: boolean;
     location?: Location;
@@ -108,47 +110,32 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
     public render(): React.ReactNode {
         const { isOpen } = this.state;
-        const { theme } = this.props;
+        const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
             <StyledHeader isOpen={isOpen}>
-              <HeaderWrap>
-                <ReactRouterLink to="/next">
-                    <Logo/>
-                </ReactRouterLink>
-
-                <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/>
-
-                <Nav>
-                    <MobileProductLinksWrap>
-                        {_.map(mobileProductLinks, (link, index) => (
-                            <Link
-                                key={`productlink-${index}`}
-                                href={link.url}
-                                isTransparent={true}
-                                isNoBorder={true}
-                            >
-                            {link.text}
-                            </Link>
-                        ))}
-                    </MobileProductLinksWrap>
+                <HeaderWrap>
+                    <ReactRouterLink to="/next">
+                        <Logo/>
+                    </ReactRouterLink>
 
                     <StyledButtonWrap>
-                      {_.map(navItems, (link, index) => (
+                        {_.map(navItems, (link, index) => (
                           this.getNavItem(link, index)
-                      ))}
+                        ))}
                     </StyledButtonWrap>
-                </Nav>
 
-                <TradeButton
-                    bgColor={theme.headerButtonBg}
-                    color="#ffffff"
-                    href="https://0xproject.com/portal"
-                >
-                    Trade on 0x
-                </TradeButton>
-
-              </HeaderWrap>
+                    <TradeButton
+                        bgColor={theme.headerButtonBg}
+                        color="#ffffff"
+                        href="https://0xproject.com/portal"
+                    >
+                        Trade on 0x
+                    </TradeButton>
+
+                    <Hamburger onClick={toggleMobileNav}/>
+                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                </HeaderWrap>
           </StyledHeader>
       );
     }
@@ -196,6 +183,11 @@ const StyledButtonWrap = styled.div`
     align-items: center;
     justify-content: space-between;
 
+    @media (max-width: 800px) {
+        display: none;
+    }
+
+/*
     @media (max-width: 800px) {
         background-color: #022924;
         display: flex;
@@ -210,7 +202,7 @@ const StyledButtonWrap = styled.div`
         a + a {
             margin-left: 0;
         }
-    }
+    } */
 `;
 
 const MobileProductLinksWrap = styled(StyledButtonWrap)`
@@ -292,7 +284,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 
 const Nav = styled.div`
     @media (max-width: 800px) {
-        background-color: ${colors.brandDark};
+        background-color: ${props => props.theme.bgColor};
         position: absolute;
         top: 0;
         left: 0;
-- 
cgit 


From 6f7e27bd7fbb0e28acb245bec3b18cf944e24523 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 13:52:55 +0100
Subject: Tweak z-index

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index d596d43ca..72082ce9f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -252,7 +252,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
     opacity: 0;
     transform: translate3d(0, -10px, 0);
     transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
-    z-index: 9999;
+    z-index: 20;
 
     &:after, &:before {
     	bottom: 100%;
-- 
cgit 


From 81690d1ce508fc40ab90aff3539359efe7a93dba Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 16:39:03 +0100
Subject: Removes <Link> component, clean up Button.tsx

---
 packages/website/ts/@next/components/header.tsx | 135 +++++++++---------------
 1 file changed, 48 insertions(+), 87 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 72082ce9f..35d53d21f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button, Link, NavLink } from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -85,29 +85,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
         });
     }
 
-    public getNavItem = (link: NavItem, index: number): React.ReactNode => {
-        const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
-        const Subnav = link.dropdownComponent;
-
-        return (
-            <Wrapper key={`nav-${index}`}>
-                <StyledNavLink
-                    href={link.url}
-                    isTransparent={true}
-                    isNoBorder={true}
-                >
-                    {link.text}
-                </StyledNavLink>
-
-                {link.dropdownComponent &&
-                    <DropdownWrap width={link.dropdownWidth}>
-                        <Subnav />
-                    </DropdownWrap>
-                }
-            </Wrapper>
-        );
-    }
-
     public render(): React.ReactNode {
         const { isOpen } = this.state;
         const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -121,7 +98,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
                     <StyledButtonWrap>
                         {_.map(navItems, (link, index) => (
-                          this.getNavItem(link, index)
+                            <NavItem link={link} index={index} />
                         ))}
                     </StyledButtonWrap>
 
@@ -143,6 +120,30 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
+const NavItem = (props): React.ReactNode => {
+    const { link, index } = props;
+    const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
+    const Subnav = link.dropdownComponent;
+
+    return (
+        <Wrapper key={`nav-${index}`}>
+            <StyledNavLink
+                to={link.url}
+                isTransparent={true}
+                isNoBorder={true}
+            >
+                {link.text}
+            </StyledNavLink>
+
+            {link.dropdownComponent &&
+                <DropdownWrap width={link.dropdownWidth}>
+                    <Subnav />
+                </DropdownWrap>
+            }
+        </Wrapper>
+    );
+};
+
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: 800px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
@@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     }
 `;
 
-const StyledNavLink = styled(NavLink).attrs({
+const LinkWrap = styled.div`
+    position: relative;
+
+    a {
+        display: block;
+    }
+
+    @media (min-width: 800px) {
+        &:hover > div {
+            display: block;
+            visibility: visible;
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition: opacity 0.35s, transform 0.35s, visibility 0s;
+        }
+    }
+`;
+
+const StyledNavLink = styled(ReactRouterLink).attrs({
     activeStyle: { opacity: 1 },
 })`
+    color: ${props => props.theme.textColor};
     opacity: 0.5;
     transition: opacity 0.35s;
+    padding: 15px 0;
+    margin: 0 30px;
 
     &:hover {
         opacity: 1;
@@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div`
     @media (max-width: 800px) {
         display: none;
     }
-
-/*
-    @media (max-width: 800px) {
-        background-color: #022924;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 20px 20px;
-
-        a {
-            text-align: left;
-            padding-left: 0;
-        }
-
-        a + a {
-            margin-left: 0;
-        }
-    } */
-`;
-
-const MobileProductLinksWrap = styled(StyledButtonWrap)`
-    display: none;
-
-    @media (max-width: 800px) {
-        display: block;
-        background-color: transparent;
-        flex-direction: column;
-
-        a {
-            display: block;
-            width: 100%;
-        }
-    }
-`;
-
-const LinkWrap = styled.div`
-    position: relative;
-
-    a {
-        display: block;
-    }
-
-    @media (min-width: 800px) {
-        &:hover > div {
-            display: block;
-            visibility: visible;
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-            transition: opacity 0.35s, transform 0.35s, visibility 0s;
-        }
-    }
 `;
 
 const DropdownWrap = styled.div<DropdownWrapInterface>`
@@ -282,17 +254,6 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
     }
 `;
 
-const Nav = styled.div`
-    @media (max-width: 800px) {
-        background-color: ${props => props.theme.bgColor};
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        padding-top: 65px;
-    }
-`;
-
 const TradeButton = styled(Button)`
     padding: 14px 22px;
 
-- 
cgit 


From 1647400a497d52478514920208723c0121d2f842 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 16:50:19 +0100
Subject: Just forces that header button to behave

---
 packages/website/ts/@next/components/header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 35d53d21f..d7046ec7a 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -255,9 +255,9 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 `;
 
 const TradeButton = styled(Button)`
-    padding: 14px 22px;
+    padding: 14px 22px !important;
 
-    @media (max-width: 928px) {
-        display: none;
+    @media (max-width: 990px) {
+        display: none !important;
     }
 `;
-- 
cgit 


From 803086da5769c7cad2b4bbb80496ea58b353e5b8 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 17:27:40 +0100
Subject: Cleans up as much as old layout

---
 packages/website/ts/@next/components/header.tsx | 43 ++++++++++++-------------
 1 file changed, 20 insertions(+), 23 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index d7046ec7a..c5c67ac80 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -3,18 +3,14 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
 import { Button } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
-import { Dropdown } from 'ts/@next/components/dropdowns/mock';
 import { Hamburger } from 'ts/@next/components/hamburger';
-import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
-import { Paragraph } from 'ts/@next/components/text';
-
 import { MobileNav } from 'ts/@next/components/mobileNav';
+import { FlexWrap } from 'ts/@next/components/newLayout';
+import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
     isOpen: boolean;
@@ -96,11 +92,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         <Logo/>
                     </ReactRouterLink>
 
-                    <StyledButtonWrap>
+                    <NavLinks>
                         {_.map(navItems, (link, index) => (
-                            <NavItem link={link} index={index} />
+                            <NavItem
+                                key={`navlink-${index}`}
+                                link={link}
+                                index={index}
+                            />
                         ))}
-                    </StyledButtonWrap>
+                    </NavLinks>
 
                     <TradeButton
                         bgColor={theme.headerButtonBg}
@@ -113,8 +113,8 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                     <Hamburger onClick={toggleMobileNav}/>
                     <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
                 </HeaderWrap>
-          </StyledHeader>
-      );
+            </StyledHeader>
+        );
     }
 }
 
@@ -122,11 +122,10 @@ export const Header = withTheme(HeaderBase);
 
 const NavItem = (props): React.ReactNode => {
     const { link, index } = props;
-    const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
     const Subnav = link.dropdownComponent;
 
     return (
-        <Wrapper key={`nav-${index}`}>
+        <LinkWrap key={`nav-${index}`}>
             <StyledNavLink
                 to={link.url}
                 isTransparent={true}
@@ -140,24 +139,22 @@ const NavItem = (props): React.ReactNode => {
                     <Subnav />
                 </DropdownWrap>
             }
-        </Wrapper>
+        </LinkWrap>
     );
 };
 
-const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
+const StyledHeader = styled.header<HeaderProps>`
+    padding: 30px;
+
     @media (max-width: 800px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
         overflow: hidden;
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }
-
-    @media (max-width: 800px) {
-        background-color: ${props => props.theme.bgColor};
-    }
 `;
 
-const LinkWrap = styled.div`
+const LinkWrap = styled.li`
     position: relative;
 
     a {
@@ -189,7 +186,7 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
     }
 `;
 
-const HeaderWrap = styled(Wrap)`
+const HeaderWrap = styled(FlexWrap)`
   justify-content: space-between;
   align-items: center;
 
@@ -200,7 +197,7 @@ const HeaderWrap = styled(Wrap)`
   }
 `;
 
-const StyledButtonWrap = styled.div`
+const NavLinks = styled.ul`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -249,7 +246,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
     	margin-left: -11px;
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         display: none;
     }
 `;
-- 
cgit 


From f4a95c295c427c00a5cb2df83ad145886a9d1bf4 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 18:22:36 +0100
Subject: WIP Begin cleanup, adds mediaquery component

---
 packages/website/ts/@next/components/header.tsx | 35 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c5c67ac80..c16e2f7b4 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
@@ -10,11 +11,15 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
+import { ThemeInteface } from 'ts/@next/components/siteWrap';
 import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
-    isOpen: boolean;
+    isOpen?: boolean;
     location?: Location;
+    isNavToggled?: boolean;
+    toggleMobileNav: () => void;
+    theme: ThemeInterface;
 }
 
 interface HeaderState {
@@ -89,7 +94,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
             <StyledHeader isOpen={isOpen}>
                 <HeaderWrap>
                     <ReactRouterLink to="/next">
-                        <Logo/>
+                        <Logo />
                     </ReactRouterLink>
 
                     <NavLinks>
@@ -102,13 +107,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         ))}
                     </NavLinks>
 
-                    <TradeButton
-                        bgColor={theme.headerButtonBg}
-                        color="#ffffff"
-                        href="https://0xproject.com/portal"
-                    >
-                        Trade on 0x
-                    </TradeButton>
+                    <MediaQuery minWidth={990}>
+                        <TradeButton
+                            bgColor={theme.headerButtonBg}
+                            color="#ffffff"
+                            href="https://0xproject.com/portal"
+                        >
+                            Trade on 0x
+                        </TradeButton>
+                    </MediaQuery>
 
                     <Hamburger onClick={toggleMobileNav}/>
                     <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
@@ -120,12 +127,12 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props): React.ReactNode => {
-    const { link, index } = props;
+const NavItem = (props: NavItem): React.ReactNode => {
+    const { link } = props;
     const Subnav = link.dropdownComponent;
 
     return (
-        <LinkWrap key={`nav-${index}`}>
+        <LinkWrap>
             <StyledNavLink
                 to={link.url}
                 isTransparent={true}
@@ -253,8 +260,4 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 
 const TradeButton = styled(Button)`
     padding: 14px 22px !important;
-
-    @media (max-width: 990px) {
-        display: none !important;
-    }
 `;
-- 
cgit 


From ac1786585e24528e34f61a3edc63ad4605cf015a Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 13 Dec 2018 18:44:18 +0100
Subject: [WIP] cleanup, typing

---
 packages/website/ts/@next/components/header.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c16e2f7b4..b982538da 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,14 +11,14 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeInteface } from 'ts/@next/components/siteWrap';
+import { ThemeInterface } from 'ts/@next/components/siteWrap';
 import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
     isOpen?: boolean;
     location?: Location;
     isNavToggled?: boolean;
-    toggleMobileNav: () => void;
+    toggleMobileNav?: () => void;
     theme: ThemeInterface;
 }
 
@@ -117,7 +117,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         </TradeButton>
                     </MediaQuery>
 
-                    <Hamburger onClick={toggleMobileNav}/>
+                    <Hamburger isOpen={isOpen} onClick={toggleMobileNav}/>
                     <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
                 </HeaderWrap>
             </StyledHeader>
@@ -127,17 +127,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: NavItem): React.ReactNode => {
+const NavItem = (props: { link: NavItem }): React.ReactNode => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
     return (
         <LinkWrap>
-            <StyledNavLink
-                to={link.url}
-                isTransparent={true}
-                isNoBorder={true}
-            >
+            <StyledNavLink to={link.url}>
                 {link.text}
             </StyledNavLink>
 
-- 
cgit 


From 66480ccb1e0dc72e6716060ab472b7584bfa910c Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 11:26:59 +0100
Subject: Linting fixes

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b982538da..437f9f19e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -127,7 +127,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: { link: NavItem }): React.ReactNode => {
+const NavItem = (props: { link: NavItem; key: string }): React.ReactNode => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
-- 
cgit 


From 106df4cdaf002d949a2ba1aa73a5cdbb5f443f03 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 11:41:05 +0100
Subject: Linting fix

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 437f9f19e..881ec799e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -127,7 +127,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: { link: NavItem; key: string }): React.ReactNode => {
+const NavItem = (props: { link: NavItem; key: string }) => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
-- 
cgit 


From fab3a90d5add060f2bfeb1dc470373af03fd6d83 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 12:55:06 +0100
Subject: Adds mission office photo

---
 packages/website/ts/@next/components/header.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 881ec799e..fc754af7e 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -102,7 +102,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                             <NavItem
                                 key={`navlink-${index}`}
                                 link={link}
-                                index={index}
                             />
                         ))}
                     </NavLinks>
-- 
cgit 


From 8948029dd78cad2a984853a1123ecd7416b5459d Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 13:32:18 +0100
Subject: REplaces links as navlinks in header

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index fc754af7e..97356f4b2 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import * as React from 'react';
 import MediaQuery from 'react-responsive';
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { NavLink as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
 import { Button } from 'ts/@next/components/button';
-- 
cgit 


From 6db28c530066454e84738451dc66bbdf29243b2d Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 16:06:06 +0100
Subject: Fix mobile nav hamburger open state

---
 packages/website/ts/@next/components/header.tsx | 29 +++----------------------
 1 file changed, 3 insertions(+), 26 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 97356f4b2..ced2aee76 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -15,17 +15,12 @@ import { ThemeInterface } from 'ts/@next/components/siteWrap';
 import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
-    isOpen?: boolean;
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
     theme: ThemeInterface;
 }
 
-interface HeaderState {
-    isOpen: boolean;
-}
-
 interface NavItem {
     url?: string;
     id?: string;
@@ -75,23 +70,12 @@ const navItems: NavItem[] = [
     },
 ];
 
-class HeaderBase extends React.Component<HeaderProps, HeaderState> {
-    public state = {
-        isOpen: false,
-    };
-
-    public onMenuButtonClick = (): void => {
-        this.setState({
-            isOpen: !this.state.isOpen,
-        });
-    }
-
+class HeaderBase extends React.Component<HeaderProps> {
     public render(): React.ReactNode {
-        const { isOpen } = this.state;
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <StyledHeader isOpen={isOpen}>
+            <StyledHeader>
                 <HeaderWrap>
                     <ReactRouterLink to="/next">
                         <Logo />
@@ -116,7 +100,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
                         </TradeButton>
                     </MediaQuery>
 
-                    <Hamburger isOpen={isOpen} onClick={toggleMobileNav}/>
+                    <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
                     <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
                 </HeaderWrap>
             </StyledHeader>
@@ -147,13 +131,6 @@ const NavItem = (props: { link: NavItem; key: string }) => {
 
 const StyledHeader = styled.header<HeaderProps>`
     padding: 30px;
-
-    @media (max-width: 800px) {
-        min-height: ${props => props.isOpen ? '385px' : '70px'};
-        overflow: hidden;
-        position: relative;
-        transition: min-height 0.25s ease-in-out;
-    }
 `;
 
 const LinkWrap = styled.li`
-- 
cgit 


From bdc8f9aa2ad0e75fe7530a1f81da21e66cd99c4e Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 17:43:56 +0100
Subject: Cleanup

---
 packages/website/ts/@next/components/header.tsx | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index ced2aee76..368b1e665 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -12,7 +12,6 @@ import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
 import { ThemeInterface } from 'ts/@next/components/siteWrap';
-import { Paragraph } from 'ts/@next/components/text';
 
 interface HeaderProps {
     location?: Location;
@@ -33,11 +32,6 @@ interface DropdownWrapInterface {
     width?: number;
 }
 
-const mobileProductLinks = [
-    { url: '/next/0x-instant', text: '0x Instant' },
-    { url: '/next/launch-kit', text: '0x Launch Kit' },
-];
-
 const navItems: NavItem[] = [
     {
         id: 'why',
-- 
cgit 


From f0581285d0580062b29af3e0d5bc3af9d9e57d0d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 20:53:29 +0100
Subject: Type fixes

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 368b1e665..dae2741e4 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => {
 
             {link.dropdownComponent &&
                 <DropdownWrap width={link.dropdownWidth}>
-                    <Subnav />
+                    {Subnav}
                 </DropdownWrap>
             }
         </LinkWrap>
-- 
cgit 


From b07892bb48475e461e07926315a2e43ea5cfb46f Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 21:33:08 +0100
Subject: Type fixes

---
 packages/website/ts/@next/components/header.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index dae2741e4..047f759c9 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -11,16 +11,16 @@ import { Hamburger } from 'ts/@next/components/hamburger';
 import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
-import { ThemeInterface } from 'ts/@next/components/siteWrap';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
 
 interface HeaderProps {
     location?: Location;
     isNavToggled?: boolean;
     toggleMobileNav?: () => void;
-    theme: ThemeInterface;
+    theme: ThemeValuesInterface;
 }
 
-interface NavItem {
+interface NavItemProps {
     url?: string;
     id?: string;
     text?: string;
@@ -32,7 +32,7 @@ interface DropdownWrapInterface {
     width?: number;
 }
 
-const navItems: NavItem[] = [
+const navItems: NavItemProps[] = [
     {
         id: 'why',
         url: '/next/why',
@@ -104,7 +104,7 @@ class HeaderBase extends React.Component<HeaderProps> {
 
 export const Header = withTheme(HeaderBase);
 
-const NavItem = (props: { link: NavItem; key: string }) => {
+const NavItem = (props: { link: NavItemProps; key: string }) => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
 
@@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => {
 
             {link.dropdownComponent &&
                 <DropdownWrap width={link.dropdownWidth}>
-                    {Subnav}
+                    <Subnav />
                 </DropdownWrap>
             }
         </LinkWrap>
-- 
cgit 


From 8570616d9765584e91c2fcfced398a6289536464 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 22:39:04 +0100
Subject: Update links

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 047f759c9..b31d34765 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -40,7 +40,7 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'products',
-        url: '/next/0x-instant',
+        url: '/next/instant',
         text: 'Products',
         dropdownComponent: DropdownProducts,
         dropdownWidth: 280,
-- 
cgit 


From b9fa158092c0179d41f5cf7b4f62eec95dd7f4f6 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 23:03:45 +0100
Subject: Update links and routes

---
 packages/website/ts/@next/components/header.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index b31d34765..c5615e61f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -12,6 +12,7 @@ import { Logo } from 'ts/@next/components/logo';
 import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
 import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
+import { WebsitePaths } from 'ts/types';
 
 interface HeaderProps {
     location?: Location;
@@ -35,12 +36,12 @@ interface DropdownWrapInterface {
 const navItems: NavItemProps[] = [
     {
         id: 'why',
-        url: '/next/why',
+        url: WebsitePaths.Why,
         text: 'Why 0x',
     },
     {
         id: 'products',
-        url: '/next/instant',
+        url: '#',
         text: 'Products',
         dropdownComponent: DropdownProducts,
         dropdownWidth: 280,
@@ -54,7 +55,7 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'about',
-        url: '/next/about/mission',
+        url: WebsitePaths.AboutMission,
         text: 'About',
     },
     {
-- 
cgit 


From f7ceb4cf582debf2521ef4797674e31a86ff6a38 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 23:38:21 +0100
Subject: Fix logo link

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c5615e61f..568c279bd 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -72,7 +72,7 @@ class HeaderBase extends React.Component<HeaderProps> {
         return (
             <StyledHeader>
                 <HeaderWrap>
-                    <ReactRouterLink to="/next">
+                    <ReactRouterLink to={WebsitePaths.Home}>
                         <Logo />
                     </ReactRouterLink>
 
-- 
cgit 


From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 14 Dec 2018 14:46:05 -0800
Subject: fix(website) replace 0xproject.com with 0x.org

---
 packages/website/ts/@next/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 568c279bd..fde549642 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -60,7 +60,7 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'blog',
-        url: 'https://blog.0xproject.com/latest',
+        url: 'https://blog.0x.org/latest',
         text: 'Blog',
     },
 ];
@@ -89,7 +89,7 @@ class HeaderBase extends React.Component<HeaderProps> {
                         <TradeButton
                             bgColor={theme.headerButtonBg}
                             color="#ffffff"
-                            href="https://0xproject.com/portal"
+                            href="https://0x.org/portal"
                         >
                             Trade on 0x
                         </TradeButton>
-- 
cgit 


From 96d89ddade8c993dd0977c37a58eac60e9db383b Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 17 Dec 2018 11:07:00 +0100
Subject: Fix portal link

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index fde549642..d5894f65a 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -89,7 +89,7 @@ class HeaderBase extends React.Component<HeaderProps> {
                         <TradeButton
                             bgColor={theme.headerButtonBg}
                             color="#ffffff"
-                            href="https://0x.org/portal"
+                            href="/portal"
                         >
                             Trade on 0x
                         </TradeButton>
-- 
cgit 


From 312d864936a0f930a09dcb0739f0e498ea42feac Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 17:31:06 +0100
Subject: Fixes mobile nav overflow on mobile

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index d5894f65a..f6895d242 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -70,7 +70,7 @@ class HeaderBase extends React.Component<HeaderProps> {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <StyledHeader>
+            <StyledHeader isNavToggled={isNavToggled}>
                 <HeaderWrap>
                     <ReactRouterLink to={WebsitePaths.Home}>
                         <Logo />
-- 
cgit 


From 5e4defefb06ed886573abeb61ac5036836150f34 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 18:06:30 +0100
Subject: Adds headroom instead for toggling nav visibility

---
 packages/website/ts/@next/components/header.tsx | 63 +++++++++++++------------
 1 file changed, 34 insertions(+), 29 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index f6895d242..035eebe53 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -4,6 +4,8 @@ import MediaQuery from 'react-responsive';
 import { NavLink as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
+import Headroom from 'react-headroom';
+
 import { Button } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
@@ -70,35 +72,37 @@ class HeaderBase extends React.Component<HeaderProps> {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <StyledHeader isNavToggled={isNavToggled}>
-                <HeaderWrap>
-                    <ReactRouterLink to={WebsitePaths.Home}>
-                        <Logo />
-                    </ReactRouterLink>
-
-                    <NavLinks>
-                        {_.map(navItems, (link, index) => (
-                            <NavItem
-                                key={`navlink-${index}`}
-                                link={link}
-                            />
-                        ))}
-                    </NavLinks>
-
-                    <MediaQuery minWidth={990}>
-                        <TradeButton
-                            bgColor={theme.headerButtonBg}
-                            color="#ffffff"
-                            href="/portal"
-                        >
-                            Trade on 0x
-                        </TradeButton>
-                    </MediaQuery>
-
-                    <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
-                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
-                </HeaderWrap>
-            </StyledHeader>
+            <Headroom>
+                <StyledHeader isNavToggled={isNavToggled}>
+                    <HeaderWrap>
+                        <ReactRouterLink to={WebsitePaths.Home}>
+                            <Logo />
+                        </ReactRouterLink>
+
+                        <NavLinks>
+                            {_.map(navItems, (link, index) => (
+                                <NavItem
+                                    key={`navlink-${index}`}
+                                    link={link}
+                                />
+                            ))}
+                        </NavLinks>
+
+                        <MediaQuery minWidth={990}>
+                            <TradeButton
+                                bgColor={theme.headerButtonBg}
+                                color="#ffffff"
+                                href="/portal"
+                            >
+                                Trade on 0x
+                            </TradeButton>
+                        </MediaQuery>
+
+                        <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
+                        <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                    </HeaderWrap>
+                </StyledHeader>
+            </Headroom>
         );
     }
 }
@@ -126,6 +130,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
 
 const StyledHeader = styled.header<HeaderProps>`
     padding: 30px;
+    background-color: ${props => props.theme.bgColor};
 `;
 
 const LinkWrap = styled.li`
-- 
cgit 


From fb623cf63b3c7474f4bfb4bc37dd4afa9ec51e89 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Mon, 17 Dec 2018 18:23:40 +0100
Subject: Untoggles nav on headroom unpin

---
 packages/website/ts/@next/components/header.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 035eebe53..cc68739ed 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -68,11 +68,17 @@ const navItems: NavItemProps[] = [
 ];
 
 class HeaderBase extends React.Component<HeaderProps> {
+    public onUnpin = () => {
+        if (this.props.isNavToggled) {
+            this.props.toggleMobileNav();
+        }
+    }
+
     public render(): React.ReactNode {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <Headroom>
+            <Headroom onUnpin={this.onUnpin}>
                 <StyledHeader isNavToggled={isNavToggled}>
                     <HeaderWrap>
                         <ReactRouterLink to={WebsitePaths.Home}>
-- 
cgit 


From 5209729eb1e3a0d0fef18bd2d03207cc2544c87d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 17 Dec 2018 19:39:37 +0100
Subject: Increase header tolerances

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index cc68739ed..544a7daf1 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -78,7 +78,7 @@ class HeaderBase extends React.Component<HeaderProps> {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <Headroom onUnpin={this.onUnpin}>
+            <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
                 <StyledHeader isNavToggled={isNavToggled}>
                     <HeaderWrap>
                         <ReactRouterLink to={WebsitePaths.Home}>
-- 
cgit 


From a77e5a1a127e7e25281ff94c88b7a1a0034613b6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 17 Dec 2018 14:37:34 -0800
Subject: feat: fix links in navbar and dropdown

---
 packages/website/ts/@next/components/header.tsx | 85 ++++++++++++++-----------
 1 file changed, 47 insertions(+), 38 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 544a7daf1..00d45f123 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,8 +1,8 @@
+import { Link } from '@0x/react-shared';
 import _ from 'lodash';
 import * as React from 'react';
 import MediaQuery from 'react-responsive';
-import { NavLink as ReactRouterLink } from 'react-router-dom';
-import styled, { withTheme } from 'styled-components';
+import styled, { css, withTheme } from 'styled-components';
 
 import Headroom from 'react-headroom';
 
@@ -29,6 +29,7 @@ interface NavItemProps {
     text?: string;
     dropdownWidth?: number;
     dropdownComponent?: React.ReactNode;
+    shouldOpenInNewTab?: boolean;
 }
 
 interface DropdownWrapInterface {
@@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'products',
-        url: '#',
         text: 'Products',
         dropdownComponent: DropdownProducts,
         dropdownWidth: 280,
     },
     {
         id: 'developers',
-        url: '#',
         text: 'Developers',
         dropdownComponent: DropdownDevelopers,
         dropdownWidth: 480,
@@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'blog',
-        url: 'https://blog.0x.org/latest',
+        url: 'https://blog.0xproject.com/latest',
+        shouldOpenInNewTab: true,
         text: 'Blog',
     },
 ];
@@ -72,7 +72,7 @@ class HeaderBase extends React.Component<HeaderProps> {
         if (this.props.isNavToggled) {
             this.props.toggleMobileNav();
         }
-    }
+    };
 
     public render(): React.ReactNode {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -81,25 +81,16 @@ class HeaderBase extends React.Component<HeaderProps> {
             <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
                 <StyledHeader isNavToggled={isNavToggled}>
                     <HeaderWrap>
-                        <ReactRouterLink to={WebsitePaths.Home}>
+                        <Link to={WebsitePaths.Home}>
                             <Logo />
-                        </ReactRouterLink>
+                        </Link>
 
                         <NavLinks>
-                            {_.map(navItems, (link, index) => (
-                                <NavItem
-                                    key={`navlink-${index}`}
-                                    link={link}
-                                />
-                            ))}
+                            {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
                         </NavLinks>
 
                         <MediaQuery minWidth={990}>
-                            <TradeButton
-                                bgColor={theme.headerButtonBg}
-                                color="#ffffff"
-                                href="/portal"
-                            >
+                            <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal">
                                 Trade on 0x
                             </TradeButton>
                         </MediaQuery>
@@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase);
 const NavItem = (props: { link: NavItemProps; key: string }) => {
     const { link } = props;
     const Subnav = link.dropdownComponent;
-
+    const linkElement = _.isUndefined(link.url) ? (
+        <StyledAnchor href="#">{link.text}</StyledAnchor>
+    ) : (
+        <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+            {link.text}
+        </StyledNavLink>
+    );
     return (
         <LinkWrap>
-            <StyledNavLink to={link.url}>
-                {link.text}
-            </StyledNavLink>
+            {linkElement}
 
-            {link.dropdownComponent &&
+            {link.dropdownComponent && (
                 <DropdownWrap width={link.dropdownWidth}>
                     <Subnav />
                 </DropdownWrap>
-            }
+            )}
         </LinkWrap>
     );
 };
 
-const StyledHeader = styled.header<HeaderProps>`
+const StyledHeader =
+    styled.header <
+    HeaderProps >
+    `
     padding: 30px;
     background-color: ${props => props.theme.bgColor};
 `;
@@ -157,9 +155,7 @@ const LinkWrap = styled.li`
     }
 `;
 
-const StyledNavLink = styled(ReactRouterLink).attrs({
-    activeStyle: { opacity: 1 },
-})`
+const linkStyles = css`
     color: ${props => props.theme.textColor};
     opacity: 0.5;
     transition: opacity 0.35s;
@@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
     }
 `;
 
+const StyledNavLink = styled(Link).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    ${linkStyles};
+`;
+
+const StyledAnchor = styled.a`
+    ${linkStyles};
+`;
+
 const HeaderWrap = styled(FlexWrap)`
-  justify-content: space-between;
-  align-items: center;
-
-  @media (max-width: 800px) {
-      padding-top: 0;
-      display: flex;
-      padding-bottom: 0;
-  }
+    justify-content: space-between;
+    align-items: center;
+
+    @media (max-width: 800px) {
+        padding-top: 0;
+        display: flex;
+        padding-bottom: 0;
+    }
 `;
 
 const NavLinks = styled.ul`
@@ -192,7 +198,10 @@ const NavLinks = styled.ul`
     }
 `;
 
-const DropdownWrap = styled.div<DropdownWrapInterface>`
+const DropdownWrap =
+    styled.div <
+    DropdownWrapInterface >
+    `
     width: ${props => props.width || 280}px;
     padding: 15px 0;
     border: 1px solid transparent;
-- 
cgit 


From 64e84a35106717e569a8268494af83732eda7fd3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 17 Dec 2018 15:39:22 -0800
Subject: feat: fix blog link

---
 packages/website/ts/@next/components/header.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 00d45f123..e6b49e395 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav';
 import { FlexWrap } from 'ts/@next/components/newLayout';
 import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
 import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 interface HeaderProps {
     location?: Location;
@@ -61,7 +62,7 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'blog',
-        url: 'https://blog.0xproject.com/latest',
+        url: constants.URL_BLOG,
         shouldOpenInNewTab: true,
         text: 'Blog',
     },
-- 
cgit 


From b40551e2dfdae276850be1f38bd0eaeaafe02749 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Tue, 18 Dec 2018 14:08:35 +0100
Subject: Change cursor on dropdown triggers

---
 packages/website/ts/@next/components/header.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index e6b49e395..24bfa28ba 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -176,6 +176,7 @@ const StyledNavLink = styled(Link).attrs({
 
 const StyledAnchor = styled.a`
     ${linkStyles};
+    cursor: default;
 `;
 
 const HeaderWrap = styled(FlexWrap)`
-- 
cgit 


From 521679c87c612d9f6b9a760edc4db44d17118a62 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Thu, 20 Dec 2018 09:56:48 -0800
Subject: Fix types

---
 packages/website/ts/@next/components/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 24bfa28ba..e886923df 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -29,7 +29,7 @@ interface NavItemProps {
     id?: string;
     text?: string;
     dropdownWidth?: number;
-    dropdownComponent?: React.ReactNode;
+    dropdownComponent?: React.FunctionComponent<any>;
     shouldOpenInNewTab?: boolean;
 }
 
-- 
cgit 

