Type fixes

packages/website/ts/@next/components/hero.tsx

@@ -13,7 +13,7 @@ interface Props {
 }
 
 export const Hero = (props: Props) => (
-    <Section maxWidth="1170px">
+    <Section>
         <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
             {props.figure &&
                 <Content width="400px">

packages/website/ts/@next/components/mobileNav.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import {Link} from 'react-router-dom';
 
-import {WrapGrid} from 'ts/@next/components/newLayout';
+import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout';
 
 interface Props {
     isToggled: boolean;
@@ -36,7 +36,7 @@ export class MobileNav extends React.PureComponent<Props> {
                     </Section>
 
                     <Section isDark={true}>
-                        <Grid as="ul" width="100%" isWrapped={true}>
+                        <Grid as="ul" isFullWidth={true} isWrapped={true}>
                             <li>
                                 <Link to="/next/why">
                                     Why 0x
@@ -112,7 +112,7 @@ const Section = styled.div<{ isDark?: boolean }>`
     background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
 `;
 
-const Grid = styled(WrapGrid)`
+const Grid = styled(WrapGrid)<WrapProps>`
     li {
         width: 50%;
         flex-shrink: 0;

packages/website/ts/@next/components/newLayout.tsx

@@ -25,6 +25,7 @@ export interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
     isFlex?: boolean;
+    padding?: string;
     paddingMobile?: string;
     flexBreakpoint?: string;
     maxWidth?: string;

packages/website/ts/@next/components/text.tsx

@@ -33,7 +33,7 @@ const StyledHeading = styled.h1<HeadingProps>`
     display: ${props => props.isFlex && `inline-flex`};
     align-items: center;
     justify-content: ${props => props.isFlex && `space-between`};
-    font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
+    font-size: ${props => typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
     line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
     text-align: ${props => props.isCentered && 'center'};
     padding: ${props => props.padding && getCSSPadding(props.padding)};
@@ -49,7 +49,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
     const {
         asElement = 'h1',
         children,
-        ...style,
+        ...style
     } = props;
     const Component = StyledHeading.withComponent(asElement);
 

packages/website/ts/@next/pages/about/jobs.tsx

@@ -7,13 +7,17 @@ import { Link } from 'ts/@next/components/link';
 import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
-interface PositionInterface {
+interface PositionProps {
     title: string;
     location: string;
     href: string;
 }
 
-const positions: PositionInterface[] = [
+interface PositionItemProps {
+    position: PositionProps;
+}
+
+const positions: PositionProps[] = [
     {
         title: 'Product Designer',
         location: 'San Francisco, Remote',
@@ -62,7 +66,7 @@ export const NextAboutJobs = () => (
         </Section>
 
         <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
-                <Column colWidth="1/3">
+                <Column>
                     <Heading size="medium">Benefits</Heading>
                 </Column>
 
@@ -97,21 +101,24 @@ export const NextAboutJobs = () => (
     </AboutPageLayout>
 );
 
-const Position = ({ position }) => (
-    <PositionWrap>
-        <StyledColumn width="30%">
-            <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"><a href={position.href}>{position.title}</a></Heading>
-        </StyledColumn>
+export const Position: React.FunctionComponent<PositionItemProps> = (props: PositionItemProps) => {
+    const { position } = props;
+    return (
+        <PositionWrap>
+            <StyledColumn width="30%">
+                <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"><a href={position.href}>{position.title}</a></Heading>
+            </StyledColumn>
 
-        <StyledColumn width="50%" padding="0 40px 0 0">
-            <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph>
-        </StyledColumn>
+            <StyledColumn width="50%" padding="0 40px 0 0">
+                <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph>
+            </StyledColumn>
 
-        <StyledColumn width="20%">
-            <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph>
-        </StyledColumn>
-    </PositionWrap>
-);
+            <StyledColumn width="20%">
+                <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph>
+            </StyledColumn>
+        </PositionWrap>
+    );
+};
 
 const BenefitsList = styled.ul`
     color: #000;

packages/website/ts/@next/pages/about/press.tsx

@@ -7,14 +7,18 @@ import { Button } from 'ts/@next/components/button';
 import { Column, FlexWrap } from 'ts/@next/components/newLayout';
 import { Paragraph } from 'ts/@next/components/text';
 
-interface HighlightInterface {
+interface HighlightProps {
     logo: string;
     title?: string;
     text: string;
     href: string;
 }
 
-const highlights: HighlightInterface[] = [
+interface HighlightItemProps {
+    highlight: HighlightProps;
+}
+
+const highlights: HighlightProps[] = [
     {
         logo: '/images/@next/press/logo-forbes.png',
         title: 'Forbes',
@@ -58,18 +62,21 @@ export const NextAboutPress = () => (
     />
 );
 
-const Highlight = ({ highlight }) => (
-    <HighlightWrap>
-        <Column>
-            <img src={highlight.logo} alt={highlight.title} />
-        </Column>
+export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: HighlightItemProps) => {
+    const { highlight } = props;
+    return (
+        <HighlightWrap>
+            <Column>
+                <img src={highlight.logo} alt={highlight.title} />
+            </Column>
 
-        <Column width="60%" maxWidth="560px">
-            <Paragraph isMuted={false}>{highlight.text}</Paragraph>
-            <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
-        </Column>
-    </HighlightWrap>
-);
+            <Column width="60%" maxWidth="560px">
+                <Paragraph isMuted={false}>{highlight.text}</Paragraph>
+                <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
+            </Column>
+        </HighlightWrap>
+    );
+};
 
 const HighlightWrap = styled(FlexWrap)`
     border-top: 1px solid #eaeaea;

packages/website/ts/@next/pages/about/team.tsx

@@ -196,7 +196,7 @@ export const NextAboutTeam = () => (
                 width="70%"
                 maxWidth="800px"
             >
-                <StyledGrid isWrapped={true} isCentered={false}>
+                <StyledGrid>
                     {_.map(team, (info: TeamMember, index: number) => (
                         <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
                     ))}
@@ -219,7 +219,7 @@ export const NextAboutTeam = () => (
                 width="70%"
                 maxWidth="800px"
             >
-                <StyledGrid isWrapped={true} isCentered={false}>
+                <StyledGrid>
                     {_.map(advisors, (info: TeamMember, index: number) => (
                         <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
                     ))}

packages/website/ts/@next/pages/instant.tsx

@@ -14,8 +14,6 @@ import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 import { Configurator } from 'ts/@next/pages/instant/configurator';
 
-const CONFIGURATOR_HASH = 'configure';
-
 const featuresData = [
     {
         title: 'Support ERC-20 and ERC-721 tokens',
@@ -96,7 +94,7 @@ export const Next0xInstant = () => (
 
         <ConfiguratorSection maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}>
           <Heading>0x Instant Configurator</Heading>
-          <Configurator hash={CONFIGURATOR_HASH} />
+          <Configurator />
         </ConfiguratorSection>
 
         <Banner