Refactors mobile nav, theming

5 files changed, 71 insertions, 18 deletions

diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
index 97c9ba26d..28d58ab82 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -33,7 +33,7 @@ const StyledHamburger = styled.button<Props>`
 
     span {
         display: block;
-        background-color: #fff;
+        background-color: ${props => props.theme.textColor};
         width: 100%;
         height: 2px;
         margin-bottom: 5px;
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 06742664e..02e6e65f5 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -5,7 +5,6 @@ import { ThemeInterface } from 'ts/@next/components/siteWrap';
 import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
 
 interface LogoInterface {
-    isLight?: boolean;
     theme?: ThemeInterface;
 }
 
@@ -28,11 +27,7 @@ const Icon = styled(LogoIcon)<LogoInterface>`
     flex-shrink: 0;
 
     path {
-        fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
-
-        @media (max-width: 768px) {
-            fill: #fff;
-        }
+        fill: ${(props => props.theme.textColor};
     }
 `;
 
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index f6f32ee7a..fcdeb2d3f 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import {Link} from 'react-router-dom';
+
+import {WrapGrid} from 'ts/@next/components/newLayout';
+
 export class MobileNav extends React.PureComponent {
     public render(): React.Node {
         const { isToggled, toggleMobileNav } = this.props;
@@ -8,14 +12,45 @@ export class MobileNav extends React.PureComponent {
         return (
             <Wrap isToggled={isToggled}>
                 <Section>
-                    <ul>
-                        <li>0x instant</li>
-                        <li>0x Launch Kit</li>
-                    </ul>
+                    <h4>Products</h4>
+
+                    <List>
+                        <li>
+                            <Link to="#">
+                                0x instant
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="#">
+                                0x Launch Kit
+                            </Link>
+                        </li>
+                    </List>
                 </Section>
 
                 <Section isDark={true}>
-                    a
+                    <Grid as="ul" isWrapped={true}>
+                        <li>
+                            <Link to="#">
+                                Why 0x
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="#">
+                                About
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="#">
+                                Products
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="#">
+                                Blog
+                            </Link>
+                        </li>
+                    </Grid>
                 </Section>
 
                 {isToggled &&
@@ -40,6 +75,18 @@ const Wrap = styled.nav`
     z-index: 999;
     top: 0;
     left: 0;
+    font-size: 20px;
+
+    a {
+        padding: 15px 0;
+        display: block;
+        color: inherit;
+    }
+
+    h4 {
+        font-size: 14px;
+        opacity: 0.5;
+    }
 `;
 
 const Overlay = styled.div`
@@ -53,6 +100,19 @@ const Overlay = styled.div`
 
 const Section = styled.div`
     width: 100%;
-    padding: 30px;
+    padding: 15px 30px;
     background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
 `;
+
+const List = styled.ul`
+    li {
+        float: ${props => props.inline && 'left'}''
+    }
+`;
+
+const Grid = styled(WrapGrid)`
+    li {
+        width: 50%;
+        flex-shrink: 0;
+    }
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 7bb9d27ab..93869f16c 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -46,6 +46,9 @@ const GLOBAL_THEMES: ThemeInterface = {
         textColor: '#000000',
         paragraphColor: '#474747',
         linkColor: colors.brandDark,
+        mobileNavBgUpper: '#FFFFFF',
+        mobileNavBgLower: '#F3F6F4',
+        mobileNavColor: '#000000',
         dropdownBg: '#FBFBFB',
         dropdownButtonBg: '#F3F6F4',
         dropdownColor: '#003831',
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 86b9e16c5..cc53a296d 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -102,11 +102,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         object-fit: contain;
     }
 
-    p, li {
-        font-size: 1rem;
-        line-height: 1.444444444em; // 26px
-    }
-
     a, button {
         text-decoration: none;
         font-family: inherit;