diff options
Diffstat (limited to 'packages/website/ts')
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, }, |