Re-design docs pages

1 files changed, 35 insertions, 19 deletions

diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index e20040bc0..2227f59d3 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -37,6 +37,7 @@ 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 } = {
@@ -67,7 +68,7 @@ const styles: Styles = {
         right: 0,
         overflowZ: 'hidden',
         overflowY: 'scroll',
-        minHeight: 'calc(100vh - 1px)',
+        minHeight: 'calc(100vh - 60px)',
         WebkitOverflowScrolling: 'touch',
     },
     menuContainer: {
@@ -111,7 +112,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume
                     availableDocVersions={this.props.availableDocVersions}
                     menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
                     menuSubsectionsBySection={menuSubsectionsBySection}
-                    shouldFullWidth={true}
+                    shouldFullWidth={false}
                     docsInfo={this.props.docsInfo}
                 />
                 {_.isUndefined(this.state.docAgnosticFormat) ? (
@@ -129,26 +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}
-                                    title={this.props.docsInfo.displayName}
-                                    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} />
-                                {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>