Implement dev topbar

2 files changed, 73 insertions, 27 deletions

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index c9bdca61b..c2bbfc417 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -3,9 +3,8 @@ import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -29,6 +28,13 @@ const styles: Styles = {
     },
 };
 
+interface MenuItemInfo {
+    title: string;
+    url: string;
+    iconUrl: string;
+    textStyle: React.CSSProperties;
+}
+
 export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> {
     constructor(props: DocsContentTopBarProps) {
         super(props);
@@ -49,35 +55,44 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
             color: 'black',
             cursor: 'pointer',
         };
+        const menuItemInfos: MenuItemInfo[] = [
+            {
+                title: this.props.translate.get(Key.Github, Deco.Cap),
+                url: constants.URL_GITHUB_ORG,
+                iconUrl: '/images/developers/github_icon.svg',
+                textStyle: { color: colors.linkSectionGrey },
+            },
+            {
+                title: this.props.translate.get(Key.Forum, Deco.Cap),
+                url: constants.URL_FORUM,
+                iconUrl: '/images/developers/forum_icon.svg',
+                textStyle: { color: colors.linkSectionGrey },
+            },
+            {
+                title: this.props.translate.get(Key.LiveChat, Deco.Cap),
+                url: constants.URL_ZEROEX_CHAT,
+                iconUrl: '/images/developers/chat_icon.svg',
+                textStyle: { color: '#3289F1', fontWeight: 'bold' },
+            },
+        ];
         return (
-            <div style={{ height: 75, color: colors.linkSectionGrey }} className="pb1 flex items-center">
-                <Container className="flex items-center" width="100%">
+            <div style={{ height: 75 }} className="pb1">
+                <Container className="flex items-center" paddingTop={30} width="100%">
                     <div className="col col-2">
-                        <i className="zmdi zmdi-chevron-left" /> 0xproject.com
+                        <Link
+                            to={WebsitePaths.Home}
+                            style={{ color: colors.linkSectionGrey }}
+                            className="flex items-center text-decoration-none"
+                        >
+                            <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} />
+                            <div className="pl1" style={{ fontSize: 16 }}>
+                                0xproject.com
+                            </div>
+                        </Link>
                     </div>
                     <div className="col col-10">
                         <div className="flex items-center justify-between right" style={{ width: 300 }}>
-                            <TopBarMenuItem
-                                title={this.props.translate.get(Key.Github, Deco.Cap)}
-                                path={constants.URL_GITHUB_ORG}
-                                style={styles.menuItem}
-                                isNightVersion={false}
-                                isExternal={true}
-                            />
-                            <TopBarMenuItem
-                                title={this.props.translate.get(Key.Forum, Deco.Cap)}
-                                path={constants.URL_FORUM}
-                                style={styles.menuItem}
-                                isNightVersion={false}
-                                isExternal={true}
-                            />
-                            <TopBarMenuItem
-                                title={this.props.translate.get(Key.LiveChat, Deco.Cap)}
-                                path={constants.URL_ZEROEX_CHAT}
-                                style={styles.menuItem}
-                                isNightVersion={false}
-                                isExternal={true}
-                            />
+                            {this._renderMenuItems(menuItemInfos)}
                         </div>
                     </div>
                     <div className={'md-hide lg-hide'}>
@@ -86,10 +101,41 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                         </div>
                     </div>
                 </Container>
+                <div
+                    style={{
+                        width: '100%',
+                        height: 1,
+                        backgroundColor: colors.grey300,
+                        marginTop: 11,
+                    }}
+                />
                 {this._renderDrawer()}
             </div>
         );
     }
+    private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode {
+        const menuItems = _.map(menuItemInfos, menuItemInfo => {
+            return (
+                <a
+                    key={`menu-item-${menuItemInfo.title}`}
+                    href={menuItemInfo.url}
+                    target="_blank"
+                    className="text-decoration-none"
+                    style={{
+                        fontSize: 16,
+                    }}
+                >
+                    <div className="flex">
+                        <img src={menuItemInfo.iconUrl} width="18" />
+                        <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}>
+                            {menuItemInfo.title}
+                        </div>
+                    </div>
+                </a>
+            );
+        });
+        return menuItems;
+    }
     private _renderDrawer(): React.ReactNode {
         return (
             <Drawer
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index b65a27fd9..2a539c84b 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -6,7 +6,7 @@ export const DocsLogo = () => {
     return (
         <div style={{ paddingTop: 28 }}>
             <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
-                <img src="/images/docs_logo.svg" height="30px" />
+                <img src="/images/docs_logo.svg" height="36px" />
             </Link>
         </div>
     );