Remove "Home" menu item, instead make different parts of logo link to different sections of the website

3 files changed, 45 insertions, 30 deletions

diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2840d5960..54ea9e2b4 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,17 +1,34 @@
 import { Link } from '@0x/react-shared';
 import * as React from 'react';
+import { styled } from 'ts/style/theme';
 import { WebsitePaths } from 'ts/types';
 
+import { Container } from '../ui/container';
+
 export interface DocsLogoProps {
-    height: number;
     containerStyle?: React.CSSProperties;
 }
 
+const Image = styled.img`
+    &:hover {
+        opacity: 0.7;
+    }
+`;
+
 export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
-        <Link to={WebsitePaths.Docs}>
-            <img src="/images/docs_logo.svg" height={props.height} />
-        </Link>
+        <Container className="flex">
+            <Container>
+                <Link to={WebsitePaths.Home}>
+                    <Image src="/images/developers/logo/0x.svg" height={30} />
+                </Link>
+            </Container>
+            <Container paddingTop="7px" paddingLeft="7px">
+                <Link to={WebsitePaths.Docs}>
+                    <Image src="/images/developers/logo/docs.svg" height={16} />
+                </Link>
+            </Container>
+        </Container>
     );
 };
 
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index cf26e8a2a..c4291b78f 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -37,35 +37,33 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
     public render(): React.ReactNode {
         return (
             <Container height={80}>
-                <Container className="lg-pt1 md-pt1 sm-pt0">
-                    <Container
-                        className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
-                        width="100%"
-                    >
-                        <Container className="sm-hide xs-hide">
-                            <Container className="flex items-center justify-between right" width="300px">
-                                {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
-                            </Container>
-                        </Container>
-                        <Container className="lg-hide md-hide">
-                            <Container paddingTop="6px">
-                                <DocsLogo height={30} />
-                            </Container>
+                <Container
+                    className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
+                    width="100%"
+                >
+                    <Container className="sm-hide xs-hide">
+                        <Container className="flex items-center justify-between right" width="250px">
+                            {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
                         </Container>
-                        <Container className="md-hide lg-hide absolute" right="18px" top="12px">
-                            <i
-                                className="zmdi zmdi-menu"
-                                style={{
-                                    color: colors.grey700,
-                                    fontSize: 30,
-                                    cursor: 'pointer',
-                                }}
-                                onClick={this._onMenuButtonClick.bind(this)}
-                            />
+                    </Container>
+                    <Container className="lg-hide md-hide">
+                        <Container paddingTop="6px">
+                            <DocsLogo />
                         </Container>
                     </Container>
+                    <Container className="md-hide lg-hide absolute" right="18px" top="12px">
+                        <i
+                            className="zmdi zmdi-menu"
+                            style={{
+                                color: colors.grey700,
+                                fontSize: 30,
+                                cursor: 'pointer',
+                            }}
+                            onClick={this._onMenuButtonClick.bind(this)}
+                        />
+                    </Container>
                 </Container>
-                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'15px'} />
+                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'16px'} />
                 {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
             </Container>
         );
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index db7d55261..552839fb7 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -70,7 +70,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
                     borderRadius="4px"
                     padding="0.4em 0.375em"
                     width="100%"
-                    backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
+                    backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'}
                     fontSize="14px"
                     textAlign="left"
                 >