Re-designed Wiki and half-redesigned docs pages

4 files changed, 49 insertions, 19 deletions

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..0ce348c98 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="pt2 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="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..fde6ef7ae 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,7 +29,10 @@ const styles: Styles = {
         minHeight: 48,
     },
     menuItemInnerDivWithHeaders: {
+        color: colors.grey800,
+        fontSize: 14,
         lineHeight: 2,
+        padding: 0,
     },
 };
 
@@ -44,14 +47,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             if (this.props.shouldDisplaySectionHeaders) {
                 const id = utils.getIdFromName(sectionName);
                 return (
-                    <div key={`section-${sectionName}`} className="py1">
+                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
                         <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">
+                            <div style={{ cursor: 'pointer', fontWeight: 'bold', fontSize: 15 }} className="py1">
                                 {finalSectionName.toUpperCase()}
                             </div>
                         </ScrollLink>
@@ -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,35 @@ 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: 'rgb(202, 202, 202)', paddingBottom: 9, paddingLeft: 14, height: 17 }}
+                >
+                    |
+                </div>
+                <div className="flex">
+                    <div>
+                        <img src="/images/book.png" width="31" />
+                    </div>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+                        {this.props.title}
+                    </div>
+                </div>
             </div>
         );
     }
@@ -132,7 +164,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',
                                     }}