From b8d2cc1221f7135f55757198585d36de6a69c145 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 26 Oct 2018 13:52:29 +0200
Subject: style: remove small gap under topbar

---
 .../ts/components/documentation/docs_top_bar.tsx   | 48 +++++++++++-----------
 .../ts/pages/documentation/developers_page.tsx     |  1 +
 2 files changed, 26 insertions(+), 23 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index 2054d0860..cf26e8a2a 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -37,33 +37,35 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
     public render(): React.ReactNode {
         return (
             <Container height={80}>
-                <Container
-                    className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 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 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>
-                    <Container className="lg-hide md-hide">
-                        <Container paddingTop="6px">
-                            <DocsLogo height={30} />
+                        <Container className="lg-hide md-hide">
+                            <Container paddingTop="6px">
+                                <DocsLogo height={30} />
+                            </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 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={'13px'} />
+                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'15px'} />
                 {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
             </Container>
         );
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 361dbc86e..d6986b399 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -157,6 +157,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                     >
                         <Container
                             borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
+                            paddingBottom="2px"
                         >
                             <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
                                 <DocsLogo height={36} />
-- 
cgit v1.2.3


From 6696aa46ee675d2c0785117995a6f7780021e39c Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 26 Oct 2018 14:01:00 +0200
Subject: style: make line-height of sidebar title 26px, make sure still bottom
 aligned with version picker

---
 packages/website/ts/components/documentation/sidebar_header.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
index fece2704b..9ced52c74 100644
--- a/packages/website/ts/components/documentation/sidebar_header.tsx
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -29,6 +29,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
                         fontColor={colors.lightLinkBlue}
                         fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
                         fontWeight="bold"
+                        lineHeight="26px"
                     >
                         {title}
                     </Text>
@@ -36,7 +37,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
                 {!_.isUndefined(docsVersion) &&
                     !_.isUndefined(availableDocVersions) &&
                     !_.isUndefined(onVersionSelected) && (
-                        <div className="right" style={{ alignSelf: 'flex-end' }}>
+                        <div className="right" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}>
                             <VersionDropDown
                                 selectedVersion={docsVersion}
                                 versions={availableDocVersions}
-- 
cgit v1.2.3


From 3e75daafa1aeba8bada985793c7906aedc553006 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 26 Oct 2018 14:01:15 +0200
Subject: style: reduce border size on version dropdown

---
 packages/website/ts/components/documentation/version_drop_down.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
index a1c8b0547..5e77530fd 100644
--- a/packages/website/ts/components/documentation/version_drop_down.tsx
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -27,7 +27,7 @@ const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className,
 
 const ActiveNode = styled(PlainActiveNode)`
     cursor: pointer;
-    border: 2px solid ${colors.beigeWhite};
+    border: 1px solid ${colors.beigeWhite};
     border-radius: 4px;
     padding: 4px 6px 4px 8px;
 `;
-- 
cgit v1.2.3


From 753b33aec5a12a30f08701aa04b6ec67e7f590de Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 11 Nov 2018 15:31:52 +0100
Subject: Remove "Home" menu item, instead make different parts of logo link to
 different sections of the website

---
 .../ts/components/documentation/docs_logo.tsx      | 25 +++++++++--
 .../ts/components/documentation/docs_top_bar.tsx   | 48 +++++++++++-----------
 .../website/ts/components/nested_sidebar_menu.tsx  |  2 +-
 .../ts/pages/documentation/developers_page.tsx     |  2 +-
 packages/website/ts/utils/constants.ts             |  4 --
 5 files changed, 46 insertions(+), 35 deletions(-)

(limited to 'packages/website/ts')

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"
                 >
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index d6986b399..bda04f51e 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -160,7 +160,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             paddingBottom="2px"
                         >
                             <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
-                                <DocsLogo height={36} />
+                                <DocsLogo />
                             </Container>
                         </Container>
                         <SidebarContainer onWheel={this._throttledSidebarScrolling}>
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 0a8a86c50..379f28022 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -103,10 +103,6 @@ export const constants = {
     URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
     URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f',
     DEVELOPER_TOPBAR_LINKS: [
-        {
-            title: Key.Home,
-            to: WebsitePaths.Home,
-        },
         {
             title: Key.Wiki,
             to: WebsitePaths.Wiki,
-- 
cgit v1.2.3


From 1ec8a4115f386c45b12bdf0b6ebdcabb1a1c5bb7 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 11 Nov 2018 16:48:31 +0100
Subject: Fix menuItem background colors depending on the context

---
 packages/website/ts/components/nested_sidebar_menu.tsx | 13 +++++++++++--
 packages/website/ts/pages/documentation/doc_page.tsx   |  6 +++++-
 packages/website/ts/pages/documentation/docs_home.tsx  |  1 +
 packages/website/ts/pages/wiki/wiki.tsx                |  1 +
 4 files changed, 18 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 552839fb7..4d4bc4617 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -4,11 +4,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Button } from 'ts/components/ui/button';
 import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
 
 export interface NestedSidebarMenuProps {
     sectionNameToLinks: ObjectMap<ALink[]>;
     sidebarHeader?: React.ReactNode;
     shouldReformatMenuItemNames?: boolean;
+    screenWidth: ScreenWidths;
 }
 
 export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
@@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
                 ...link,
                 title: menuItemTitle,
             };
-            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />;
         });
         // tslint:disable-next-line:no-unused-variable
         return (
@@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
 
 export interface MenuItemProps {
     link: ALink;
+    screenWidth: ScreenWidths;
 }
 
 export interface MenuItemState {
@@ -70,7 +73,13 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
                     borderRadius="4px"
                     padding="0.4em 0.375em"
                     width="100%"
-                    backgroundColor={isActive ? colors.lightLinkBlue : 'transparent'}
+                    backgroundColor={
+                        isActive
+                            ? colors.lightLinkBlue
+                            : this.props.screenWidth === ScreenWidths.Sm
+                                ? 'white'
+                                : colors.grey100
+                    }
                     fontSize="14px"
                     textAlign="left"
                 >
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 28bf2dba1..80bde130c 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -94,7 +94,11 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? (
             <div />
         ) : (
-            <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
+            <NestedSidebarMenu
+                sidebarHeader={this._renderSidebarHeader()}
+                sectionNameToLinks={sectionNameToLinks}
+                screenWidth={this.props.screenWidth}
+            />
         );
         return (
             <DevelopersPage
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index bbbee2d2d..017573304 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -346,6 +346,7 @@ export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> {
                 sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
                 sectionNameToLinks={sectionNameToLinks}
                 shouldReformatMenuItemNames={false}
+                screenWidth={this.props.screenWidth}
             />
         );
         return (
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index c1802b1f8..c3c1600a5 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -76,6 +76,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             <NestedSidebarMenu
                 sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined}
                 sectionNameToLinks={sectionNameToLinks}
+                screenWidth={this.props.screenWidth}
             />
         );
         return (
-- 
cgit v1.2.3


From 2d43f312c8c3505bfd650be2a0975e39303d9d24 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 11 Nov 2018 16:50:08 +0100
Subject: Adjust paddin

---
 packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 6e85c1499..b8a35fab0 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -89,7 +89,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
         );
     }
     private _renderDropdownMenu(): React.ReactNode {
-        const sectionPadding = '28px';
+        const sectionPadding = '26px';
         const dropdownMenu = (
             <Container>
                 <Container className="flex" padding={sectionPadding}>
-- 
cgit v1.2.3


From 399a7d5fec9af4f3491a77f0c2d46738f3d8ffa7 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 11 Nov 2018 22:07:58 +0100
Subject: Increase logo size

---
 packages/website/ts/components/documentation/docs_logo.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 54ea9e2b4..ac331db79 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -20,12 +20,12 @@ export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
         <Container className="flex">
             <Container>
                 <Link to={WebsitePaths.Home}>
-                    <Image src="/images/developers/logo/0x.svg" height={30} />
+                    <Image src="/images/developers/logo/0x.svg" height={34} />
                 </Link>
             </Container>
-            <Container paddingTop="7px" paddingLeft="7px">
+            <Container paddingTop="6px" paddingLeft="7px">
                 <Link to={WebsitePaths.Docs}>
-                    <Image src="/images/developers/logo/docs.svg" height={16} />
+                    <Image src="/images/developers/logo/docs.svg" height={20} />
                 </Link>
             </Container>
         </Container>
-- 
cgit v1.2.3