aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx25
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx48
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx2
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx2
-rw-r--r--packages/website/ts/utils/constants.ts4
5 files changed, 46 insertions, 35 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"
>
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
@@ -104,10 +104,6 @@ export const constants = {
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,
},