Merge pull request #1163 from 0xProject/devSectionFixes

Developer Section Fixes

15 files changed, 139 insertions, 111 deletions

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 04e1387c6..d3ccfa8da 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -50,7 +50,7 @@
         "react": "^16.4.2",
         "react-dom": "^16.4.2",
         "react-markdown": "^3.2.2",
-        "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state",
+        "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
         "react-tooltip": "^3.2.7",
         "semver": "5.5.0",
         "styled-components": "^3.3.0"
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index 488586f89..7a150bf35 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -55,7 +55,7 @@
         "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162",
         "react-markdown": "^3.2.2",
         "react-router-dom": "^4.1.1",
-        "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state",
+        "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
         "styled-components": "^3.3.0",
         "valid-url": "^1.0.9"
     },
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index e6a7d80d5..42c910c11 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -48,7 +48,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const formattedSectionName = utils.convertCamelCaseToSpaces(sectionName);
         const title = !_.isUndefined(this.props.alternativeSectionTitle)
             ? this.props.alternativeSectionTitle
-            : formattedSectionName;
+            : _.capitalize(formattedSectionName);
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
@@ -61,7 +61,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={_.capitalize(title)}
+                                    title={title}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
diff --git a/packages/website/package.json b/packages/website/package.json
index 777790ca9..771b1b908 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -52,7 +52,7 @@
         "react-helmet": "^5.2.0",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
-        "react-scroll": "0xproject/react-scroll#similar-to-pr-330-but-with-replace-state",
+        "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
         "react-tooltip": "^3.2.7",
         "react-typist": "^2.0.4",
         "redux": "^3.6.0",
diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json
index 2d3ad6974..95b9bda62 100644
--- a/packages/website/translations/chinese.json
+++ b/packages/website/translations/chinese.json
@@ -80,13 +80,13 @@
     "HOME": "Rocket.chat",
     "ROCKETCHAT": "开发人员",
     "BUILD_A_RELAYER": "build a relayer",
-    "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
+    "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
     "DEVELOP_ON_ETHEREUM": "develop on Ethereum",
-    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
+    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
     "ORDER_BASICS": "0x order basics",
     "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x",
-    "USE_SHARED_LIQUIDITY": "use shared liquidity",
-    "USE_SHARED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API",
+    "USE_NETWORKED_LIQUIDITY": "use networked liquidity",
+    "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index fab8ed56b..465bd49b4 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -84,13 +84,13 @@
     "ROCKETCHAT": "rocket.chat",
     "TRADE_CALL_TO_ACTION": "trade on 0x",
     "BUILD_A_RELAYER": "build a relayer",
-    "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
+    "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
     "DEVELOP_ON_ETHEREUM": "develop on Ethereum",
-    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
+    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
     "ORDER_BASICS": "0x order basics",
     "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x",
-    "USE_SHARED_LIQUIDITY": "use shared liquidity",
-    "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API",
+    "USE_NETWORKED_LIQUIDITY": "use networked liquidity",
+    "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json
index 8470bf9a0..5485e5583 100644
--- a/packages/website/translations/korean.json
+++ b/packages/website/translations/korean.json
@@ -80,13 +80,13 @@
     "ROCKETCHAT": "Rocket.chat",
     "DEVELOPERS": "개발자",
     "BUILD_A_RELAYER": "build a relayer",
-    "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
+    "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
     "DEVELOP_ON_ETHEREUM": "develop on Ethereum",
-    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
+    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
     "ORDER_BASICS": "0x order basics",
     "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x",
-    "USE_SHARED_LIQUIDITY": "use shared liquidity",
-    "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API",
+    "USE_NETWORKED_LIQUIDITY": "use networked liquidity",
+    "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json
index b2bc151ab..a2e2a8cef 100644
--- a/packages/website/translations/russian.json
+++ b/packages/website/translations/russian.json
@@ -80,13 +80,13 @@
     "HOME": "Rocket.chat",
     "ROCKETCHAT": "Для разработчиков",
     "BUILD_A_RELAYER": "build a relayer",
-    "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
+    "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
     "DEVELOP_ON_ETHEREUM": "develop on Ethereum",
-    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
+    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
     "ORDER_BASICS": "0x order basics",
     "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x",
-    "USE_SHARED_LIQUIDITY": "use shared liquidity",
-    "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API",
+    "USE_NETWORKED_LIQUIDITY": "use networked liquidity",
+    "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json
index fefb92447..acbc59c3d 100644
--- a/packages/website/translations/spanish.json
+++ b/packages/website/translations/spanish.json
@@ -81,13 +81,13 @@
     "HOME": "rocket.chat",
     "ROCKETCHAT": "desarrolladores",
     "BUILD_A_RELAYER": "build a relayer",
-    "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
+    "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
     "DEVELOP_ON_ETHEREUM": "develop on Ethereum",
-    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch",
+    "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum",
     "ORDER_BASICS": "0x order basics",
     "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x",
-    "USE_SHARED_LIQUIDITY": "use shared liquidity",
-    "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API",
+    "USE_NETWORKED_LIQUIDITY": "use networked liquidity",
+    "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API",
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index f5d21535a..b279566e0 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -24,7 +24,7 @@ const gettingStartedKeyToLinkInfo2: ALink[] = [
         to: `${WebsitePaths.Wiki}#Ethereum-Development`,
     },
     {
-        title: Key.UseSharedLiquidity,
+        title: Key.UseNetworkedLiquidity,
         to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
     },
 ];
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 934a4cc36..30b79552f 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants } from '@0x/react-shared';
+import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
@@ -6,13 +6,33 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
 import { Container } from 'ts/components/ui/container';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ScreenWidths } from 'ts/types';
+import { styled } from 'ts/style/theme';
+import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const THROTTLE_TIMEOUT = 100;
 const TOP_BAR_HEIGHT = 80;
-const SCROLLER_WIDTH = 4;
+const browserType = utils.getBrowserType();
+let SCROLLBAR_WIDTH;
+switch (browserType) {
+    case BrowserType.Firefox:
+        // HACK: Firefox doesn't allow styling of their scrollbar's.
+        // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
+        const os = utils.getOperatingSystem();
+        SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15;
+        break;
+
+    case BrowserType.Edge:
+        // Edge's scrollbar is placed outside of the div content and doesn't
+        // need to be accounted for
+        SCROLLBAR_WIDTH = 0;
+        break;
+
+    default:
+        SCROLLBAR_WIDTH = 4;
+}
+const SIDEBAR_PADDING = 22;
 
 export interface DevelopersPageProps {
     location: Location;
@@ -24,11 +44,71 @@ export interface DevelopersPageProps {
 }
 
 export interface DevelopersPageState {
-    isHoveringSidebar: boolean;
-    isHoveringMainContent: boolean;
     isSidebarScrolling: boolean;
 }
 
+const isUserOnMobile = sharedUtils.isUserOnMobile();
+
+const scrollableContainerStyles = `
+    position: absolute;
+    top: ${TOP_BAR_HEIGHT}px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    /* Required for hide/show onHover of scrollbar on Microsoft Edge */
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+`;
+
+interface SidebarContainerProps {
+    className?: string;
+}
+
+const SidebarContainer =
+    styled.div <
+    SidebarContainerProps >
+    `
+    ${scrollableContainerStyles}
+    padding-top: 27px;
+    padding-bottom: 100px;
+    padding-left: ${SIDEBAR_PADDING}px;
+    padding-right: ${SIDEBAR_PADDING}px;
+    overflow: hidden;
+    &:hover {
+        overflow: auto;
+        padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px;
+    }
+`;
+
+interface MainContentContainerProps {
+    className?: string;
+}
+
+const MainContentContainer =
+    styled.div <
+    MainContentContainerProps >
+    `
+    ${scrollableContainerStyles}
+    padding-top: 0px;
+    padding-left: 50px;
+    padding-right: 50px;
+    overflow: ${isUserOnMobile ? 'auto' : 'hidden'};
+    &:hover {
+        padding-right: ${50 - SCROLLBAR_WIDTH}px;
+        overflow: auto;
+    }
+    @media (max-width: 40em) {
+        padding-left: 20px;
+        padding-right: 20px;
+        &:hover {
+            padding-right: ${20 - SCROLLBAR_WIDTH}px;
+            overflow: auto;
+        }
+    }
+`;
+
 export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> {
     private readonly _throttledScreenWidthUpdate: () => void;
     private readonly _throttledSidebarScrolling: () => void;
@@ -38,8 +118,6 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
         this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
         this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT);
         this.state = {
-            isHoveringSidebar: false,
-            isHoveringMainContent: false,
             isSidebarScrolling: false,
         };
     }
@@ -57,20 +135,8 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
         window.clearInterval(this._sidebarScrollClearingInterval);
     }
     public render(): React.ReactNode {
-        const scrollableContainerStyles: React.CSSProperties = {
-            position: 'absolute',
-            top: 80,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            overflowX: 'hidden',
-            overflowY: 'scroll',
-            minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-            WebkitOverflowScrolling: 'touch',
-        };
         const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         const mainContentPadding = isSmallScreen ? 20 : 50;
-        const sidebarPadding = 22;
         return (
             <Container
                 className="flex items-center overflow-hidden"
@@ -79,7 +145,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                     colors.white
                 } 50%, ${colors.white} 100%)`}
             >
-                <DocumentTitle title="0x Docs DevelopersPage" />
+                <DocumentTitle title="0x Docs" />
                 <Container className="flex mx-auto" height="100vh">
                     <Container
                         className="sm-hide xs-hide relative"
@@ -96,28 +162,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                                 <DocsLogo height={36} />
                             </Container>
                         </Container>
-                        <div
-                            style={{
-                                ...scrollableContainerStyles,
-                                paddingTop: 27,
-                                overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
-                            }}
-                            onMouseEnter={this._onSidebarHover.bind(this, true)}
-                            onMouseLeave={this._onSidebarHover.bind(this, false)}
-                            onWheel={this._throttledSidebarScrolling}
-                        >
-                            <div
-                                style={{
-                                    paddingBottom: 100,
-                                    paddingLeft: sidebarPadding,
-                                    paddingRight: this.state.isHoveringSidebar
-                                        ? sidebarPadding - SCROLLER_WIDTH
-                                        : sidebarPadding,
-                                }}
-                            >
-                                {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
-                            </div>
-                        </div>
+                        <SidebarContainer onWheel={this._throttledSidebarScrolling}>
+                            {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
+                        </SidebarContainer>
                     </Container>
                     <Container
                         className="relative"
@@ -133,43 +180,14 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                                 sidebar={this.props.sidebar}
                             />
                         </Container>
-                        <div
-                            id={sharedConstants.SCROLL_CONTAINER_ID}
-                            className="absolute"
-                            style={{
-                                ...scrollableContainerStyles,
-                                paddingTop: 0,
-                                paddingLeft: mainContentPadding,
-                                paddingRight: this.state.isHoveringMainContent
-                                    ? mainContentPadding - SCROLLER_WIDTH
-                                    : mainContentPadding,
-                                overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden',
-                            }}
-                            onMouseEnter={this._onMainContentHover.bind(this, true)}
-                            onMouseOver={this._onMainContentHover.bind(this, true)}
-                            onMouseLeave={this._onMainContentHover.bind(this, false)}
-                        >
+                        <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}>
                             {this.props.mainContent}
-                        </div>
+                        </MainContentContainer>
                     </Container>
                 </Container>
             </Container>
         );
     }
-    private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
-        if (isHovering !== this.state.isHoveringSidebar) {
-            this.setState({
-                isHoveringSidebar: isHovering,
-            });
-        }
-    }
-    private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
-        if (isHovering !== this.state.isHoveringMainContent) {
-            this.setState({
-                isHoveringMainContent: isHovering,
-            });
-        }
-    }
     private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void {
         this.setState({
             isSidebarScrolling: true,
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index 74fd0135c..cf229cb3b 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -37,9 +37,9 @@ const TUTORIALS: TutorialInfo[] = [
     },
     {
         iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg',
-        description: Key.UseSharedLiquidityDescription,
+        description: Key.UseNetworkedLiquidityDescription,
         link: {
-            title: Key.UseSharedLiquidity,
+            title: Key.UseNetworkedLiquidity,
             to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
         },
     },
@@ -194,7 +194,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = {
         },
         {
             description:
-                "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+                "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers",
             link: {
                 title: 'Aquaduct',
                 to: 'https://www.npmjs.com/package/aqueduct',
@@ -219,26 +219,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = {
             },
         },
         {
-            description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users",
+            description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users",
             link: {
                 to: 'https://github.com/ERCdEX/widget',
-                title: 'ERCdex Widget',
+                title: 'ERCdEX Widget',
                 shouldOpenInNewTab: true,
             },
         },
         {
-            description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+            description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers",
             link: {
                 to: 'https://github.com/ERCdEX/java',
-                title: 'ERCdex Java SDK',
+                title: 'ERCdEX Java SDK',
                 shouldOpenInNewTab: true,
             },
         },
         {
-            description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+            description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers",
             link: {
                 to: 'https://github.com/ERCdEX/python',
-                title: 'ERCdex Python SDK',
+                title: 'ERCdEX Python SDK',
                 shouldOpenInNewTab: true,
             },
         },
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index fdca61e39..e62300ddf 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -73,10 +73,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 {this._renderWikiArticles()}
             </div>
         );
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         const sidebar = _.isUndefined(this.state.articlesBySection) ? (
             <div />
         ) : (
-            <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+            <NestedSidebarMenu
+                sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
+                sectionNameToLinks={sectionNameToLinks}
+            />
         );
         return (
             <DevelopersPage
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index f85317c7b..22bfd2cb4 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -468,8 +468,8 @@ export enum Key {
     DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION',
     OrderBasics = 'ORDER_BASICS',
     OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION',
-    UseSharedLiquidity = 'USE_SHARED_LIQUIDITY',
-    UseSharedLiquidityDescription = 'USE_SHARED_LIQUIDITY_DESCRIPTION',
+    UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY',
+    UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION',
     ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION',
     Sandbox = 'SANDBOX',
     Github = 'GITHUB',
@@ -590,6 +590,8 @@ export enum BrowserType {
     Chrome = 'Chrome',
     Firefox = 'Firefox',
     Opera = 'Opera',
+    Safari = 'Safari',
+    Edge = 'Edge',
     Other = 'Other',
 }
 
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index d4ad5f611..87aa48018 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -413,6 +413,10 @@ export const utils = {
             return BrowserType.Firefox;
         } else if (bowser.opera) {
             return BrowserType.Opera;
+        } else if (bowser.msedge) {
+            return BrowserType.Edge;
+        } else if (bowser.safari) {
+            return BrowserType.Safari;
         } else {
             return BrowserType.Other;
         }