chore: move wiki to Developers section

3 files changed, 65 insertions, 149 deletions

diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
deleted file mode 100644
index 56657ab72..000000000
--- a/packages/website/ts/components/sidebar_header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as React from 'react';
-
-interface SidebarHeaderProps {
-    title: string;
-    iconUrl: string;
-}
-
-interface SidebarHeaderState {}
-
-export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
-    public render(): React.ReactNode {
-        return (
-            <div style={{ color: colors.black, paddingBottom: 18 }}>
-                <div className="flex" style={{ fontSize: 25 }}>
-                    <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
-                    <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
-                        docs
-                    </div>
-                </div>
-                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
-                    |
-                </div>
-                <div className="flex">
-                    <div>
-                        <img src={this.props.iconUrl} width="22" />
-                    </div>
-                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
-                        {this.props.title}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts
index 357f8bbf4..069b0ae54 100644
--- a/packages/website/ts/containers/wiki.ts
+++ b/packages/website/ts/containers/wiki.ts
@@ -4,10 +4,12 @@ import { Dispatch } from 'redux';
 import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 interface ConnectedState {
     translate: Translate;
+    screenWidth: ScreenWidths;
 }
 
 interface ConnectedDispatch {
@@ -16,6 +18,7 @@ interface ConnectedDispatch {
 
 const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({
     translate: state.translate,
+    screenWidth: state.screenWidth,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 70f54aceb..01cbc4e4d 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -5,25 +5,22 @@ import {
     HeaderSizes,
     MarkdownSection,
     NestedSidebarMenu,
-    Styles,
     utils as sharedUtils,
 } from '@0xproject/react-shared';
 import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import DocumentTitle = require('react-document-title');
-import { SidebarHeader } from 'ts/components/sidebar_header';
-import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { DevelopersPage } from 'ts/pages/documentation/developers_page';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection } from 'ts/types';
+import { Article, ArticlesBySection, ScreenWidths } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
-const TOP_BAR_HEIGHT = 60;
 const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
 
 export interface WikiProps {
@@ -31,6 +28,7 @@ export interface WikiProps {
     location: Location;
     dispatcher: Dispatcher;
     translate: Translate;
+    screenWidth: ScreenWidths;
 }
 
 interface WikiState {
@@ -38,24 +36,6 @@ interface WikiState {
     isHoveringSidebar: boolean;
 }
 
-const styles: Styles = {
-    mainContainers: {
-        position: 'absolute',
-        top: 1,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        overflow: 'hidden',
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-    },
-    menuContainer: {
-        borderColor: colors.grey300,
-        maxWidth: 330,
-        backgroundColor: colors.gray40,
-    },
-};
-
 export class Wiki extends React.Component<WikiProps, WikiState> {
     private _wikiBackoffTimeoutId: number;
     private _isUnmounted: boolean;
@@ -83,84 +63,64 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
             ? {}
             : this._getSectionNameToLinks(this.state.articlesBySection);
-        const mainContainersStyle: React.CSSProperties = {
-            ...styles.mainContainers,
-            overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
-        };
-        const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />;
+
+        const mainContent = _.isUndefined(this.state.articlesBySection) ? (
+            <div className="flex justify-center">{this._renderLoading()}</div>
+        ) : (
+            <div id="wiki" style={{ paddingRight: 2 }}>
+                {this._renderWikiArticles()}
+            </div>
+        );
+        const sidebar = _.isUndefined(this.state.articlesBySection) ? (
+            <div />
+        ) : (
+            <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+        );
         return (
-            <div>
-                <DocumentTitle title="0x Protocol Wiki" />
-                <TopBar
-                    blockchainIsLoaded={false}
-                    location={this.props.location}
-                    sectionNameToLinks={sectionNameToLinks}
-                    translate={this.props.translate}
-                    sidebarHeader={sidebarHeader}
-                />
-                {_.isUndefined(this.state.articlesBySection) ? (
-                    <div className="col col-12" style={mainContainersStyle}>
-                        <div
-                            className="relative sm-px2 sm-pt2 sm-m1"
-                            style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
-                        >
-                            <div className="center pb2">
-                                <CircularProgress size={40} thickness={5} />
-                            </div>
-                            <div className="center pt2" style={{ paddingBottom: 11 }}>
-                                Loading wiki...
-                            </div>
-                        </div>
-                    </div>
-                ) : (
-                    <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)` }}
+            <DevelopersPage
+                sidebar={sidebar}
+                mainContent={mainContent}
+                location={this.props.location}
+                screenWidth={this.props.screenWidth}
+                translate={this.props.translate}
+                dispatcher={this.props.dispatcher}
+            />
+        );
+    }
+    private _renderSidebarHeader(): React.ReactNode {
+        return (
+            <Container>
+                <Container className="flex justify-bottom">
+                    <Container className="left pl1" width="150px">
+                        <Text
+                            fontColor={colors.lightLinkBlue}
+                            fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
+                            fontWeight="bold"
                         >
-                            <div
-                                className="relative lg-pl0 md-pl1 sm-hide xs-hide"
-                                style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }}
-                            >
-                                <div
-                                    className="absolute"
-                                    style={{
-                                        ...styles.menuContainer,
-                                        ...mainContainersStyle,
-                                        height: 'calc(100vh - 76px)',
-                                    }}
-                                    onMouseEnter={this._onSidebarHover.bind(this)}
-                                    onMouseLeave={this._onSidebarHoverOff.bind(this)}
-                                >
-                                    <NestedSidebarMenu
-                                        sectionNameToLinks={sectionNameToLinks}
-                                        sidebarHeader={sidebarHeader}
-                                    />
-                                </div>
-                            </div>
-                            <div
-                                className="relative"
-                                style={{
-                                    width: '100%',
-                                    height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-                                    backgroundColor: 'white',
-                                }}
-                            >
-                                <div
-                                    id={sharedConstants.SCROLL_CONTAINER_ID}
-                                    style={{ ...mainContainersStyle, overflow: 'auto' }}
-                                    className="absolute"
-                                >
-                                    <div id={sharedConstants.SCROLL_TOP_ID} />
-                                    <div id="wiki" style={{ paddingRight: 2 }}>
-                                        {this._renderWikiArticles()}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
+                            Wiki
+                        </Text>
+                    </Container>
+                </Container>
+                <Container
+                    width={'100%'}
+                    height={'1px'}
+                    backgroundColor={colors.grey300}
+                    marginTop="20px"
+                    marginBottom="27px"
+                />
+            </Container>
+        );
+    }
+    private _renderLoading(): React.ReactNode {
+        return (
+            <Container className="pt4">
+                <Container className="center pb2">
+                    <CircularProgress size={40} thickness={5} />
+                </Container>
+                <Container className="center pt2" paddingBottom="11px">
+                    Loading wiki...
+                </Container>
+            </Container>
         );
     }
     private _renderWikiArticles(): React.ReactNode {
@@ -180,22 +140,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                         headerSize={HeaderSizes.H2}
                         githubLink={githubLink}
                     />
-                    <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}>
-                        <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}>
-                            See a way to improve this article?
-                        </div>
-                        <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2">
-                            <RaisedButton href={githubLink} target="_blank" label="Edit on Github" />
-                        </div>
-                    </div>
                 </div>
             );
         });
-        return (
-            <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0">
-                {renderedArticles}
-            </div>
-        );
+        return <div key={`section-${sectionName}`}>{renderedArticles}</div>;
     }
     private async _fetchArticlesBySectionAsync(): Promise<void> {
         try {