Merge branch 'development' into feature/web3-abi-v2-types

25 files changed, 491 insertions, 208 deletions

diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md
index 6cb8cd0b0..642b972a2 100644
--- a/packages/website/CHANGELOG.md
+++ b/packages/website/CHANGELOG.md
@@ -1,5 +1,5 @@
 # CHANGELOG
 
-## v0.x.x - _TBD_
+## v0.0.1 - _February 16, 2018_
 
-    * Added new team members to the about page (#317)
+    * Re-designed wiki + doc page template (#405)
diff --git a/packages/website/less/all.less b/packages/website/less/all.less
index 7f2a8fc67..113dff0be 100644
--- a/packages/website/less/all.less
+++ b/packages/website/less/all.less
@@ -61,7 +61,8 @@ a {
  */
 ::-webkit-scrollbar {
     -webkit-appearance: none;
-    width: 7px;
+    width: 4px;
+    height: 2px;
 }
 ::-webkit-scrollbar-thumb {
     border-radius: 4px;
@@ -85,19 +86,28 @@ a {
 }
 
 code {
-    font-family: 'Roboto';
-    background-color: #f3f4f4;
-    color: rgb(36, 41, 46);
-    padding: 3px;
-
-    &.hljs {
-        background-color: #dde4e9 !important; // blue gray
-        border-left: 5px solid #0091ea !important; // colors.lightBlueA700
-        padding: 30px;
-    }
+    border: 1px solid #e3eefe;
+    font-family: 'Roboto Mono';
+    background-color: #f2f6ff !important; // lightBlue
 }
 
 #wiki {
+    p {
+        color: #515151; // grey750
+        fontsize: 15;
+    }
+
+    a {
+        color: #1d5cde; // linkBlue
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+        padding-top: 15px;
+    }
+
     p,
     blockquote,
     ol,
diff --git a/packages/website/package.json b/packages/website/package.json
index a89bc0de3..1643cf0bd 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0xproject/website",
-    "version": "0.0.15",
+    "version": "0.0.16",
     "private": true,
     "description": "Website and 0x portal dapp",
     "scripts": {
@@ -18,9 +18,9 @@
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
-        "0x.js": "^0.32.3",
-        "@0xproject/subproviders": "^0.4.2",
-        "@0xproject/utils": "^0.3.3",
+        "0x.js": "^0.32.4",
+        "@0xproject/subproviders": "^0.5.0",
+        "@0xproject/utils": "^0.3.4",
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
@@ -98,7 +98,7 @@
         "style-loader": "0.13.x",
         "tslint": "5.8.0",
         "typescript": "2.7.1",
-        "web3-typescript-typings": "^0.9.10",
+        "web3-typescript-typings": "^0.9.11",
         "webpack": "^3.1.0",
         "webpack-dev-middleware": "^1.10.0",
         "webpack-dev-server": "^2.5.0"
diff --git a/packages/website/public/css/github-gist.css b/packages/website/public/css/github-gist.css
new file mode 100644
index 000000000..d5c8751c5
--- /dev/null
+++ b/packages/website/public/css/github-gist.css
@@ -0,0 +1,71 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+    display: block;
+    background: white;
+    padding: 0.5em;
+    color: #333333;
+    overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+    color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+    color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+    color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+    color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+    color: #63a35c;
+}
+
+.hljs-tag {
+    color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+    color: #795da3;
+}
+
+.hljs-addition {
+    color: #55a532;
+    background-color: #eaffea;
+}
+
+.hljs-deletion {
+    color: #bd2c00;
+    background-color: #ffecec;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}
diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png
new file mode 100644
index 000000000..ba9bb8a3a
--- /dev/null
+++ b/packages/website/public/images/doc_icons/connect.png
diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png
new file mode 100644
index 000000000..f5c6545ca
--- /dev/null
+++ b/packages/website/public/images/doc_icons/contracts.png
diff --git a/packages/website/public/images/doc_icons/wiki.png b/packages/website/public/images/doc_icons/wiki.png
new file mode 100644
index 000000000..d7854d54b
--- /dev/null
+++ b/packages/website/public/images/doc_icons/wiki.png
diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png
new file mode 100644
index 000000000..029777ffe
--- /dev/null
+++ b/packages/website/public/images/doc_icons/zeroExJs.png
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index b40ee62fa..3072ff03d 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -12,7 +12,7 @@
     <title>0x: The Protocol for Trading Tokens</title>
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
-    <link rel="stylesheet" href="/css/atom-one-light.css">
+    <link rel="stylesheet" href="/css/github-gist.css">
     <link rel="stylesheet" href="/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="/css/roboto.css">
     <link rel="stylesheet" href="/css/roboto_mono.css">
@@ -26,48 +26,98 @@
     <!-- Facebook SDK -->
     <div id="fb-root"></div>
     <script>
-        (function (d, s, id) {
-            var js, fjs = d.getElementsByTagName(s)[0];
-            if (d.getElementById(id)) return;
-            js = d.createElement(s); js.id = id;
-            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192";
-            fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-    </script>
+    (function(d, s, id) {
+    var js,
+        fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return;
+    js = d.createElement(s);
+    js.id = id;
+    js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192';
+    fjs.parentNode.insertBefore(js, fjs);
+})(document, 'script', 'facebook-jssdk');
+</script>
     <div id="app"></div>
     <!-- End Facebook SDK -->
     <!-- Twitter SDK -->
     <script>
-        window.twttr = (function (d, s, id) {
-            var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};
-            if (d.getElementById(id)) return t;
-            js = d.createElement(s);
-            js.id = id;
-            js.src = "https://platform.twitter.com/widgets.js";
-            fjs.parentNode.insertBefore(js, fjs);
+    window.twttr = (function(d, s, id) {
+    var js,
+        fjs = d.getElementsByTagName(s)[0],
+        t = window.twttr || {};
+    if (d.getElementById(id)) return t;
+    js = d.createElement(s);
+    js.id = id;
+    js.src = 'https://platform.twitter.com/widgets.js';
+    fjs.parentNode.insertBefore(js, fjs);
 
-            t._e = [];
-            t.ready = function (f) {
-                t._e.push(f);
-            };
-            return t;
-        }(document, "script", "twitter-wjs"));
-    </script>
+    t._e = [];
+    t.ready = function(f) {
+        t._e.push(f);
+    };
+    return t;
+})(document, 'script', 'twitter-wjs');
+</script>
     <!-- End Twitter SDK -->
     <!-- Segment.io -->
     <script>
-        !function () {
-            var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else {
-            analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t) { var e = document.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = ("https:" === document.location.protocol ? "https://" : "http://") + "cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(e, n) }; analytics.SNIPPET_VERSION = "4.0.0";
-                analytics.load("T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n");
-                analytics.page();
+    !(function() {
+    var analytics = (window.analytics = window.analytics || []);
+    if (!analytics.initialize)
+        if (analytics.invoked) window.console && console.error && console.error('Segment snippet included twice.');
+        else {
+            analytics.invoked = !0;
+            analytics.methods = [
+                'trackSubmit',
+                'trackClick',
+                'trackLink',
+                'trackForm',
+                'pageview',
+                'identify',
+                'reset',
+                'group',
+                'track',
+                'ready',
+                'alias',
+                'debug',
+                'page',
+                'once',
+                'off',
+                'on',
+            ];
+            analytics.factory = function(t) {
+                return function() {
+                    var e = Array.prototype.slice.call(arguments);
+                    e.unshift(t);
+                    analytics.push(e);
+                    return analytics;
+                };
+            };
+            for (var t = 0; t < analytics.methods.length; t++) {
+                var e = analytics.methods[t];
+                analytics[e] = analytics.factory(e);
             }
-        }();
-    </script>
+            analytics.load = function(t) {
+                var e = document.createElement('script');
+                e.type = 'text/javascript';
+                e.async = !0;
+                e.src =
+                    ('https:' === document.location.protocol ? 'https://' : 'http://') +
+                    'cdn.segment.com/analytics.js/v1/' +
+                    t +
+                    '/analytics.min.js';
+                var n = document.getElementsByTagName('script')[0];
+                n.parentNode.insertBefore(e, n);
+            };
+            analytics.SNIPPET_VERSION = '4.0.0';
+            analytics.load('T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n');
+            analytics.page();
+        }
+})();
+</script>
     <!-- End Segment.io -->
 
     <!-- Main -->
     <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index b1367be4f..a412007f2 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -228,52 +228,54 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 openSecondary={true}
                 onRequestChange={this._onMenuButtonClick.bind(this)}
             >
-                {this._renderPortalMenu()}
-                {this._renderDocsMenu()}
-                {this._renderWiki()}
-                <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
-                    Website
-                </div>
-                <Link to={WebsitePaths.Home} className="text-decoration-none">
-                    <MenuItem className="py2">Home</MenuItem>
-                </Link>
-                <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
-                    <MenuItem className="py2">Wiki</MenuItem>
-                </Link>
-                {!this._isViewing0xjsDocs() && (
-                    <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                        <MenuItem className="py2">0x.js Docs</MenuItem>
+                <div className="clearfix">
+                    {this._renderPortalMenu()}
+                    {this._renderDocsMenu()}
+                    {this._renderWiki()}
+                    <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
+                        Website
+                    </div>
+                    <Link to={WebsitePaths.Home} className="text-decoration-none">
+                        <MenuItem className="py2">Home</MenuItem>
                     </Link>
-                )}
-                {!this._isViewingConnectDocs() && (
-                    <Link to={WebsitePaths.Connect} className="text-decoration-none">
-                        <MenuItem className="py2">0x Connect Docs</MenuItem>
+                    <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
+                        <MenuItem className="py2">Wiki</MenuItem>
                     </Link>
-                )}
-                {!this._isViewingSmartContractsDocs() && (
-                    <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
-                        <MenuItem className="py2">Smart Contract Docs</MenuItem>
+                    {!this._isViewing0xjsDocs() && (
+                        <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
+                            <MenuItem className="py2">0x.js Docs</MenuItem>
+                        </Link>
+                    )}
+                    {!this._isViewingConnectDocs() && (
+                        <Link to={WebsitePaths.Connect} className="text-decoration-none">
+                            <MenuItem className="py2">0x Connect Docs</MenuItem>
+                        </Link>
+                    )}
+                    {!this._isViewingSmartContractsDocs() && (
+                        <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
+                            <MenuItem className="py2">Smart Contract Docs</MenuItem>
+                        </Link>
+                    )}
+                    {!this._isViewingPortal() && (
+                        <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
+                            <MenuItem className="py2">Portal DApp</MenuItem>
+                        </Link>
+                    )}
+                    <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
+                        <MenuItem className="py2">Whitepaper</MenuItem>
+                    </a>
+                    <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
+                        <MenuItem className="py2">About</MenuItem>
                     </Link>
-                )}
-                {!this._isViewingPortal() && (
-                    <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
-                        <MenuItem className="py2">Portal DApp</MenuItem>
+                    <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
+                        <MenuItem className="py2">Blog</MenuItem>
+                    </a>
+                    <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+                        <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
+                            FAQ
+                        </MenuItem>
                     </Link>
-                )}
-                <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
-                    <MenuItem className="py2">Whitepaper</MenuItem>
-                </a>
-                <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
-                    <MenuItem className="py2">About</MenuItem>
-                </Link>
-                <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
-                    <MenuItem className="py2">Blog</MenuItem>
-                </a>
-                <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
-                    <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
-                        FAQ
-                    </MenuItem>
-                </Link>
+                </div>
             </Drawer>
         );
     }
@@ -288,12 +290,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
-                    {sectionTitle}
-                </div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menu}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                    title={this.props.docsInfo.displayName}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                     selectedVersion={this.props.docsVersion}
@@ -310,12 +310,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
-                    0x Protocol Wiki
-                </div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                    title="Wiki"
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                 />
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index 7f7ea006e..056d741e0 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -8,7 +8,6 @@ const styles: Styles = {
         fontSize: 11,
         height: 10,
         borderRadius: 5,
-        marginTop: 25,
         lineHeight: 0.9,
         fontFamily: 'Roboto Mono',
         marginLeft: 3,
diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.tsx
index 22ba4a7a1..79eafa431 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.tsx
@@ -6,7 +6,8 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
-import { DocsInfoConfig, WebsitePaths } from 'ts/types';
+import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
@@ -23,12 +24,16 @@ const connectDocSections = {
     types: constants.TYPES_SECTION_NAME,
 };
 
+const s3BucketName =
+    configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons';
+const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`;
+
 const docsInfoConfig: DocsInfoConfig = {
     displayName: '0x Connect',
     subPackageName: 'connect',
     packageUrl: 'https://github.com/0xProject/0x.js',
     websitePath: WebsitePaths.Connect,
-    docsJsonRoot: 'https://s3.amazonaws.com/connect-docs-jsons',
+    docsJsonRoot,
     menu: {
         introduction: [connectDocSections.introduction],
         install: [connectDocSections.installation],
@@ -51,11 +56,14 @@ const docsInfoConfig: DocsInfoConfig = {
         'OrderbookChannelSubscriptionOpts',
         'OrderbookRequest',
         'OrderbookResponse',
+        'OrdersRequest',
         'OrdersRequestOpts',
         'PagedRequestOpts',
         'TokenPairsItem',
+        'TokenPairsRequest',
         'TokenPairsRequestOpts',
         'TokenTradeInfo',
+        'WebSocketOrderbookChannelConfig',
         'Order',
         'SignedOrder',
         'ECSignature',
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx
index 96c8c257d..eee2c7cc8 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx
@@ -6,7 +6,8 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
-import { DocsInfoConfig, WebsitePaths } from 'ts/types';
+import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
@@ -35,12 +36,15 @@ const zeroExJsDocSections = {
     types: constants.TYPES_SECTION_NAME,
 };
 
+const s3BucketName = configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons';
+const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`;
+
 const docsInfoConfig: DocsInfoConfig = {
     displayName: '0x.js',
     packageUrl: 'https://github.com/0xProject/0x.js',
     subPackageName: '0x.js',
     websitePath: WebsitePaths.ZeroExJs,
-    docsJsonRoot: 'https://s3.amazonaws.com/0xjs-docs-jsons',
+    docsJsonRoot,
     menu: {
         introduction: [zeroExJsDocSections.introduction],
         install: [zeroExJsDocSections.installation],
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 7ad1d3b9c..da3728a60 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -37,12 +37,14 @@ import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
 import { utils } from 'ts/utils/utils';
 
+const TOP_BAR_HEIGHT = 60;
 const SCROLL_TOP_ID = 'docsScrollTop';
 
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
     [Networks.Ropsten]: colors.red,
     [Networks.Mainnet]: colors.turquois,
+    [Networks.Rinkeby]: colors.darkYellow,
 };
 
 export interface DocumentationAllProps {
@@ -67,7 +69,7 @@ const styles: Styles = {
         right: 0,
         overflowZ: 'hidden',
         overflowY: 'scroll',
-        minHeight: 'calc(100vh - 1px)',
+        minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
         WebkitOverflowScrolling: 'touch',
     },
     menuContainer: {
@@ -111,7 +113,6 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
                     availableDocVersions={this.props.availableDocVersions}
                     menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
                     menuSubsectionsBySection={menuSubsectionsBySection}
-                    shouldFullWidth={true}
                     docsInfo={this.props.docsInfo}
                 />
                 {_.isUndefined(this.state.docAgnosticFormat) ? (
@@ -129,30 +130,41 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
                         </div>
                     </div>
                 ) : (
-                    <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
-                        <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
+                    <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
+                        <div
+                            className="mx-auto max-width-4 flex"
+                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                        >
                             <div
-                                className="border-right absolute"
-                                style={{ ...styles.menuContainer, ...styles.mainContainers }}
+                                className="relative sm-hide xs-hide"
+                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
                             >
-                                <NestedSidebarMenu
-                                    selectedVersion={this.props.docsVersion}
-                                    versions={this.props.availableDocVersions}
-                                    topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
-                                    menuSubsectionsBySection={menuSubsectionsBySection}
-                                    docPath={this.props.docsInfo.websitePath}
-                                />
+                                <div
+                                    className="border-right absolute"
+                                    style={{
+                                        ...styles.menuContainer,
+                                        ...styles.mainContainers,
+                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                    }}
+                                >
+                                    <NestedSidebarMenu
+                                        selectedVersion={this.props.docsVersion}
+                                        versions={this.props.availableDocVersions}
+                                        title={this.props.docsInfo.displayName}
+                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
+                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        docPath={this.props.docsInfo.websitePath}
+                                    />
+                                </div>
                             </div>
-                        </div>
-                        <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
-                            <div id="documentation" style={styles.mainContainers} className="absolute">
-                                <div id={SCROLL_TOP_ID} />
-                                <h1 className="md-pl2 sm-pl3">
-                                    <a href={this.props.docsInfo.packageUrl} target="_blank">
-                                        {this.props.docsInfo.displayName}
-                                    </a>
-                                </h1>
-                                {this._renderDocumentation()}
+                            <div
+                                className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
+                                style={{ backgroundColor: colors.white }}
+                            >
+                                <div id="documentation" style={styles.mainContainers} className="absolute px1">
+                                    <div id={SCROLL_TOP_ID} />
+                                    {this._renderDocumentation()}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -220,7 +232,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
         });
         return (
             <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
-                <div className="flex">
+                <div className="flex pb2">
                     <div style={{ marginRight: 7 }}>
                         <SectionHeader sectionName={sectionName} />
                     </div>
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index dfde5931b..1bc6aa4f4 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -28,8 +28,7 @@ const styles: Styles = {
         color: colors.white,
         height: 11,
         borderRadius: 14,
-        marginTop: 19,
-        lineHeight: 0.8,
+        lineHeight: 0.9,
     },
 };
 
@@ -55,16 +54,18 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 {!method.isConstructor && (
-                    <div className="flex">
+                    <div className="flex pb2 pt2">
                         {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
                         {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
                         {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
-                        <AnchorTitle
-                            headerSize={HeaderSizes.H3}
-                            title={method.name}
-                            id={`${this.props.sectionName}-${method.name}`}
-                            shouldShowAnchor={this.state.shouldShowAnchor}
-                        />
+                        <div style={{ lineHeight: 1.3 }}>
+                            <AnchorTitle
+                                headerSize={HeaderSizes.H3}
+                                title={method.name}
+                                id={`${this.props.sectionName}-${method.name}`}
+                                shouldShowAnchor={this.state.shouldShowAnchor}
+                            />
+                        </div>
                     </div>
                 )}
                 <code className="hljs">
@@ -121,12 +122,17 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                     style={{ borderBottom: '1px solid #f0f4f7' }}
                 >
                     <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12">
-                        <div className="bold">{parameter.name}</div>
+                        <div
+                            className="bold"
+                            style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
+                        >
+                            {parameter.name}
+                        </div>
                         <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}>
                             {isOptional && 'optional'}
                         </div>
                     </div>
-                    <div className="col lg-col-8 md-col-8 sm-col-12 col-12">
+                    <div className="col lg-col-8 md-col-8 sm-col-12 col-12" style={{ paddingLeft: 5 }}>
                         {parameter.comment && <Comment comment={parameter.comment} />}
                     </div>
                 </div>
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
index 041dcd093..22294e428 100644
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ b/packages/website/ts/pages/documentation/method_signature.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Type } from 'ts/pages/documentation/type';
 import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
@@ -22,26 +23,52 @@ const defaultProps = {
 export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => {
     const sectionName = constants.TYPES_SECTION_NAME;
     const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
-    const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => {
-        return [prev, ', ', curr];
+    const paramStringArray: any[] = [];
+    // HACK: For now we don't put params on newlines if there are less then 2 of them.
+    // Ideally we would check the character length of the resulting method signature and
+    // if it exceeds the available space, put params on their own lines.
+    const hasMoreThenTwoParams = parameters.length > 2;
+    _.each(parameters, (param: React.ReactNode, i: number) => {
+        const finalParam = hasMoreThenTwoParams ? (
+            <span className="pl2" key={`param-${i}`}>
+                {param}
+            </span>
+        ) : (
+            param
+        );
+        paramStringArray.push(finalParam);
+        const comma = hasMoreThenTwoParams ? (
+            <span key={`param-comma-${i}`}>
+                , <br />
+            </span>
+        ) : (
+            ', '
+        );
+        paramStringArray.push(comma);
     });
+    if (!hasMoreThenTwoParams) {
+        paramStringArray.pop();
+    }
     const methodName = props.shouldHideMethodName ? '' : props.method.name;
     const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter)
         ? undefined
         : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
     return (
-        <span>
+        <span style={{ fontSize: 15 }}>
             {props.method.callPath}
             {methodName}
-            {typeParameterIfExists}({paramString})
-            {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
+            {typeParameterIfExists}({hasMoreThenTwoParams && <br />}
+            {paramStringArray})
             {props.method.returnType && (
-                <Type
-                    type={props.method.returnType}
-                    sectionName={sectionName}
-                    typeDefinitionByName={props.typeDefinitionByName}
-                    docsInfo={props.docsInfo}
-                />
+                <span>
+                    {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
+                    <Type
+                        type={props.method.returnType}
+                        sectionName={sectionName}
+                        typeDefinitionByName={props.typeDefinitionByName}
+                        docsInfo={props.docsInfo}
+                    />
+                </span>
             )}
         </span>
     );
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index e989e7129..b306fa053 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -118,6 +118,23 @@ export function Type(props: TypeProps): any {
             typeName = type.name;
             break;
 
+        case TypeDocTypes.Intersection:
+            const intersectionsTypes = _.map(type.types, t => {
+                return (
+                    <Type
+                        key={`type-${t.name}-${t.value}-${t.typeDocType}`}
+                        type={t}
+                        sectionName={props.sectionName}
+                        typeDefinitionByName={props.typeDefinitionByName}
+                        docsInfo={props.docsInfo}
+                    />
+                );
+            });
+            typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
+                return [prev, '&', curr];
+            });
+            break;
+
         default:
             throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType);
     }
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
index db5be1f59..0270618a0 100644
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ b/packages/website/ts/pages/shared/anchor_title.tsx
@@ -34,18 +34,13 @@ const styles: Styles = {
     },
     h1: {
         fontSize: '1.8em',
-        WebkitMarginBefore: '0.83em',
-        WebkitMarginAfter: '0.83em',
     },
     h2: {
         fontSize: '1.5em',
-        WebkitMarginBefore: '0.83em',
-        WebkitMarginAfter: '0.83em',
+        fontWeight: 400,
     },
     h3: {
         fontSize: '1.17em',
-        WebkitMarginBefore: '1em',
-        WebkitMarginAfter: '1em',
     },
 };
 
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index be96fda16..98ca3aee6 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -17,7 +17,7 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
     }
     public render() {
         return (
-            <span style={{ fontSize: 16 }}>
+            <span style={{ fontSize: 14 }}>
                 <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
             </span>
         );
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 5487dc8cc..4d7d8b4ca 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -6,6 +6,7 @@ import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
 import { HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface MarkdownSectionProps {
@@ -34,14 +35,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const id = utils.getIdFromName(sectionName);
         return (
             <div
-                className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
+                className="md-px1 sm-px2 overflow-hidden"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id}>
-                    <div className="clearfix">
+                    <div className="clearfix pt3">
                         <div className="col lg-col-8 md-col-8 sm-col-12">
-                            <span style={{ textTransform: 'capitalize' }}>
+                            <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={this.props.headerSize}
                                     title={sectionName}
@@ -50,17 +51,19 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 />
                             </span>
                         </div>
-                        <div className="col col-4 sm-hide xs-hide py2 right-align">
+                        <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
                             {!_.isUndefined(this.props.githubLink) && (
-                                <RaisedButton
+                                <a
                                     href={this.props.githubLink}
                                     target="_blank"
-                                    label="Edit on Github"
-                                    icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
-                                />
+                                    style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
+                                >
+                                    Edit on Github
+                                </a>
                             )}
                         </div>
                     </div>
+                    <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
                     <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
                 </ScrollElement>
             </div>
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 849c33504..ba794ee9f 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -11,12 +11,12 @@ import { utils } from 'ts/utils/utils';
 interface NestedSidebarMenuProps {
     topLevelMenu: { [topLevel: string]: string[] };
     menuSubsectionsBySection: MenuSubsectionsBySection;
+    title: string;
     shouldDisplaySectionHeaders?: boolean;
     onMenuItemClick?: () => void;
     selectedVersion?: string;
     versions?: string[];
     docPath?: string;
-    isSectionHeaderClickable?: boolean;
 }
 
 interface NestedSidebarMenuState {}
@@ -29,10 +29,20 @@ const styles: Styles = {
         minHeight: 48,
     },
     menuItemInnerDivWithHeaders: {
+        color: colors.grey800,
+        fontSize: 14,
         lineHeight: 2,
+        padding: 0,
     },
 };
 
+const titleToIcon: { [title: string]: string } = {
+    '0x.js': 'zeroExJs.png',
+    '0x Connect': 'connect.png',
+    '0x Smart Contracts': 'contracts.png',
+    Wiki: 'wiki.png',
+};
+
 export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
     public static defaultProps: Partial<NestedSidebarMenuProps> = {
         shouldDisplaySectionHeaders: true,
@@ -44,17 +54,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             if (this.props.shouldDisplaySectionHeaders) {
                 const id = utils.getIdFromName(sectionName);
                 return (
-                    <div key={`section-${sectionName}`} className="py1">
-                        <ScrollLink
-                            to={id}
-                            offset={-20}
-                            duration={constants.DOCS_SCROLL_DURATION_MS}
-                            containerId={constants.DOCS_CONTAINER_ID}
-                        >
-                            <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
-                                {finalSectionName.toUpperCase()}
-                            </div>
-                        </ScrollLink>
+                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
+                        <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
+                            {finalSectionName.toUpperCase()}
+                        </div>
                         {this._renderMenuItems(menuItems)}
                     </div>
                 );
@@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
         });
         return (
             <div>
+                {this._renderEmblem()}
                 {!_.isUndefined(this.props.versions) &&
                     !_.isUndefined(this.props.selectedVersion) &&
                     !_.isUndefined(this.props.docPath) && (
@@ -73,7 +77,32 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             docPath={this.props.docPath}
                         />
                     )}
-                {navigation}
+                <div className="pl1">{navigation}</div>
+            </div>
+        );
+    }
+    private _renderEmblem() {
+        return (
+            <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
+                <div className="flex" style={{ fontSize: 25 }}>
+                    <div className="robotoMono" style={{ fontWeight: 'bold' }}>
+                        0x
+                    </div>
+                    <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
+                        docs
+                    </div>
+                </div>
+                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}>
+                    |
+                </div>
+                <div className="flex">
+                    <div>
+                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" />
+                    </div>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+                        {this.props.title}
+                    </div>
+                </div>
             </div>
         );
     }
@@ -132,7 +161,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                                     onTouchTap={this._onMenuItemClick.bind(this, name)}
                                     style={{ minHeight: 35 }}
                                     innerDivStyle={{
-                                        paddingLeft: 36,
+                                        paddingLeft: 16,
                                         fontSize: 14,
                                         lineHeight: '35px',
                                     }}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index daf5c27a7..bbbda6eee 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
+import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { scroller } from 'react-scroll';
@@ -13,6 +14,7 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
+const TOP_BAR_HEIGHT = 60;
 const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
 
 export interface WikiProps {
@@ -22,6 +24,7 @@ export interface WikiProps {
 
 interface WikiState {
     articlesBySection: ArticlesBySection;
+    isHoveringSidebar: boolean;
 }
 
 const styles: Styles = {
@@ -32,14 +35,13 @@ const styles: Styles = {
         bottom: 0,
         right: 0,
         overflowZ: 'hidden',
-        overflowY: 'scroll',
-        minHeight: 'calc(100vh - 1px)',
+        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
         WebkitOverflowScrolling: 'touch',
     },
     menuContainer: {
         borderColor: colors.grey300,
         maxWidth: 330,
-        marginLeft: 20,
+        backgroundColor: colors.gray40,
     },
 };
 
@@ -51,6 +53,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         this._isUnmounted = false;
         this.state = {
             articlesBySection: undefined,
+            isHoveringSidebar: false,
         };
     }
     public componentWillMount() {
@@ -65,6 +68,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
             ? {}
             : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+        const mainContainersStyle: React.CSSProperties = {
+            ...styles.mainContainers,
+            overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+        };
         return (
             <div>
                 <DocumentTitle title="0x Protocol Wiki" />
@@ -72,10 +79,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     menuSubsectionsBySection={menuSubsectionsBySection}
-                    shouldFullWidth={true}
                 />
                 {_.isUndefined(this.state.articlesBySection) ? (
-                    <div className="col col-12" style={styles.mainContainers}>
+                    <div className="col col-12" style={mainContainersStyle}>
                         <div
                             className="relative sm-px2 sm-pt2 sm-m1"
                             style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
@@ -89,28 +95,50 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                         </div>
                     </div>
                 ) : (
-                    <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
-                        <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
+                    <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
+                        <div
+                            className="mx-auto max-width-4 flex"
+                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                        >
                             <div
-                                className="border-right absolute pt2"
-                                style={{ ...styles.menuContainer, ...styles.mainContainers }}
+                                className="relative lg-pl0 md-pl1 sm-hide xs-hide"
+                                style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }}
                             >
-                                <NestedSidebarMenu
-                                    topLevelMenu={menuSubsectionsBySection}
-                                    menuSubsectionsBySection={menuSubsectionsBySection}
-                                    isSectionHeaderClickable={true}
-                                />
+                                <div
+                                    className="absolute"
+                                    style={{
+                                        ...styles.menuContainer,
+                                        ...mainContainersStyle,
+                                        height: 'calc(100vh - 76px)',
+                                    }}
+                                    onMouseEnter={this._onSidebarHover.bind(this)}
+                                    onMouseLeave={this._onSidebarHoverOff.bind(this)}
+                                >
+                                    <NestedSidebarMenu
+                                        topLevelMenu={menuSubsectionsBySection}
+                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        title="Wiki"
+                                    />
+                                </div>
                             </div>
-                        </div>
-                        <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
-                            <div id="documentation" style={styles.mainContainers} className="absolute">
-                                <div id="0xProtocolWiki" />
-                                <h1 className="md-pl2 sm-pl3">
-                                    <a href={constants.URL_GITHUB_WIKI} target="_blank">
-                                        0x Protocol Wiki
-                                    </a>
-                                </h1>
-                                <div id="wiki">{this._renderWikiArticles()}</div>
+                            <div
+                                className="relative"
+                                style={{
+                                    width: '100%',
+                                    height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                    backgroundColor: 'white',
+                                }}
+                            >
+                                <div
+                                    id="documentation"
+                                    style={{ ...mainContainersStyle, overflow: 'auto' }}
+                                    className="absolute"
+                                >
+                                    <div id="0xProtocolWiki" />
+                                    <div id="wiki" style={{ paddingRight: 2 }}>
+                                        {this._renderWikiArticles()}
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -135,18 +163,22 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                         headerSize={HeaderSizes.H2}
                         githubLink={githubLink}
                     />
-                    <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}>
-                        See a way to make this article better?{' '}
-                        <a href={githubLink} target="_blank">
-                            Edit here →
-                        </a>
+                    <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}>
+                        <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}>
+                            See a way to improve this article?
+                        </div>
+                        <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2">
+                            <RaisedButton href={githubLink} target="_blank" label="Edit on Github" />
+                        </div>
                     </div>
                 </div>
             );
         });
         return (
-            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
-                <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
+            <div key={`section-${sectionName}`} className="py2 md-px1 sm-px2">
+                {/* <div className="pl2">
+                    <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
+                </div> */}
                 {renderedArticles}
             </div>
         );
@@ -203,4 +235,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         }
         return menuSubsectionsBySection;
     }
+    private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+        this.setState({
+            isHoveringSidebar: true,
+        });
+    }
+    private _onSidebarHoverOff() {
+        this.setState({
+            isHoveringSidebar: false,
+        });
+    }
 }
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 19fc24852..645c9cc11 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -324,6 +324,7 @@ export enum TypeDocTypes {
     Reflection = 'reflection',
     Union = 'union',
     TypeParameter = 'typeParameter',
+    Intersection = 'intersection',
     Unknown = 'unknown',
 }
 
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
index 58ce667e3..2eead95c7 100644
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -2,12 +2,14 @@ import { colors as materialUiColors } from 'material-ui/styles';
 
 export const colors = {
     ...materialUiColors,
+    gray40: '#F8F8F8',
     grey50: '#FAFAFA',
     grey100: '#F5F5F5',
     lightestGrey: '#F0F0F0',
     greyishPink: '#E6E5E5',
     grey300: '#E0E0E0',
     beigeWhite: '#E4E4E4',
+    grey350: '#cacaca',
     grey400: '#BDBDBD',
     lightGrey: '#BBBBBB',
     grey500: '#9E9E9E',
@@ -15,6 +17,7 @@ export const colors = {
     darkGrey: '#818181',
     landingLinkGrey: '#919191',
     grey700: '#616161',
+    grey750: '#515151',
     grey800: '#424242',
     darkerGrey: '#393939',
     heroGrey: '#404040',
@@ -23,6 +26,7 @@ export const colors = {
     dharmaDarkGrey: '#252525',
     lightBlue: '#60A4F4',
     lightBlueA700: '#0091EA',
+    linkBlue: '#1D5CDE',
     darkBlue: '#4D5481',
     turquois: '#058789',
     lightPurple: '#A81CA6',
@@ -40,4 +44,5 @@ export const colors = {
     amber600: '#FFB300',
     orange: '#E69D00',
     amber800: '#FF8F00',
+    darkYellow: '#caca03',
 };
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 69773eae7..8e359f8bd 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -39,6 +39,12 @@ export const configs = {
                 [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570',
                 [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f',
             },
+            [Networks.Rinkeby]: {
+                [SmartContractDocSections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05',
+                [SmartContractDocSections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d',
+                [SmartContractDocSections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8',
+                [SmartContractDocSections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6',
+            },
         },
     } as ContractAddresses,
     DEFAULT_DERIVATION_PATH: `44'/60'/0'`,