WIP Begin cleanup, adds mediaquery component

9 files changed, 61 insertions, 55 deletions

diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index a5e8df7e8..f562bcff5 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -11,9 +11,10 @@ import { addFadeInAnimation } from 'ts/@next/constants/animations';
 
 interface Props {
     title: string;
-    description: React.Node;
+    description: Node;
     linkLabel?: string;
     linkUrl?: string;
+    children?: Node;
 }
 
 export const AboutPageLayout = (props: Props) => (
@@ -28,9 +29,9 @@ export const AboutPageLayout = (props: Props) => (
 
            <Column width="70%" maxWidth="800px">
                <Column width="100%" maxWidth="680px">
-                   <AnimatedHeading size="medium">
-                     {props.title}
-                   </AnimatedHeading>
+                    <AnimatedHeading size="medium">
+                        {props.title}
+                    </AnimatedHeading>
 
                    <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
                      {props.description}
@@ -38,14 +39,14 @@ export const AboutPageLayout = (props: Props) => (
 
                    {(props.linkLabel && props.linkUrl) &&
                         <AnimatedLink
-                          to={props.linkUrl}
-                          isWithArrow={true}
+                            to={props.linkUrl}
+                            isWithArrow={true}
                         >
-                             {props.linkLabel}
+                            {props.linkLabel}
                         </AnimatedLink>
                    }
-               </Column>
-           </Column>
+                </Column>
+            </Column>
         </Section>
 
         {props.children}
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 40fe13bc1..e3ab98dcf 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -43,8 +43,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
             <Border/>
             <Border isBottom={true} />
 
-            <Column colWidth="1/2" isPadLarge={true}>
-                <CustomHeading isNoMargin={true}>{heading}</CustomHeading>
+            <Column>
+                <CustomHeading>{heading}</CustomHeading>
 
                 {subline &&
                     <Paragraph isMuted={0.5} isNoMargin={true}>
@@ -52,7 +52,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                     </Paragraph>
                 }
             </Column>
-            <Column colWidth="1/2" isPadLarge={true}>
+            <Column>
                 <ButtonWrap>
                     {mainCta &&
                         <Button
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index bdf673495..cca4d1382 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -15,8 +15,8 @@ interface ButtonInterface {
     isAccentColor?: boolean;
     hasIcon?: boolean | string;
     isInline?: boolean;
-    type?: string;
     href?: string;
+    to?: string;
     onClick?: () => any;
     theme?: {
         textColor: string;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index e19f041c7..7f326bc52 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -18,7 +18,7 @@ interface Props {
     icon: string;
     iconSize?: 'medium' | 'large' | number;
     title: string;
-    description: React.Node;
+    description: Node;
     actions?: Action[];
 }
 
@@ -43,6 +43,7 @@ export const Definition = (props: Props) => (
                 <LinkWrap>
                     {props.actions.map((item, index) => (
                         <Button
+                            key={`dlink-${index}`}
                             href={item.url}
                             isWithArrow={true}
                             isAccentColor={true}
@@ -56,7 +57,7 @@ export const Definition = (props: Props) => (
     </Wrap>
 );
 
-const Wrap = styled.div`
+const Wrap = styled.div<Props>`
     max-width: ${props => props.isInline && '354px'};
 
     & + & {
@@ -81,7 +82,7 @@ const Wrap = styled.div`
     }
 `;
 
-const TextWrap = styled.div`
+const TextWrap = styled.div<Props>`
     width: 100%;
     max-width: 560px;
 
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 11d18c7f7..897bd1d51 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,10 +1,11 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { Logo } from 'ts/@next/components/logo';
-import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
+import { Column, ColumnProps, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
 import { NewsletterForm } from 'ts/@next/components/newsletter_form';
 
 interface LinkInterface {
@@ -15,6 +16,7 @@ interface LinkInterface {
 
 interface LinkRows {
     heading: string;
+    isOnMobile?: boolean;
     links: LinkInterface[];
 }
 
@@ -65,25 +67,22 @@ export const Footer: React.StatelessComponent = () => (
     <FooterWrap>
         <FlexWrap>
             <FooterColumn width="35%">
-                <Logo isLight={true} />
+                <Logo />
                 <NewsletterForm />
             </FooterColumn>
 
             <FooterColumn width="55%">
                 <WrapGrid isCentered={false} isWrapped={true}>
-                    {_.map(linkRows, (row, index) => (
-                        <FooterSectionWrap
-                            key={`fc-${index}`}
-                            colWidth="1/4"
-                            isNoPadding={true}
-                            isMobileHidden={!row.isOnMobile}
-                        >
-                            <RowHeading>
-                                {row.heading}
-                            </RowHeading>
-
-                            <LinkList links={row.links} />
-                        </FooterSectionWrap>
+                    {_.map(linkRows, (row: LinkRows, index) => (
+                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768}>
+                            <FooterSectionWrap key={`fc-${index}`}>
+                                <RowHeading>
+                                    {row.heading}
+                                </RowHeading>
+
+                                <LinkList links={row.links} />
+                            </FooterSectionWrap>
+                        </MediaQuery>
                     ))}
                 </WrapGrid>
             </FooterColumn>
@@ -124,7 +123,6 @@ const FooterColumn = styled(Column)`
     }
 
     @media (max-width: 768px) {
-        display: ${props => props.isMobileHidden && 'none'};
         text-align: left;
     }
 `;
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;
-    }
 `;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 3126db7ee..fe0a290c5 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-interface WrapProps {
+export interface WrapProps {
+    bgColor?: string;
     offsetTop?: string;
     maxWidth?: string;
     wrapWidth?: string;
@@ -11,7 +12,7 @@ interface WrapProps {
     isWrapped?: boolean;
 }
 
-interface WrapGridProps {
+export interface WrapGridProps {
     isWrapped?: boolean;
     isCentered?: boolean;
 }
@@ -20,7 +21,7 @@ export interface WrapStickyProps {
     offsetTop?: string;
 }
 
-interface SectionProps extends WrapProps {
+export interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
     isFlex?: boolean;
@@ -28,15 +29,16 @@ interface SectionProps extends WrapProps {
     flexBreakpoint?: string;
     maxWidth?: string;
     bgColor?: 'dark' | 'light' | string;
+    children: any;
 }
 
-interface FlexProps {
+export interface FlexProps {
     padding?: string;
     isFlex?: boolean;
     flexBreakpoint?: string;
 }
 
-interface ColumnProps {
+export interface ColumnProps {
     padding?: string;
     width?: string;
     maxWidth?: string;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 92ae76235..f2851d2d2 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -71,7 +71,7 @@ const GLOBAL_THEMES: ThemeInterface = {
     },
 };
 
-export class SiteWrap extends React.Component {
+export class SiteWrap extends React.Component<Props> {
     public state = {
         isMobileNavOpen: false,
     };
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 3608afebf..fbc56bff7 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -72,7 +72,7 @@ export const Next0xInstant = () => (
           <MarqueeWrap>
               <div>
                   {[...Array(12)].map((item, index) => (
-                    <Card index={index}>
+                    <Card key={`card-${index}`} index={index}>
                       <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
                     </Card>
                   ))}
@@ -83,6 +83,7 @@ export const Next0xInstant = () => (
         <Section>
             {_.map(featuresData, (item, index) => (
                 <Definition
+                    key={`definition-${index}`}
                     icon={item.icon}
                     title={item.title}
                     description={item.description}