Types newlayout, cleans up instant

2 files changed, 24 insertions, 41 deletions

diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index b7953c8d7..7af2fb9f2 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-interface WrapProps {
+interface FlexProps {
+    padding?: string;
+    isFlex?: boolean;
+}
+
+interface WrapProps extends FlexProps {
     isFullWidth?: boolean;
     isTextCentered?: boolean;
 }
 
-interface SectionProps {
+interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
     isFlex?: boolean;
@@ -15,11 +20,6 @@ interface SectionProps {
     bgColor?: 'dark' | 'light' | string;
 }
 
-interface FlexProps {
-    padding?: string;
-    isFlex?: boolean;
-}
-
 interface ColumnProps {
     padding?: string;
 }
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index ff5b7140e..e1725b185 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,28 +1,19 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
-import LazyLoad from 'react-lazyload';
 
 import {colors} from 'ts/style/colors';
 
-import {Hero} from 'ts/@next/components/hero';
-
 import {Banner} from 'ts/@next/components/banner';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
-import {Icon} from 'ts/@next/components/Icon';
-import {Column, Wrap, WrapCentered} from 'ts/@next/components/layout';
-import {SiteWrap} from 'ts/@next/components/siteWrap';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-
-import {Definition} from 'ts/@next/components/Definition';
+import {Hero} from 'ts/@next/components/hero';
 
+import {Button} from 'ts/@next/components/button';
+import {Definition} from 'ts/@next/components/definition';
 import {Section} from 'ts/@next/components/newLayout';
+import {SiteWrap} from 'ts/@next/components/siteWrap';
+import {Paragraph} from 'ts/@next/components/text';
 // import { Configurator } from 'ts/pages/instant/configurator';
 
-import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
-import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
-import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
-
 const CONFIGURATOR_HASH = 'configure';
 
 const featuresData = [
@@ -78,15 +69,13 @@ export const Next0xInstant = () => (
         />
 
         <Section>
-            <Wrap width="full">
-                <MarqueeWrap>
-                    <div>
-                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                        <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                    </div>
-                </MarqueeWrap>
-            </Wrap>
+          <MarqueeWrap>
+              <div>
+                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+                  <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+              </div>
+          </MarqueeWrap>
         </Section>
 
         <Section>
@@ -103,10 +92,8 @@ export const Next0xInstant = () => (
         </Section>
 
         <Section bgColor={colors.backgroundDark}>
-            <Wrap>
-                Configurator goes here
-                {/* <Configurator hash={CONFIGURATOR_HASH} /> */}
-            </Wrap>
+          Configurator goes here
+          {/* <Configurator hash={CONFIGURATOR_HASH} /> */}
         </Section>
 
         <Banner
@@ -116,13 +103,9 @@ export const Next0xInstant = () => (
             secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
         />
 
-        <Section>
-            <Wrap width="full">
-                <Column>
-                    <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
-                    <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
-                </Column>
-            </Wrap>
+        <Section maxWidth="1170px" isPadded={false} padding="60px 0">
+              <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
+              <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
         </Section>
     </SiteWrap>
 );