Merge branch 'development' into feature/portal-ledger-support

* development: (437 commits)
  Publish
  Update yarn.lock
  Update the CHANGELOG
  Fix the bug making it impossible to specify the custom ZRX address
  Fix fill/cancel order by looking for NoError instead of empty blockchainErr given the BlockchainErrs type refactor
  Add a comment about a yarn bug
  Add our mainnet and kovan nodes as backups for Portal requests
  Fix bug hiding the user info from topBar
  Add dev-utils package to top level README
  Prettier newline
  Prettier
  Allow Token symbols to be alphanumeric
  Update CHANGELOG, rebase on development
  Should not -> cannot
  Reject negative amounts in isValidBaseUnitAmount
  Re-add changelog for 0x.js
  Fix prettier
  Update yarn.lock
  Move tests to a separate folder
  Change file layout
  ...

# Conflicts:
#	packages/website/README.md

1 files changed, 61 insertions, 108 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 5e3c0479a..a0f1a0c96 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,14 +1,9 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {
-  Link,
-} from 'react-router-dom';
-import {HashLink} from 'react-router-hash-link';
-import {
-    Link as ScrollLink,
-} from 'react-scroll';
-import {Styles, WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
 
 interface MenuItemsBySection {
     [sectionName: string]: FooterMenuItem[];
@@ -18,7 +13,6 @@ interface FooterMenuItem {
     title: string;
     path?: string;
     isExternal?: boolean;
-    fileName?: string;
 }
 
 enum Sections {
@@ -28,9 +22,6 @@ enum Sections {
 }
 
 const ICON_DIMENSION = 16;
-const CUSTOM_DARK_GRAY = '#393939';
-const CUSTOM_LIGHT_GRAY = '#CACACA';
-const CUSTOM_LIGHTEST_GRAY = '#9E9E9E';
 const menuItemsBySection: MenuItemsBySection = {
     Documentation: [
         {
@@ -63,26 +54,27 @@ const menuItemsBySection: MenuItemsBySection = {
         {
             title: 'Rocket.chat',
             isExternal: true,
-            path: constants.ZEROEX_CHAT_URL,
-            fileName: 'rocketchat.png',
+            path: constants.URL_ZEROEX_CHAT,
         },
         {
             title: 'Blog',
             isExternal: true,
-            path: constants.BLOG_URL,
-            fileName: 'medium.png',
+            path: constants.URL_BLOG,
         },
         {
             title: 'Twitter',
             isExternal: true,
-            path: constants.TWITTER_URL,
-            fileName: 'twitter.png',
+            path: constants.URL_TWITTER,
         },
         {
             title: 'Reddit',
             isExternal: true,
-            path: constants.REDDIT_URL,
-            fileName: 'reddit.png',
+            path: constants.URL_REDDIT,
+        },
+        {
+            title: 'Forum',
+            isExternal: true,
+            path: constants.URL_DISCOURSE_FORUM,
         },
     ],
     Organization: [
@@ -94,7 +86,7 @@ const menuItemsBySection: MenuItemsBySection = {
         {
             title: 'Careers',
             isExternal: true,
-            path: constants.ANGELLIST_URL,
+            path: constants.URL_ANGELLIST,
         },
         {
             title: 'Contact',
@@ -104,34 +96,40 @@ const menuItemsBySection: MenuItemsBySection = {
     ],
 };
 const linkStyle = {
-    color: 'white',
+    color: colors.white,
     cursor: 'pointer',
 };
 
-const titleToIcon: {[title: string]: string} = {
+const titleToIcon: { [title: string]: string } = {
     'Rocket.chat': 'rocketchat.png',
-    'Blog': 'medium.png',
-    'Twitter': 'twitter.png',
-    'Reddit': 'reddit.png',
+    Blog: 'medium.png',
+    Twitter: 'twitter.png',
+    Reddit: 'reddit.png',
+    Forum: 'discourse.png',
 };
 
-export interface FooterProps {
-    location: Location;
-}
+export interface FooterProps {}
 
 interface FooterState {}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
     public render() {
         return (
-            <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}>
-                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
+            <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+                <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 className="sm-mx-auto" style={{ width: 148 }}>
                             <div>
                                 <img src="/images/protocol_logo_white.png" height="30" />
                             </div>
-                            <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}>
+                            <div
+                                style={{
+                                    fontSize: 11,
+                                    color: colors.grey,
+                                    paddingLeft: 37,
+                                    paddingTop: 2,
+                                }}
+                            >
                                 © ZeroEx, Intl.
                             </div>
                         </div>
@@ -139,20 +137,20 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                     <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(Sections.Documentation)}
-                                {_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))}
+                                {this._renderHeader(Sections.Documentation)}
+                                {_.map(menuItemsBySection[Sections.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(Sections.Community)}
-                                {_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))}
+                                {this._renderHeader(Sections.Community)}
+                                {_.map(menuItemsBySection[Sections.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(Sections.Organization)}
-                                {_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))}
+                                {this._renderHeader(Sections.Organization)}
+                                {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                     </div>
@@ -160,100 +158,55 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
-    private renderIcon(fileName: string) {
+    private _renderIcon(fileName: string) {
         return (
-            <div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}>
-                <img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} />
+            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
+                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
             </div>
         );
     }
-    private renderMenuItem(item: FooterMenuItem) {
+    private _renderMenuItem(item: FooterMenuItem) {
         const iconIfExists = titleToIcon[item.title];
         return (
-            <div
-                key={item.title}
-                className="sm-center"
-                style={{fontSize: 13, paddingTop: 25}}
-            >
-                {item.isExternal ?
-                    <a
-                        className="text-decoration-none"
-                        style={linkStyle}
-                        target="_blank"
-                        href={item.path}
-                    >
-                        {!_.isUndefined(iconIfExists) ?
-                            <div className="sm-mx-auto" style={{width: 65}}>
+            <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+                {item.isExternal ? (
+                    <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+                        {!_.isUndefined(iconIfExists) ? (
+                            <div className="sm-mx-auto" style={{ width: 65 }}>
                                 <div className="flex">
-                                    <div className="pr1">
-                                        {this.renderIcon(iconIfExists)}
-                                    </div>
+                                    <div className="pr1">{this._renderIcon(iconIfExists)}</div>
                                     <div>{item.title}</div>
                                 </div>
-                            </div> :
+                            </div>
+                        ) : (
                             item.title
-                        }
-                    </a> :
-                    <Link
-                        to={item.path}
-                        style={linkStyle}
-                        className="text-decoration-none"
-                    >
+                        )}
+                    </a>
+                ) : (
+                    <Link to={item.path} style={linkStyle} className="text-decoration-none">
                         <div>
-                            {!_.isUndefined(iconIfExists) &&
-                                <div className="pr1">
-                                    {this.renderIcon(iconIfExists)}
-                                </div>
-                            }
+                            {!_.isUndefined(iconIfExists) && (
+                                <div className="pr1">{this._renderIcon(iconIfExists)}</div>
+                            )}
                             {item.title}
                         </div>
                     </Link>
-                }
+                )}
             </div>
         );
     }
-    private renderHeader(title: string) {
+    private _renderHeader(title: string) {
         const headerStyle = {
             textTransform: 'uppercase',
-            color: CUSTOM_LIGHT_GRAY,
+            color: colors.grey400,
             letterSpacing: 2,
             fontFamily: 'Roboto Mono',
             fontSize: 13,
         };
         return (
-            <div
-                className="lg-pb2 md-pb2 sm-pt4"
-                style={headerStyle}
-            >
+            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
                 {title}
             </div>
         );
     }
-    private renderHomepageLink(title: string) {
-        const hash = title.toLowerCase();
-        if (this.props.location.pathname === WebsitePaths.Home) {
-            return (
-                <ScrollLink
-                    style={linkStyle}
-                    to={hash}
-                    smooth={true}
-                    offset={0}
-                    duration={constants.HOME_SCROLL_DURATION_MS}
-                    containerId="home"
-                >
-                    {title}
-                </ScrollLink>
-            );
-        } else {
-            return (
-                <HashLink
-                    to={`/#${hash}`}
-                    className="text-decoration-none"
-                    style={linkStyle}
-                >
-                    {title}
-                </HashLink>
-            );
-        }
-    }
 }