diff options
Diffstat (limited to 'packages/website/ts')
12 files changed, 50 insertions, 20 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 25430c1c7..37f746f7c 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -591,7 +591,7 @@ export class Blockchain { } } else { const injectedWeb3IfExists = (window as any).web3; - if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { injectedProviderIfExists = injectedWeb3IfExists.currentProvider; } else { return undefined; 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; `; 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}> diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index db7d55261..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 : colors.grey100} + backgroundColor={ + isActive + ? colors.lightLinkBlue + : this.props.screenWidth === ScreenWidths.Sm + ? 'white' + : colors.grey100 + } 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 89389e488..a84be7bfe 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -157,9 +157,10 @@ 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} /> + <DocsLogo /> </Container> </Container> <SidebarContainer onWheel={this._throttledSidebarScrolling}> diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 8392c90e4..adf2261b5 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 f93d7b485..ebe8cece4 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -355,6 +355,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 ( diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 75ffe338f..5ff9850eb 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -106,10 +106,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, }, |