Cleans up as much as old layout

6 files changed, 42 insertions, 59 deletions

diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index a3740c25a..7141a4eb1 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {colors} from 'ts/style/colors';
 
 import {Button} from 'ts/@next/components/button';
-import {Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {ThemeInterface} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 8a4db2656..317302d44 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -4,7 +4,7 @@ import {Link as RouterLink} from 'react-router-dom';
 import styled, {withTheme} from 'styled-components';
 
 import {Button} from 'ts/@next/components/button';
-import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
+import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
 import {Heading} from 'ts/@next/components/text';
 import {GlobalStyle} from 'ts/@next/constants/globalStyle';
 
@@ -90,7 +90,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
             </div>
 
             <StyledWrap>
-                <Column colWidth="1/2" isNoPadding={true}>
+                <Column width="calc(100% - 15px)">
                     <Heading
                         asElement="h4"
                         size={14}
@@ -112,7 +112,7 @@ export const DropdownDevelopers = withTheme((props: Props) => (
                     </ul>
                 </Column>
 
-                <Column colWidth="1/2" isNoPadding={true}>
+                <Column width="calc(100% - 15px)">
                     <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}>
                         Useful Links
                     </Heading>
@@ -155,7 +155,7 @@ const StyledGrid = styled(WrapGrid.withComponent('ul'))`
     }
 `;
 
-const StyledWrap = styled(Wrap)`
+const StyledWrap = styled(FlexWrap)`
     padding-top: 20px;
     margin-top: 30px;
     position: relative;
diff --git a/packages/website/ts/@next/components/dropdowns/mock.tsx b/packages/website/ts/@next/components/dropdowns/mock.tsx
deleted file mode 100644
index 9ead533d6..000000000
--- a/packages/website/ts/@next/components/dropdowns/mock.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export const Dropdown = () => (
-    <div>Dropdown menu placeholder</div>
-);
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index defc4ba81..11d18c7f7 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -3,15 +3,10 @@ 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 { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
+import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
 import { NewsletterForm } from 'ts/@next/components/newsletter_form';
 
-interface FooterInterface {
-}
-
 interface LinkInterface {
     text: string;
     url: string;
@@ -66,15 +61,15 @@ const linkRows: LinkRows[] = [
     },
 ];
 
-export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
-    <FooterWrap bgColor="#181818" isNoMargin={true} padding={40}>
-        <Wrap>
-            <FooterColumn width="35%" isNoPadding={true}>
+export const Footer: React.StatelessComponent = () => (
+    <FooterWrap>
+        <FlexWrap>
+            <FooterColumn width="35%">
                 <Logo isLight={true} />
                 <NewsletterForm />
             </FooterColumn>
 
-            <FooterColumn width="55%" isNoPadding={true}>
+            <FooterColumn width="55%">
                 <WrapGrid isCentered={false} isWrapped={true}>
                     {_.map(linkRows, (row, index) => (
                         <FooterSectionWrap
@@ -92,7 +87,7 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
                     ))}
                 </WrapGrid>
             </FooterColumn>
-        </Wrap>
+        </FlexWrap>
     </FooterWrap>
 );
 
@@ -108,38 +103,40 @@ const LinkList = (props: LinkListProps) => (
   </List>
 );
 
-const FooterSection = styled.footer`
+const FooterWrap = styled.footer`
     padding: 40px 30px 30px 30px;
     margin-top: 30px;
     background-color: ${props => props.theme.footerBg};
-`;
-
-const FooterWrap = styled(FooterSection)`
     color: ${props => props.theme.footerColor};
 
     path {
         fill: ${props => props.theme.footerColor};
     }
 
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 768px) {
         height: 350px;
     }
 `;
 
 const FooterColumn = styled(Column)`
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 768px) {
         width: ${props => props.width};
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         display: ${props => props.isMobileHidden && 'none'};
         text-align: left;
     }
 `;
 
 const FooterSectionWrap = styled(FooterColumn)`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 768px) {
         width: 50%;
+
+        & + & {
+            margin-top: 0;
+            margin-bottom: 30px;
+        }
     }
 `;
 
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;
     }
 `;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index 5a0617256..49fc48c1c 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
-import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-
-import {Column, Section} from 'ts/@next/components/newLayout';
 
 import {BlockIconLink} from 'ts/@next/components/blockIconLink';
+import {Section} from 'ts/@next/components/newLayout';
 
 interface Props {
     onContactClick?: () => void;