diff options
Diffstat (limited to 'packages/website/ts/components/documentation')
4 files changed, 28 insertions, 10 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 2840d5960..ac331db79 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={34} /> + </Link> + </Container> + <Container paddingTop="6px" paddingLeft="7px"> + <Link to={WebsitePaths.Docs}> + <Image src="/images/developers/logo/docs.svg" height={20} /> + </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 2054d0860..c4291b78f 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -38,17 +38,17 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState 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" + 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"> + <Container className="flex items-center justify-between right" width="250px"> {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} </Container> </Container> <Container className="lg-hide md-hide"> <Container paddingTop="6px"> - <DocsLogo height={30} /> + <DocsLogo /> </Container> </Container> <Container className="md-hide lg-hide absolute" right="18px" top="12px"> @@ -63,7 +63,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState /> </Container> </Container> - <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + <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/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} 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; `; |