Merge branch 'development' into feature/order-watcher/dockerize

* development: (898 commits)
  Fixed merge conflict from development
  Ran prettier
  Doc generation working for changes by dutch auction wrapper
  added changelog entry for monorepo-scripts
  Hide dutch auction wrapper from docs -- hopefully this will prevent the "must export Web3Wrapper" error from doc generation
  relaxed version on contract-extension dependencies
  Added NetworkID 50 address for dutch auction wrapper
  removed manual updte of package.json version
  export dutch auction wrapper types from 0x.js
  Export dutch auction wrapper in 0x.js
  ran prettier
  Minor documentation updates to dutch auction wrapper
  `afterAuctionDetails` -> `auctionDetails`
  Added @todo for including dutch auction addresses once deployed
  Ran prettier & linter
  Removed redundant assignment
  removed needless newline on contract-wrappers changelog
  removed timestamp from changelog for abi-gen-wrappers
  added dutch auction address for testnets
  removed .only
  ...

1 files changed, 154 insertions, 214 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 1098d6d0b..3765a32ca 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,228 +1,168 @@
-import { ALink, colors, Link } from '@0x/react-shared';
-import { ObjectMap } from '@0x/types';
+import { Link as SmartLink } from '@0x/react-shared';
 import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
+import styled from 'styled-components';
 
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { Logo } from 'ts/components/logo';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { NewsletterForm } from 'ts/components/newsletter_form';
+import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
-import { Translate } from 'ts/utils/translate';
-
-const ICON_DIMENSION = 16;
-
-const languageToMenuTitle = {
-    [Language.English]: 'English',
-    [Language.Russian]: 'Русский',
-    [Language.Spanish]: 'Español',
-    [Language.Korean]: '한국어',
-    [Language.Chinese]: '中文',
-};
-
-export interface FooterProps {
-    translate: Translate;
-    dispatcher: Dispatcher;
-    backgroundColor?: string;
+
+interface LinkInterface {
+    text: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+interface LinkRows {
+    heading: string;
+    isOnMobile?: boolean;
+    links: LinkInterface[];
 }
 
-interface FooterState {
-    selectedLanguage: Language;
+interface LinkListProps {
+    links: LinkInterface[];
 }
 
-export class Footer extends React.Component<FooterProps, FooterState> {
-    public static defaultProps = {
-        backgroundColor: colors.darkerGrey,
-    };
-    constructor(props: FooterProps) {
-        super(props);
-        this.state = {
-            selectedLanguage: props.translate.getLanguage(),
-        };
+const linkRows: LinkRows[] = [
+    {
+        heading: 'Products',
+        isOnMobile: true,
+        links: [
+            { url: WebsitePaths.Instant, text: '0x Instant' },
+            { url: WebsitePaths.LaunchKit, text: '0x Launch Kit' },
+        ],
+    },
+    {
+        heading: 'Developers',
+        links: [
+            { url: WebsitePaths.Docs, text: 'Documentation' },
+            { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
+            { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protocol Spec', shouldOpenInNewTab: true },
+        ],
+    },
+    {
+        heading: 'About',
+        isOnMobile: true,
+        links: [
+            { url: WebsitePaths.AboutMission, text: 'Mission' },
+            { url: WebsitePaths.AboutTeam, text: 'Team' },
+            { url: WebsitePaths.AboutJobs, text: 'Jobs' },
+            { url: WebsitePaths.AboutPress, text: 'Press' },
+            { url: WebsitePaths.Ecosystem, text: 'Grant Program' },
+        ],
+    },
+    {
+        heading: 'Community',
+        isOnMobile: true,
+        links: [
+            { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
+            { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
+            { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
+            { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
+        ],
+    },
+];
+
+export const Footer: React.StatelessComponent = () => (
+    <FooterWrap>
+        <FlexWrap>
+            <FooterColumn width="35%">
+                <Logo />
+                <NewsletterForm />
+            </FooterColumn>
+
+            <FooterColumn width="55%">
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(linkRows, (row: LinkRows, index) => (
+                        <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
+                            <FooterSectionWrap>
+                                <RowHeading>{row.heading}</RowHeading>
+
+                                <LinkList links={row.links} />
+                            </FooterSectionWrap>
+                        </MediaQuery>
+                    ))}
+                </WrapGrid>
+            </FooterColumn>
+        </FlexWrap>
+    </FooterWrap>
+);
+
+const LinkList = (props: LinkListProps) => (
+    <List>
+        {_.map(props.links, (link, index) => (
+            <li key={`fl-${index}`}>
+                <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+                    {link.text}
+                </Link>
+            </li>
+        ))}
+    </List>
+);
+
+const FooterWrap = styled.footer`
+    padding: 40px 30px 30px 30px;
+    margin-top: 30px;
+    background-color: ${props => props.theme.footerBg};
+    color: ${props => props.theme.footerColor};
+
+    path {
+        fill: ${props => props.theme.footerColor};
+    }
+
+    @media (min-width: 768px) {
+        height: 350px;
     }
-    public render(): React.ReactNode {
-        const sectionNameToLinks: ObjectMap<ALink[]> = {
-            [Key.Documentation]: [
-                {
-                    title: 'Developer Home',
-                    to: WebsitePaths.Docs,
-                },
-                {
-                    title: '0x.js',
-                    to: WebsitePaths.ZeroExJs,
-                },
-                {
-                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
-                    to: WebsitePaths.SmartContracts,
-                },
-                {
-                    title: this.props.translate.get(Key.Connect, Deco.Cap),
-                    to: WebsitePaths.Connect,
-                },
-                {
-                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
-                    to: WebsitePaths.Whitepaper,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
-                    to: WebsitePaths.Wiki,
-                },
-            ],
-            [Key.Community]: [
-                {
-                    title: this.props.translate.get(Key.Discord, Deco.Cap),
-                    to: constants.URL_ZEROEX_CHAT,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Blog, Deco.Cap),
-                    to: constants.URL_BLOG,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: 'Twitter',
-                    to: constants.URL_TWITTER,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: 'Reddit',
-                    to: constants.URL_REDDIT,
-                    shouldOpenInNewTab: true,
-                },
-                {
-                    title: this.props.translate.get(Key.Forum, Deco.Cap),
-                    to: constants.URL_DISCOURSE_FORUM,
-                    shouldOpenInNewTab: true,
-                },
-            ],
-            [Key.Organization]: [
-                {
-                    title: this.props.translate.get(Key.About, Deco.Cap),
-                    to: WebsitePaths.About,
-                },
-                {
-                    title: this.props.translate.get(Key.Careers, Deco.Cap),
-                    to: WebsitePaths.Careers,
-                },
-                {
-                    title: this.props.translate.get(Key.Contact, Deco.Cap),
-                    to: 'mailto:team@0xproject.com',
-                    shouldOpenInNewTab: true,
-                },
-            ],
-        };
-        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
-            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
-        });
-        return (
-            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
-                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
-                    <div className="col lg-col-4 md-col-4 col-12 left">
-                        <div className="sm-mx-auto" style={{ width: 148 }}>
-                            <div>
-                                <img src="/images/protocol_logo_white.png" height="30" />
-                            </div>
-                            <div
-                                style={{
-                                    fontSize: 11,
-                                    color: colors.grey,
-                                    paddingLeft: 37,
-                                    paddingTop: 2,
-                                }}
-                            >
-                                © ZeroEx, Intl.
-                            </div>
-                            <div className="pt4 center">
-                                <DropDownMenu
-                                    labelStyle={{ color: colors.white }}
-                                    value={this.state.selectedLanguage}
-                                    onChange={this._updateLanguage.bind(this)}
-                                >
-                                    {languageMenuItems}
-                                </DropDownMenu>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
-                        <div className="col lg-col-4 md-col-4 col-12">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Documentation)}
-                                {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                        <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Community)}
-                                {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                        <div className="col lg-col-4 md-col-4 col-12">
-                            <div className="lg-right md-right sm-center">
-                                {this._renderHeader(Key.Organization)}
-                                {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+`;
+
+const FooterColumn = styled(Column)`
+    @media (min-width: 768px) {
+        width: ${props => props.width};
     }
-    private _renderIcon(fileName: string): React.ReactNode {
-        return (
-            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
-                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
-            </div>
-        );
+
+    @media (max-width: 768px) {
+        text-align: left;
     }
-    private _renderMenuItem(link: ALink): React.ReactNode {
-        const titleToIcon: { [title: string]: string } = {
-            [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png',
-            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
-            Twitter: 'twitter.png',
-            Reddit: 'reddit.png',
-            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
-        };
-        const iconIfExists = titleToIcon[link.title];
-        return (
-            <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
-                <Link
-                    to={link.to}
-                    shouldOpenInNewTab={link.shouldOpenInNewTab}
-                    fontColor={colors.white}
-                    className="text-decoration-none"
-                >
-                    <div>
-                        {!_.isUndefined(iconIfExists) ? (
-                            <div className="inline-block">
-                                <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
-                                <div className="table-cell">{link.title}</div>
-                            </div>
-                        ) : (
-                            link.title
-                        )}
-                    </div>
-                </Link>
-            </div>
-        );
+`;
+
+const FooterSectionWrap = styled(FooterColumn)`
+    @media (max-width: 768px) {
+        width: 50%;
+
+        & + & {
+            margin-top: 0;
+            margin-bottom: 30px;
+        }
     }
-    private _renderHeader(key: Key): React.ReactNode {
-        const headerStyle = {
-            color: colors.grey400,
-            letterSpacing: 2,
-            fontFamily: 'Roboto Mono',
-            fontSize: 13,
-        };
-        return (
-            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
-                {this.props.translate.get(key, Deco.Upper)}
-            </div>
-        );
+`;
+
+const RowHeading = styled.h3`
+    color: inherit;
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 1.25em;
+    opacity: 0.75;
+`;
+
+const List = styled.ul`
+    li + li {
+        margin-top: 8px;
     }
-    private _updateLanguage(_event: any, _index: number, value: Language): void {
-        this.setState({
-            selectedLanguage: value,
-        });
-        this.props.dispatcher.updateSelectedLanguage(value);
+`;
+
+const Link = styled(SmartLink)`
+    color: inherit;
+    opacity: 0.5;
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+    transition: opacity 0.25s;
+    text-decoration: none;
+
+    &:hover {
+        opacity: 0.8;
     }
-}
+`;