aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-11-11 22:31:52 +0800
committerFabio Berger <me@fabioberger.com>2018-11-11 22:31:52 +0800
commit753b33aec5a12a30f08701aa04b6ec67e7f590de (patch)
tree6f2d9321abe72f65186906243daab09646ab4a9c /packages/website/ts/components
parent7626d1d6fe5f1b5a505db4482e0b7337747ca4d2 (diff)
downloaddexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar.gz
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar.bz2
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar.lz
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar.xz
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.tar.zst
dexon-sol-tools-753b33aec5a12a30f08701aa04b6ec67e7f590de.zip
Remove "Home" menu item, instead make different parts of logo link to different sections of the website
Diffstat (limited to 'packages/website/ts/components')
-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
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"
>