Implement dev topbar

5 files changed, 87 insertions, 27 deletions

diff --git a/packages/website/public/images/developers/chat_icon.svg b/packages/website/public/images/developers/chat_icon.svg
new file mode 100644
index 000000000..c48881454
--- /dev/null
+++ b/packages/website/public/images/developers/chat_icon.svg
@@ -0,0 +1,5 @@
+<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16.5161" height="16" fill="black" fill-opacity="0" transform="scale(2)"/>
+<path d="M8.25781 32.0002L17.5481 24.7744H8.25781V32.0002Z" fill="#3289F1"/>
+<path d="M0 6C0 2.68629 2.68629 0 6 0H27.0323C30.346 0 33.0323 2.68629 33.0323 6V18.7742C33.0323 22.0879 30.346 24.7742 27.0323 24.7742H6C2.68629 24.7742 0 22.0879 0 18.7742V6Z" fill="#3289F1"/>
+</svg>
diff --git a/packages/website/public/images/developers/forum_icon.svg b/packages/website/public/images/developers/forum_icon.svg
new file mode 100644
index 000000000..8fb659475
--- /dev/null
+++ b/packages/website/public/images/developers/forum_icon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="30" viewBox="0 0 36 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="17.2308" height="14" fill="black" fill-opacity="0" transform="translate(0 29) scale(2 -2)"/>
+<rect width="17.2308" height="14" fill="black" fill-opacity="0" transform="translate(0 29) scale(2 -2)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9196 6.90474C18.7267 6.90474 25.5338 6.90474 32.3409 6.90474C35.1684 6.90474 35.1684 2.355 32.3409 2.355C25.5338 2.355 18.7267 2.355 11.9196 2.355C9.0921 2.355 9.0921 6.90474 11.9196 6.90474ZM3.41008 8.27457C5.29364 8.27457 6.82103 6.64616 6.82103 4.63682C6.82103 2.62841 5.29364 1 3.41008 1C1.5274 1 0 2.62841 0 4.63682C0 6.64616 1.5274 8.27457 3.41008 8.27457ZM11.9196 17.2684C18.7267 17.2684 25.5338 17.2684 32.3409 17.2684C35.1684 17.2684 35.1684 12.7177 32.3409 12.7177C25.5338 12.7177 18.7267 12.7177 11.9196 12.7177C9.0921 12.7177 9.0921 17.2684 11.9196 17.2684ZM3.41008 18.6373C5.29364 18.6373 6.82103 17.0089 6.82103 14.9995C6.82103 12.9911 5.29364 11.3627 3.41008 11.3627C1.5274 11.3627 0 12.9911 0 14.9995C0 17.0089 1.5274 18.6373 3.41008 18.6373ZM11.9196 27.6311C18.7267 27.6311 25.5338 27.6311 32.3409 27.6311C35.1684 27.6311 35.1684 23.0804 32.3409 23.0804C25.5338 23.0804 18.7267 23.0804 11.9196 23.0804C9.0921 23.0804 9.0921 27.6311 11.9196 27.6311ZM3.41008 29C5.29364 29 6.82103 27.3716 6.82103 25.3623C6.82103 23.3538 5.29364 21.7254 3.41008 21.7254C1.5274 21.7254 0 23.3538 0 25.3623C0 27.3716 1.5274 29 3.41008 29Z" fill="#999999"/>
+</svg>
diff --git a/packages/website/public/images/developers/github_icon.svg b/packages/website/public/images/developers/github_icon.svg
new file mode 100644
index 000000000..bf10cb221
--- /dev/null
+++ b/packages/website/public/images/developers/github_icon.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18.3529" height="18" fill="black" fill-opacity="0" transform="scale(2)"/>
+<path d="M18.3529 0C8.2176 0 0 8.26332 0 18.455C0 26.6102 5.25812 33.5264 12.5515 35.9661C13.469 36.1351 13.8039 35.5651 13.8039 35.0785C13.8039 34.6392 13.7871 33.1839 13.7781 31.643C8.67463 32.7581 7.5959 29.4668 7.5959 29.4668C6.76026 27.3356 5.55829 26.7679 5.55829 26.7679C3.89036 25.6235 5.68482 25.646 5.68482 25.646C7.5275 25.7744 8.49763 27.5474 8.49763 27.5474C10.1353 30.3679 12.7946 29.5524 13.8386 29.0793C14.0054 27.8898 14.4804 27.0743 15.0036 26.6147C10.9295 26.1484 6.64376 24.5647 6.64376 17.4931C6.64376 15.4768 7.35957 13.8323 8.53125 12.5403C8.34417 12.0717 7.71239 10.194 8.7127 7.65394C8.7127 7.65394 10.2518 7.15832 13.7602 9.5463C15.2231 9.13517 16.7925 8.93242 18.3529 8.92564C19.9122 8.93242 21.4827 9.13741 22.9479 9.54854C26.4496 7.15832 27.9909 7.65617 27.9909 7.65617C28.9946 10.1985 28.3628 12.0739 28.1746 12.5403C29.3508 13.8323 30.061 15.4768 30.061 17.4931C30.061 24.5827 25.7685 26.1439 21.6799 26.6012C22.3408 27.1734 22.9255 28.2953 22.9255 30.0165C22.9255 32.4833 22.9009 34.4725 22.9009 35.0808C22.9009 35.5719 23.2346 36.1464 24.1644 35.9661C31.4523 33.5218 36.7059 26.6057 36.7059 18.455C36.7059 8.26332 28.4883 0 18.3529 0Z" fill="#999999"/>
+</svg>
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>
     );