Implement new version dropdown and remove it from nestedTopBar

5 files changed, 124 insertions, 62 deletions

diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 85206569c..440db4b16 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -8,15 +8,11 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { Link } from './link';
-import { VersionDropDown } from './version_drop_down';
 
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldDisplaySectionHeaders?: boolean;
-    selectedVersion?: string;
-    versions?: string[];
-    onVersionSelected?: (semver: string) => void;
     shouldReformatMenuItemNames?: boolean;
 }
 
@@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                 return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
             }
         });
-        const maxWidthWithScrollbar = 307;
         return (
             <div>
                 {this.props.sidebarHeader}
-                {!_.isUndefined(this.props.versions) &&
-                    !_.isUndefined(this.props.selectedVersion) &&
-                    !_.isUndefined(this.props.onVersionSelected) && (
-                        <div style={{ maxWidth: maxWidthWithScrollbar }}>
-                            <VersionDropDown
-                                selectedVersion={this.props.selectedVersion}
-                                versions={this.props.versions}
-                                onVersionSelected={this.props.onVersionSelected}
-                            />
-                        </div>
-                    )}
                 <div className="pl1">{navigation}</div>
             </div>
         );
diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx
deleted file mode 100644
index 5ff4bed54..000000000
--- a/packages/react-shared/src/components/version_drop_down.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-export interface VersionDropDownProps {
-    selectedVersion: string;
-    versions: string[];
-    onVersionSelected: (semver: string) => void;
-}
-
-export interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
-    public render(): React.ReactNode {
-        return (
-            <div className="mx-auto" style={{ width: 120 }}>
-                <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
-                    {this._renderDropDownItems()}
-                </Select>
-            </div>
-        );
-    }
-    private _renderDropDownItems(): React.ReactNode[] {
-        const items = _.map(this.props.versions, version => {
-            return (
-                <MenuItem key={version} value={version}>
-                    v{version}
-                </MenuItem>
-            );
-        });
-        return items;
-    }
-    private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
-        this.props.onVersionSelected(event.target.value);
-    }
-}
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
new file mode 100644
index 000000000..c7b8667d7
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,83 @@
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { styled } from 'ts/style/theme';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface ActiveNodeProps {
+    className?: string;
+    selectedVersion: string;
+}
+
+const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
+    <Container className={className} width="70px">
+        <Container className="flex justify-center">
+            <Text fontColor={colors.grey700} fontSize="12px">
+                v {selectedVersion}
+            </Text>
+            <Container paddingLeft="6px">
+                <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
+            </Container>
+        </Container>
+    </Container>
+);
+
+const ActiveNode = styled(PlainActiveNode)`
+    cursor: pointer;
+    border: 2px solid ${colors.beigeWhite};
+    border-radius: 4px;
+    padding: 4px 6px 4px 8px;
+`;
+
+interface VersionDropDownProps {
+    selectedVersion: string;
+    versions: string[];
+    onVersionSelected: (semver: string) => void;
+}
+
+interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+    public render(): React.ReactNode {
+        const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
+        return (
+            <DropDown
+                activateEvent={DropdownMouseEvent.Click}
+                activeNode={activeNode}
+                popoverContent={this._renderDropdownMenu()}
+                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+                popoverStyle={{ borderRadius: 4 }}
+            />
+        );
+    }
+    private _renderDropdownMenu(): React.ReactNode {
+        const items = _.map(this.props.versions, version => {
+            const isSelected = version === this.props.selectedVersion;
+            return (
+                <Container>
+                    <Button
+                        borderRadius="0px"
+                        padding="0.8em 0em"
+                        width="100%"
+                        isDisabled={isSelected}
+                        onClick={this._onClick.bind(this, version)}
+                    >
+                        v {version}
+                    </Button>
+                </Container>
+            );
+        });
+        const dropdownMenu = <Container width="88px">{items}</Container>;
+        return dropdownMenu;
+    }
+    private _onClick(selectedVersion: string): void {
+        this.props.onVersionSelected(selectedVersion);
+    }
+}
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 75ba7bcff..ccaadc800 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -10,6 +10,7 @@ export interface ButtonProps {
     fontFamily?: string;
     backgroundColor?: string;
     borderColor?: string;
+    borderRadius?: string;
     width?: string;
     padding?: string;
     type?: string;
@@ -29,7 +30,7 @@ export const Button = styled(PlainButton)`
     color: ${props => props.fontColor};
     transition: background-color, opacity 0.5s ease;
     padding: ${props => props.padding};
-    border-radius: 6px;
+    border-radius: ${props => props.borderRadius};
     font-weight: 500;
     outline: none;
     font-family: ${props => props.fontFamily};
@@ -52,6 +53,7 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     fontSize: '12px',
+    borderRadius: '6px',
     backgroundColor: colors.white,
     width: 'auto',
     fontFamily: 'Roboto',
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index bc0dc7b6a..ca2652c76 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -6,12 +6,15 @@ import {
     SupportedDocJson,
     TypeDocUtils,
 } from '@0xproject/react-docs';
-import { NestedSidebarMenu } from '@0xproject/react-shared';
+import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import semverSort = require('semver-sort');
+import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
+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 { DocPackages, ScreenWidths } from 'ts/types';
@@ -89,7 +92,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
             />
         );
         const sidebar = (
-            <NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} />
+            <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
         );
         return (
             <DevelopersPage
@@ -102,16 +105,43 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
             />
         );
     }
+    private _renderSidebarHeader(): React.ReactNode {
+        return (
+            <Container>
+                <Container className="clearfix relative">
+                    <Container className="pl1 absolute" bottom="0">
+                        <Text fontColor={colors.lightLinkBlue} fontSize="22px" fontWeight="bold">
+                            0x.js
+                        </Text>
+                    </Container>
+                    <Container className="right">
+                        <VersionDropDown
+                            selectedVersion={this.props.docsVersion}
+                            versions={this.props.availableDocVersions}
+                            onVersionSelected={this._onVersionSelected.bind(this)}
+                        />
+                    </Container>
+                </Container>
+                <Container
+                    width={'100%'}
+                    height={'1px'}
+                    backgroundColor={colors.grey300}
+                    marginTop="20px"
+                    marginBottom="27px"
+                />
+            </Container>
+        );
+    }
     private _renderLoading(): React.ReactNode {
         return (
-            <div className="pt4">
-                <div className="center pb2">
+            <Container className="pt4">
+                <Container className="center pb2">
                     <CircularProgress size={40} thickness={5} />
-                </div>
-                <div className="center pt2" style={{ paddingBottom: 11 }}>
+                </Container>
+                <Container className="center pt2" paddingBottom="11px">
                     Loading documentation...
-                </div>
-            </div>
+                </Container>
+            </Container>
         );
     }
     private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {