From 5908f189a7fc060f2fa53cc41cdc991eff78a362 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Thu, 1 Mar 2018 09:18:46 +0100
Subject: Fix bug where contract event anchor ids were incorrect

---
 packages/website/ts/pages/documentation/event_definition.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 0e53e38e7..e62c9ecbd 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
     }
     public render() {
         const event = this.props.event;
+        const id = `${this.props.sectionName}-${event.name}`;
         return (
             <div
-                id={`${this.props.sectionName}-${event.name}`}
+                id={id}
                 className="pb2"
                 style={{ overflow: 'hidden', width: '100%' }}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
                 <AnchorTitle
                     headerSize={HeaderSizes.H3}
                     title={`Event ${event.name}`}
-                    id={event.name}
+                    id={id}
                     shouldShowAnchor={this.state.shouldShowAnchor}
                 />
                 <div style={{ fontSize: 16 }}>
-- 
cgit v1.2.3


From 67c834841ea0f8fb4d8d194c0f68802f48e764ee Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 2 Mar 2018 14:40:26 +0100
Subject: Update react-markdown, properly scroll to section for wiki internal
 links, consolidate scrollTo logic and make external links open in new tabs

---
 .../website/ts/pages/documentation/comment.tsx     |  2 +-
 .../ts/pages/documentation/documentation.tsx       | 25 +++++--------
 .../ts/pages/shared/markdown_code_block.tsx        |  6 ++--
 .../ts/pages/shared/markdown_link_block.tsx        | 41 ++++++++++++++++++++++
 .../website/ts/pages/shared/markdown_section.tsx   | 10 +++++-
 .../website/ts/pages/shared/version_drop_down.tsx  |  7 ++--
 packages/website/ts/pages/wiki/wiki.tsx            | 19 ++--------
 7 files changed, 68 insertions(+), 42 deletions(-)
 create mode 100644 packages/website/ts/pages/shared/markdown_link_block.tsx

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 23cfd96bd..5f177e97e 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -15,7 +15,7 @@ const defaultProps = {
 export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
     return (
         <div className={`${props.className} comment`}>
-            <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+            <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
         </div>
     );
 };
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 7eed78fc3..5963fe851 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -29,11 +29,11 @@ import {
     TypescriptMethod,
 } from 'ts/types';
 import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 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,
@@ -76,7 +76,7 @@ const styles: Styles = {
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            this._scrollToHash();
+            utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
@@ -115,8 +115,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                 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} />
+                                <div
+                                    id={configs.SCROLL_CONTAINER_ID}
+                                    style={styles.mainContainers}
+                                    className="absolute px1"
+                                >
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     {this._renderDocumentation()}
                                 </div>
                             </div>
@@ -325,17 +329,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             />
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = SCROLL_TOP_ID; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
 }
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index 98ca3aee6..6dfb74554 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as HighLight from 'react-highlight';
 
 interface MarkdownCodeBlockProps {
-    literal: string;
+    value: string;
     language: string;
 }
 
@@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
     // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
     // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
     public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
-        return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+        return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
     }
     public render() {
         return (
             <span style={{ fontSize: 14 }}>
-                <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
+                <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
             </span>
         );
     }
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
new file mode 100644
index 000000000..73c447636
--- /dev/null
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -0,0 +1,41 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+
+interface MarkdownLinkBlockProps {
+    href: string;
+}
+
+interface MarkdownLinkBlockState {}
+
+export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
+    // Re-rendering a linkBlock causes any use selection to become de-selected making the link unclickable.
+    // We therefore noop re-renders on this component if it's props haven't changed.
+    public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
+        return nextProps.href !== this.props.href;
+    }
+    public render() {
+        const href = this.props.href;
+        // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
+        if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
+            return (
+                <a href={href} target="_blank" rel="nofollow noreferrer noopener">
+                    {this.props.children}
+                </a>
+            );
+        } else if (_.startsWith(href, '#')) {
+            return (
+                <a style={{ cursor: 'pointer' }} onClick={this._onHashUrlClick.bind(this, href)}>
+                    {this.props.children}
+                </a>
+            );
+        } else {
+            return <a href={href}>{this.props.children}</a>;
+        }
+    }
+    private _onHashUrlClick(href: string) {
+        const hashWithPrefix = `#${href.split('#')[1]}`;
+        utils.scrollToHash(hashWithPrefix, configs.SCROLL_CONTAINER_ID);
+    }
+}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 4d7d8b4ca..7253072d9 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown';
 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 { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
 import { HeaderSizes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
@@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                         </div>
                     </div>
                     <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
-                    <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+                    <ReactMarkdown
+                        source={this.props.markdownContent}
+                        escapeHtml={false}
+                        renderers={{
+                            code: MarkdownCodeBlock,
+                            link: MarkdownLinkBlock,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 3b331af9b..1b4dbb375 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
+import { utils } from 'ts/utils/utils';
 
 interface VersionDropDownProps {
     selectedVersion: string;
@@ -31,8 +32,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
         return items;
     }
     private _updateSelectedVersion(e: any, index: number, semver: string) {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
         let path = window.location.pathname;
         const lastChar = path[path.length - 1];
         if (_.isFinite(_.parseInt(lastChar))) {
@@ -40,7 +39,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
             pathSections.pop();
             path = pathSections.join('/');
         }
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}${path}`;
-        window.location.href = `${baseUrl}/${semver}${window.location.hash}`;
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
     }
 }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 56c3be0fe..d0cbf0d3e 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                 }}
                             >
                                 <div
-                                    id="documentation"
+                                    id={configs.SCROLL_CONTAINER_ID}
                                     style={{ ...mainContainersStyle, overflow: 'auto' }}
                                     className="absolute"
                                 >
-                                    <div id="0xProtocolWiki" />
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     <div id="wiki" style={{ paddingRight: 2 }}>
                                         {this._renderWikiArticles()}
                                     </div>
@@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             </div>
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = '0xProtocolWiki'; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
     private async _fetchArticlesBySectionAsync(): Promise<void> {
         const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
         const response = await fetch(endpoint);
@@ -225,7 +212,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                     articlesBySection,
                 },
                 () => {
-                    this._scrollToHash();
+                    utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID);
                 },
             );
         }
-- 
cgit v1.2.3


From 5906f4c9953b65421a16b947a5e03898281483bc Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 2 Mar 2018 15:02:50 +0100
Subject: Add underline to internal linksx

---
 packages/website/ts/pages/shared/markdown_link_block.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
index 73c447636..a8246f654 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -26,7 +26,10 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
             );
         } else if (_.startsWith(href, '#')) {
             return (
-                <a style={{ cursor: 'pointer' }} onClick={this._onHashUrlClick.bind(this, href)}>
+                <a
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                    onClick={this._onHashUrlClick.bind(this, href)}
+                >
                     {this.props.children}
                 </a>
             );
-- 
cgit v1.2.3


From a2b262c9df127102a4508273d2a3564c5c004788 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 2 Mar 2018 15:10:44 +0100
Subject: Add hash to URL onClick

---
 packages/website/ts/pages/shared/markdown_link_block.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
index a8246f654..45bb41478 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -38,7 +38,9 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
         }
     }
     private _onHashUrlClick(href: string) {
-        const hashWithPrefix = `#${href.split('#')[1]}`;
+        const hash = href.split('#')[1];
+        const hashWithPrefix = `#${hash}`;
         utils.scrollToHash(hashWithPrefix, configs.SCROLL_CONTAINER_ID);
+        utils.setUrlHash(hash);
     }
 }
-- 
cgit v1.2.3


From 52232e98c7b2b1d1110821992bf3f86c239dd6e7 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 2 Mar 2018 17:02:14 +0100
Subject: Make sure the page has loaded (including all images) before scrolling
 to hash

---
 packages/website/ts/pages/wiki/wiki.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index d0cbf0d3e..66fa960d7 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -211,7 +211,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 {
                     articlesBySection,
                 },
-                () => {
+                async () => {
+                    await utils.onPageLoadAsync();
                     utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID);
                 },
             );
-- 
cgit v1.2.3


From 0afe45b3a830bfefc4f9b51823891b99be5261fa Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sat, 3 Mar 2018 05:36:08 +0100
Subject: Hash hash instead of prefixedHash to scrollToHash function

---
 packages/website/ts/pages/documentation/documentation.tsx | 3 ++-
 packages/website/ts/pages/shared/markdown_link_block.tsx  | 3 +--
 packages/website/ts/pages/wiki/wiki.tsx                   | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 5963fe851..699bef7a8 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -76,7 +76,8 @@ const styles: Styles = {
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID);
+            const hash = this.props.location.hash.slice(1);
+            utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
index 45bb41478..ed78e4e53 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -39,8 +39,7 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
     }
     private _onHashUrlClick(href: string) {
         const hash = href.split('#')[1];
-        const hashWithPrefix = `#${hash}`;
-        utils.scrollToHash(hashWithPrefix, configs.SCROLL_CONTAINER_ID);
+        utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
         utils.setUrlHash(hash);
     }
 }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 66fa960d7..4bb6052a2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -213,7 +213,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 },
                 async () => {
                     await utils.onPageLoadAsync();
-                    utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID);
+                    const hash = this.props.location.hash.slice(1);
+                    utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
                 },
             );
         }
-- 
cgit v1.2.3


From fdaf9f0bfc24a93933fb492d727d970d8c82d8ee Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sat, 3 Mar 2018 05:36:26 +0100
Subject: Fix comment and use named variable in conditional

---
 packages/website/ts/pages/shared/markdown_link_block.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
index ed78e4e53..e4553c87f 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -10,13 +10,14 @@ interface MarkdownLinkBlockProps {
 interface MarkdownLinkBlockState {}
 
 export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
-    // Re-rendering a linkBlock causes any use selection to become de-selected making the link unclickable.
+    // Re-rendering a linkBlock causes it to remain unclickable.
     // We therefore noop re-renders on this component if it's props haven't changed.
     public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
         return nextProps.href !== this.props.href;
     }
     public render() {
         const href = this.props.href;
+        const isLinkToSection = _.startsWith(href, '#');
         // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
         if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
             return (
@@ -24,7 +25,7 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
                     {this.props.children}
                 </a>
             );
-        } else if (_.startsWith(href, '#')) {
+        } else if (isLinkToSection) {
             return (
                 <a
                     style={{ cursor: 'pointer', textDecoration: 'underline' }}
-- 
cgit v1.2.3


From 212d680a477917817138790560d88d06cea5ec6f Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sat, 3 Mar 2018 05:46:12 +0100
Subject: Small stylistic improvements

---
 packages/website/ts/pages/shared/nested_sidebar_menu.tsx |  6 +++---
 packages/website/ts/pages/shared/section_header.tsx      | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 1a08ca9f9..82a40eb7e 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -86,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                         docs
                     </div>
                 </div>
-                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}>
+                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
                     |
                 </div>
                 <div className="flex">
                     <div>
-                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" />
+                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
                     </div>
-                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
                         {this.props.title}
                     </div>
                 </div>
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index a5f5f52cf..52a1f30d9 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface SectionHeaderProps {
@@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
                 <ScrollElement name={id}>
                     <AnchorTitle
                         headerSize={this.props.headerSize}
-                        title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
+                        title={
+                            <span
+                                style={{
+                                    textTransform: 'uppercase',
+                                    color: colors.grey,
+                                    fontFamily: 'Roboto Mono',
+                                    fontWeight: 300,
+                                    fontSize: 27,
+                                }}
+                            >
+                                {sectionName}
+                            </span>
+                        }
                         id={id}
                         shouldShowAnchor={this.state.shouldShowAnchor}
                     />
-- 
cgit v1.2.3