Merge branch 'development' into fix/asset-buyer/price-per-token

* development:
  Publish
  Updated CHANGELOGS
  Fix a bug when undefined was been tried to convert to an array
  feat(instant): add extra asset metadata
  chore: fix linter error
  Improve logo spacing
  fix: lowercase supplied address before comparing with derived addresses (which are not checksummed)
  Remove unused instance variable
  update yarn.lock
  Increase logo size
  Replace remaining scroll-links with Link component
  Adjust paddin
  Fix menuItem background colors depending on the context
  Remove "Home" menu item, instead make different parts of logo link to different sections of the website
  Rename tutorial to match verb structure
  chore: Make `External exports` clickable on sidebar
  style: reduce border size on version dropdown
  style: make line-height of sidebar title 26px, make sure still bottom aligned with version picker
  Update yarn.lock
  style: remove small gap under topbar

11 files changed, 49 insertions, 19 deletions

diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2840d5960..ac331db79 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,17 +1,34 @@
 import { Link } from '@0x/react-shared';
 import * as React from 'react';
+import { styled } from 'ts/style/theme';
 import { WebsitePaths } from 'ts/types';
 
+import { Container } from '../ui/container';
+
 export interface DocsLogoProps {
-    height: number;
     containerStyle?: React.CSSProperties;
 }
 
+const Image = styled.img`
+    &:hover {
+        opacity: 0.7;
+    }
+`;
+
 export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
-        <Link to={WebsitePaths.Docs}>
-            <img src="/images/docs_logo.svg" height={props.height} />
-        </Link>
+        <Container className="flex">
+            <Container>
+                <Link to={WebsitePaths.Home}>
+                    <Image src="/images/developers/logo/0x.svg" height={34} />
+                </Link>
+            </Container>
+            <Container paddingTop="6px" paddingLeft="7px">
+                <Link to={WebsitePaths.Docs}>
+                    <Image src="/images/developers/logo/docs.svg" height={20} />
+                </Link>
+            </Container>
+        </Container>
     );
 };
 
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index 2054d0860..c4291b78f 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -38,17 +38,17 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
         return (
             <Container height={80}>
                 <Container
-                    className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start"
+                    className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
                     width="100%"
                 >
                     <Container className="sm-hide xs-hide">
-                        <Container className="flex items-center justify-between right" width="300px">
+                        <Container className="flex items-center justify-between right" width="250px">
                             {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
                         </Container>
                     </Container>
                     <Container className="lg-hide md-hide">
                         <Container paddingTop="6px">
-                            <DocsLogo height={30} />
+                            <DocsLogo />
                         </Container>
                     </Container>
                     <Container className="md-hide lg-hide absolute" right="18px" top="12px">
@@ -63,7 +63,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
                         />
                     </Container>
                 </Container>
-                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} />
+                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'16px'} />
                 {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
             </Container>
         );
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
index fece2704b..9ced52c74 100644
--- a/packages/website/ts/components/documentation/sidebar_header.tsx
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -29,6 +29,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
                         fontColor={colors.lightLinkBlue}
                         fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
                         fontWeight="bold"
+                        lineHeight="26px"
                     >
                         {title}
                     </Text>
@@ -36,7 +37,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
                 {!_.isUndefined(docsVersion) &&
                     !_.isUndefined(availableDocVersions) &&
                     !_.isUndefined(onVersionSelected) && (
-                        <div className="right" style={{ alignSelf: 'flex-end' }}>
+                        <div className="right" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}>
                             <VersionDropDown
                                 selectedVersion={docsVersion}
                                 versions={availableDocVersions}
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
index a1c8b0547..5e77530fd 100644
--- a/packages/website/ts/components/documentation/version_drop_down.tsx
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -27,7 +27,7 @@ const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className,
 
 const ActiveNode = styled(PlainActiveNode)`
     cursor: pointer;
-    border: 2px solid ${colors.beigeWhite};
+    border: 1px solid ${colors.beigeWhite};
     border-radius: 4px;
     padding: 4px 6px 4px 8px;
 `;
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 6e85c1499..b8a35fab0 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -89,7 +89,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
         );
     }
     private _renderDropdownMenu(): React.ReactNode {
-        const sectionPadding = '28px';
+        const sectionPadding = '26px';
         const dropdownMenu = (
             <Container>
                 <Container className="flex" padding={sectionPadding}>
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index db7d55261..4d4bc4617 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -4,11 +4,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Button } from 'ts/components/ui/button';
 import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
 
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldReformatMenuItemNames?: boolean;
+    screenWidth: ScreenWidths;
 }
 
 export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
@@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
                 ...link,
                 title: menuItemTitle,
             };
-            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />;
         });
         // tslint:disable-next-line:no-unused-variable
         return (
@@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
 
 export interface MenuItemProps {
     link: ALink;
+    screenWidth: ScreenWidths;
 }
 
 export interface MenuItemState {
@@ -70,7 +73,13 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
                     borderRadius="4px"
                     padding="0.4em 0.375em"
                     width="100%"
-                    backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
+                    backgroundColor={
+                        isActive
+                            ? colors.lightLinkBlue
+                            : this.props.screenWidth === ScreenWidths.Sm
+                                ? 'white'
+                                : colors.grey100
+                    }
                     fontSize="14px"
                     textAlign="left"
                 >
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 89389e488..a84be7bfe 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -157,9 +157,10 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                     >
                         <Container
                             borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
+                            paddingBottom="2px"
                         >
                             <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
-                                <DocsLogo height={36} />
+                                <DocsLogo />
                             </Container>
                         </Container>
                         <SidebarContainer onWheel={this._throttledSidebarScrolling}>
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 8392c90e4..adf2261b5 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -94,7 +94,11 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? (
             <div />
         ) : (
-            <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+            <NestedSidebarMenu
+                sidebarHeader={this._renderSidebarHeader()}
+                sectionNameToLinks={sectionNameToLinks}
+                screenWidth={this.props.screenWidth}
+            />
         );
         return (
             <DevelopersPage
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index bbbee2d2d..017573304 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -346,6 +346,7 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
                 sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
                 sectionNameToLinks={sectionNameToLinks}
                 shouldReformatMenuItemNames={false}
+                screenWidth={this.props.screenWidth}
             />
         );
         return (
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index c1802b1f8..c3c1600a5 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -76,6 +76,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             <NestedSidebarMenu
                 sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
                 sectionNameToLinks={sectionNameToLinks}
+                screenWidth={this.props.screenWidth}
             />
         );
         return (
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 0a8a86c50..379f28022 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -104,10 +104,6 @@ export const constants = {
     URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f',
     DEVELOPER_TOPBAR_LINKS: [
         {
-            title: Key.Home,
-            to: WebsitePaths.Home,
-        },
-        {
             title: Key.Wiki,
             to: WebsitePaths.Wiki,
         },