aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx20
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx108
-rw-r--r--packages/website/ts/components/documentation/overview_content.tsx134
-rw-r--r--packages/website/ts/components/documentation/sidebar_header.tsx57
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx59
-rw-r--r--packages/website/ts/components/documentation/version_drop_down.tsx80
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx164
-rw-r--r--packages/website/ts/components/fill_order.tsx5
-rw-r--r--packages/website/ts/components/footer.tsx110
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx6
-rw-r--r--packages/website/ts/components/portal/back_button.tsx6
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx2
-rw-r--r--packages/website/ts/components/portal/menu.tsx6
-rw-r--r--packages/website/ts/components/portal/portal.tsx10
-rw-r--r--packages/website/ts/components/sidebar_header.tsx35
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx288
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx23
-rw-r--r--packages/website/ts/components/ui/button.tsx7
-rw-r--r--packages/website/ts/components/ui/container.tsx4
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx (renamed from packages/website/ts/components/ui/menu_item.tsx)15
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx12
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx4
-rw-r--r--packages/website/ts/components/ui/text.tsx4
23 files changed, 748 insertions, 411 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..b727fea36
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,20 @@
+import { Link } from '@0xproject/react-shared';
+import * as React from 'react';
+import { WebsitePaths } from 'ts/types';
+
+export interface DocsLogoProps {
+ height: number;
+ containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
+ return (
+ <Link to={WebsitePaths.Docs}>
+ <img src="/images/docs_logo.svg" height={props.height} />
+ </Link>
+ );
+};
+
+DocsLogo.defaultProps = {
+ containerStyle: {},
+};
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
new file mode 100644
index 000000000..9a9b9a616
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -0,0 +1,108 @@
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import Drawer from 'material-ui/Drawer';
+import * as React from 'react';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface DocsTopBarProps {
+ location: Location;
+ screenWidth: ScreenWidths;
+ translate: Translate;
+ sidebar?: React.ReactNode;
+}
+
+interface DocsTopBarState {
+ isDrawerOpen: boolean;
+}
+
+export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> {
+ constructor(props: DocsTopBarProps) {
+ super(props);
+ this.state = {
+ isDrawerOpen: false,
+ };
+ }
+ public componentWillReceiveProps(nextProps: DocsTopBarProps): void {
+ if (nextProps.location.pathname !== this.props.location.pathname) {
+ this.setState({
+ isDrawerOpen: false,
+ });
+ }
+ }
+ public render(): React.ReactNode {
+ 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"
+ 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>
+ <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={'13px'} />
+ {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
+ </Container>
+ );
+ }
+ private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode {
+ const menuItems = _.map(menuItemLinks, menuItemInfo => {
+ return (
+ <Link
+ key={`menu-item-${menuItemInfo.title}`}
+ to={menuItemInfo.to}
+ shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
+ >
+ <Container className="flex items-center" paddingLeft="4px">
+ <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
+ </Text>
+ </Container>
+ </Link>
+ );
+ });
+ return menuItems;
+ }
+ private _renderDrawer(): React.ReactNode {
+ return (
+ <Drawer
+ open={this.state.isDrawerOpen}
+ docked={false}
+ openSecondary={true}
+ onRequestChange={this._onMenuButtonClick.bind(this)}
+ >
+ <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}>
+ {this.props.sidebar}
+ </Container>
+ </Drawer>
+ );
+ }
+ private _onMenuButtonClick(): void {
+ this.setState({
+ isDrawerOpen: !this.state.isDrawerOpen,
+ });
+ }
+}
diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx
new file mode 100644
index 000000000..6999e039a
--- /dev/null
+++ b/packages/website/ts/components/documentation/overview_content.tsx
@@ -0,0 +1,134 @@
+import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
+import { Element as ScrollElement } from 'react-scroll';
+import { TutorialButton } from 'ts/components/documentation/tutorial_button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, Package, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+export interface OverviewContentProps {
+ translate: Translate;
+ tutorials: TutorialInfo[];
+ categoryToPackages: ObjectMap<Package[]>;
+}
+
+export interface OverviewContentState {}
+
+export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> {
+ public render(): React.ReactNode {
+ return (
+ <Container>
+ {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))}
+ <Container marginTop="36px">
+ {_.map(this.props.tutorials, tutorialInfo => (
+ <ScrollElement
+ name={sharedUtils.getIdFromName(
+ this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap),
+ )}
+ key={`tutorial-${tutorialInfo.link.title}`}
+ >
+ <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} />
+ </ScrollElement>
+ ))}
+ </Container>
+ </Container>
+ <Container marginTop="32px" paddingBottom="100px">
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(
+ this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap),
+ )}
+ <Container marginTop="36px">
+ {_.map(this.props.categoryToPackages, (pkgs, category) =>
+ this._renderPackageCategory(category, pkgs),
+ )}
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ );
+ }
+ private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
+ return (
+ <Container key={`category-${category}`}>
+ <Text fontSize="18px">{category}</Text>
+ <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container>
+ </Container>
+ );
+ }
+ private _renderPackage(pkg: Package): React.ReactNode {
+ const id = sharedUtils.getIdFromName(pkg.link.title);
+ return (
+ <ScrollElement name={id} key={`package-${pkg.link.title}`}>
+ <Container className="pb2">
+ <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" />
+ <Container className="clearfix mt2 pt1">
+ <Container className="md-col lg-col md-col-4 lg-col-4">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {pkg.link.title}
+ </Text>
+ </Link>
+ </Container>
+ <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2">
+ <Text fontColor={colors.grey700}>
+ <ReactMarkdown
+ source={pkg.description}
+ renderers={{
+ link: MarkdownLinkBlock,
+ paragraph: 'span',
+ }}
+ />
+ </Text>
+ </Container>
+ <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
+ <Container position="absolute" right="0px">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Container className="flex">
+ <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
+ <Container paddingTop="1px" paddingLeft="6px">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 18, color: colors.lightLinkBlue }}
+ />
+ </Container>
+ </Container>
+ </Link>
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ </ScrollElement>
+ );
+ }
+ private _renderSectionTitle(text: string): React.ReactNode {
+ return (
+ <Container paddingTop="30px">
+ <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold">
+ {text}
+ </Text>
+ </Container>
+ );
+ }
+ private _renderSectionDescription(text: string): React.ReactNode {
+ return (
+ <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono">
+ {text}
+ </Text>
+ );
+ }
+} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
new file mode 100644
index 000000000..ec0ada8bd
--- /dev/null
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -0,0 +1,57 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
+
+export interface SidebarHeaderProps {
+ screenWidth: ScreenWidths;
+ title: string;
+ docsVersion?: string;
+ availableDocVersions?: string[];
+ onVersionSelected?: () => void;
+}
+
+export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
+ screenWidth,
+ title,
+ docsVersion,
+ availableDocVersions,
+ onVersionSelected,
+}) => {
+ return (
+ <Container>
+ <Container className="flex justify-bottom">
+ <Container className="left pl1" width="150px">
+ <Text
+ fontColor={colors.lightLinkBlue}
+ fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
+ fontWeight="bold"
+ >
+ {title}
+ </Text>
+ </Container>
+ {!_.isUndefined(docsVersion) &&
+ !_.isUndefined(availableDocVersions) &&
+ !_.isUndefined(onVersionSelected) && (
+ <div className="right" style={{ alignSelf: 'flex-end' }}>
+ <VersionDropDown
+ selectedVersion={docsVersion}
+ versions={availableDocVersions}
+ onVersionSelected={onVersionSelected}
+ />
+ </div>
+ )}
+ </Container>
+ <Container
+ width={'100%'}
+ height={'1px'}
+ backgroundColor={colors.grey300}
+ marginTop="20px"
+ marginBottom="27px"
+ />
+ </Container>
+ );
+};
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..dc00bf743
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,59 @@
+import { colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+import { styled } from 'ts/style/theme';
+
+export interface TutorialButtonProps {
+ className?: string;
+ translate: Translate;
+ tutorialInfo: TutorialInfo;
+}
+
+const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => (
+ <Container className={className}>
+ <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}>
+ <div className="flex relative">
+ <div className="col col-1 flex items-center sm-pr3">
+ <img src={tutorialInfo.iconUrl} height={40} />
+ </div>
+ <div className="lg-pl2 md-pl2 sm-pl3 col col-10">
+ <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {translate.get(tutorialInfo.link.title as Key, Deco.Cap)}
+ </Text>
+ <Text Tag="div" fontColor={colors.grey750} fontSize="16">
+ {translate.get(tutorialInfo.description as Key, Deco.Cap)}
+ </Text>
+ </div>
+ <div className="col col-1 flex items-center justify-end">
+ <div className="right">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 26, color: colors.lightLinkBlue }}
+ />
+ </div>
+ </div>
+ </div>
+ </Link>
+ </Container>
+);
+
+export const TutorialButton = styled(PlainTutorialButton)`
+ border-radius: 4px;
+ border: 1px solid ${colors.grey325};
+ background-color: ${colors.white};
+ &:hover {
+ border: 1px solid ${colors.lightLinkBlue};
+ background-color: ${colors.lightestBlue};
+ }
+ padding: 20px;
+ margin-bottom: 15px;
+`;
+
+TutorialButton.defaultProps = {};
+
+TutorialButton.displayName = 'TutorialButton';
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
new file mode 100644
index 000000000..ec1c99f7b
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,80 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { styled } from 'ts/style/theme';
+
+interface ActiveNodeProps {
+ className?: string;
+ selectedVersion: string;
+}
+
+const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
+ <Container className={className}>
+ <Container className="flex justify-center">
+ <Text fontColor={colors.grey700} fontSize="12px">
+ v {selectedVersion}
+ </Text>
+ <Container paddingLeft="6px">
+ <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
+ </Container>
+ </Container>
+ </Container>
+);
+
+const ActiveNode = styled(PlainActiveNode)`
+ cursor: pointer;
+ border: 2px solid ${colors.beigeWhite};
+ border-radius: 4px;
+ padding: 4px 6px 4px 8px;
+`;
+
+interface VersionDropDownProps {
+ selectedVersion: string;
+ versions: string[];
+ onVersionSelected: (semver: string) => void;
+}
+
+interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
+ return (
+ <DropDown
+ activateEvent={DropdownMouseEvent.Click}
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
+ popoverStyle={{ borderRadius: 4 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const items = _.map(this.props.versions, version => {
+ const isSelected = version === this.props.selectedVersion;
+ return (
+ <Container key={`dropdown-items-${version}`}>
+ <Button
+ borderRadius="0px"
+ padding="0.8em 0em"
+ width="100%"
+ isDisabled={isSelected}
+ onClick={this._onClick.bind(this, version)}
+ >
+ v {version}
+ </Button>
+ </Container>
+ );
+ });
+ const dropdownMenu = <Container width="88px">{items}</Container>;
+ return dropdownMenu;
+ }
+ private _onClick(selectedVersion: string): void {
+ this.props.onVersionSelected(selectedVersion);
+ }
+}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
new file mode 100644
index 000000000..1db1e89b8
--- /dev/null
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,164 @@
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { DropDown } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+const gettingStartedKeyToLinkInfo1: ALink[] = [
+ {
+ title: Key.BuildARelayer,
+ to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+ },
+ {
+ title: Key.OrderBasics,
+ to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+ },
+];
+const gettingStartedKeyToLinkInfo2: ALink[] = [
+ {
+ title: Key.DevelopOnEthereum,
+ to: `${WebsitePaths.Wiki}#Ethereum-Development`,
+ },
+ {
+ title: Key.UseSharedLiquidity,
+ to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+ },
+];
+const popularDocsToLinkInfos: ALink[] = [
+ {
+ title: Key.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
+ },
+ {
+ title: Key.Connect,
+ to: WebsitePaths.Connect,
+ },
+ {
+ title: Key.SmartContract,
+ to: WebsitePaths.SmartContracts,
+ },
+];
+const usefulLinksToLinkInfo: ALink[] = [
+ {
+ title: Key.Wiki,
+ to: WebsitePaths.Wiki,
+ },
+ {
+ title: Key.Github,
+ to: constants.URL_GITHUB_ORG,
+ shouldOpenInNewTab: true,
+ },
+ {
+ title: Key.Whitepaper,
+ to: WebsitePaths.Whitepaper,
+ shouldOpenInNewTab: true,
+ },
+];
+
+interface DevelopersDropDownProps {
+ location: Location;
+ translate: Translate;
+ menuItemStyles: React.CSSProperties;
+ menuIconStyle: React.CSSProperties;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = (
+ <Container className="flex relative" paddingRight="10">
+ <Text fontColor={this.props.menuIconStyle.color}>
+ {this.props.translate.get(Key.Developers, Deco.Cap)}
+ </Text>
+ </Container>
+ );
+ return (
+ <DropDown
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ style={this.props.menuItemStyles}
+ popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const dropdownMenu = (
+ <Container>
+ <Container padding="1.75rem">
+ {this._renderTitle('Getting started')}
+ <Container className="flex">
+ <Container className="pr4 mr2">
+ {this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
+ </Container>
+ <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
+ </Container>
+ </Container>
+ <Container width="100%" height="1px" backgroundColor={colors.grey300} />
+ <Container className="flex" padding="1.75rem">
+ <Container className="pr4 mr2">
+ <Container>{this._renderTitle('Popular docs')}</Container>
+ <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container>
+ </Container>
+ <Container>
+ <Container>{this._renderTitle('Useful links')}</Container>
+ <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container>
+ </Container>
+ </Container>
+ <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
+ <Container
+ padding="0.9rem"
+ backgroundColor={colors.lightBgGrey}
+ borderBottomLeftRadius={4}
+ borderBottomRightRadius={4}
+ >
+ <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center">
+ {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
+ </Text>
+ </Container>
+ </Link>
+ </Container>
+ );
+ return dropdownMenu;
+ }
+ private _renderTitle(title: string): React.ReactNode {
+ return (
+ <Container paddingBottom="12px">
+ <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
+ {title.toUpperCase()}
+ </Text>
+ </Container>
+ );
+ }
+ private _renderLinkSection(links: ALink[]): React.ReactNode {
+ const numLinks = links.length;
+ let i = 0;
+ const renderLinks = _.map(links, (link: ALink) => {
+ const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#');
+ const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki;
+ let to = link.to;
+ if (isWikiLink && isOnWiki) {
+ to = `${link.to.split('#')[1]}`;
+ }
+ i++;
+ const isLast = i === numLinks;
+ const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
+ return (
+ <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
+ <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}>
+ <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}>
+ {linkText}
+ </Text>
+ </Link>
+ </Container>
+ );
+ });
+ return <Container>{renderLinks}</Container>;
+ }
+}
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3c3155349..c1bbadfde 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,5 +1,5 @@
import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber, logUtils } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as accounting from 'accounting';
@@ -8,7 +8,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
import { FillOrderJSON } from 'ts/components/fill_order_json';
@@ -324,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return (
<div>
Order successfully filled. See the trade details in your{' '}
- <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
+ <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}>
trade history
</Link>
</div>
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6dcb5a0e9..db4f57100 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,31 +1,17 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { Link } from 'react-router-dom';
+
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
-interface MenuItemsBySection {
- [sectionName: string]: FooterMenuItem[];
-}
-
-interface FooterMenuItem {
- title: string;
- path?: string;
- isExternal?: boolean;
-}
-
const ICON_DIMENSION = 16;
-const linkStyle = {
- color: colors.white,
- cursor: 'pointer',
-};
-
const languageToMenuTitle = {
[Language.English]: 'English',
[Language.Russian]: 'Русский',
@@ -51,76 +37,74 @@ export class Footer extends React.Component<FooterProps, FooterState> {
};
}
public render(): React.ReactNode {
- const menuItemsBySection: MenuItemsBySection = {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {
[Key.Documentation]: [
{
+ title: 'Developer Home',
+ to: WebsitePaths.Docs,
+ },
+ {
title: '0x.js',
- path: WebsitePaths.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
},
{
title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
- path: WebsitePaths.SmartContracts,
+ to: WebsitePaths.SmartContracts,
},
{
title: this.props.translate.get(Key.Connect, Deco.Cap),
- path: WebsitePaths.Connect,
+ to: WebsitePaths.Connect,
},
{
title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
- path: WebsitePaths.Whitepaper,
- isExternal: true,
+ to: WebsitePaths.Whitepaper,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Wiki, Deco.Cap),
- path: WebsitePaths.Wiki,
- },
- {
- title: this.props.translate.get(Key.Faq, Deco.Cap),
- path: WebsitePaths.FAQ,
+ to: WebsitePaths.Wiki,
},
],
[Key.Community]: [
{
title: this.props.translate.get(Key.RocketChat, Deco.Cap),
- isExternal: true,
- path: constants.URL_ZEROEX_CHAT,
+ to: constants.URL_ZEROEX_CHAT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Blog, Deco.Cap),
- isExternal: true,
- path: constants.URL_BLOG,
+ to: constants.URL_BLOG,
+ shouldOpenInNewTab: true,
},
{
title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
+ to: constants.URL_TWITTER,
+ shouldOpenInNewTab: true,
},
{
title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
+ to: constants.URL_REDDIT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Forum, Deco.Cap),
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
+ to: constants.URL_DISCOURSE_FORUM,
+ shouldOpenInNewTab: true,
},
],
[Key.Organization]: [
{
title: this.props.translate.get(Key.About, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.About,
+ to: WebsitePaths.About,
},
{
title: this.props.translate.get(Key.Careers, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.Careers,
+ to: WebsitePaths.Careers,
},
{
title: this.props.translate.get(Key.Contact, Deco.Cap),
- isExternal: true,
- path: 'mailto:team@0xproject.com',
+ to: 'mailto:team@0xproject.com',
+ shouldOpenInNewTab: true,
},
],
};
@@ -160,19 +144,19 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Documentation)}
- {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Community)}
- {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Organization)}
- {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -187,7 +171,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
- private _renderMenuItem(item: FooterMenuItem): React.ReactNode {
+ private _renderMenuItem(link: ALink): React.ReactNode {
const titleToIcon: { [title: string]: string } = {
[this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
[this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
@@ -195,30 +179,26 @@ export class Footer extends React.Component<FooterProps, FooterState> {
Reddit: 'reddit.png',
[this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
};
- const iconIfExists = titleToIcon[item.title];
+ const iconIfExists = titleToIcon[link.title];
return (
- <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
- {item.isExternal ? (
- <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+ <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+ <Link
+ to={link.to}
+ shouldOpenInNewTab={link.shouldOpenInNewTab}
+ fontColor={colors.white}
+ className="text-decoration-none"
+ >
+ <div>
{!_.isUndefined(iconIfExists) ? (
<div className="inline-block">
<div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
- <div className="table-cell">{item.title}</div>
+ <div className="table-cell">{link.title}</div>
</div>
) : (
- item.title
+ link.title
)}
- </a>
- ) : (
- <Link to={item.path} style={linkStyle} className="text-decoration-none">
- <div>
- {!_.isUndefined(iconIfExists) && (
- <div className="pr1">{this._renderIcon(iconIfExists)}</div>
- )}
- {item.title}
- </div>
- </Link>
- )}
+ </div>
+ </Link>
</div>
);
}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index db093fb68..134d1cc76 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,9 +1,8 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
@@ -112,7 +111,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '}
<Link
to={`${WebsitePaths.Portal}/account`}
- style={{ cursor: 'pointer', color: colors.darkestGrey }}
+ textDecoration="underline"
+ fontColor={colors.darkestGrey}
>
Set allowance
</Link>
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index ca35abc2b..64a332e07 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,7 +1,5 @@
-import { Styles } from '@0xproject/react-shared';
+import { Link, Styles } from '@0xproject/react-shared';
import * as React from 'react';
-import { Link } from 'react-router-dom';
-
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
@@ -27,7 +25,7 @@ const styles: Styles = {
export const BackButton = (props: BackButtonProps) => {
return (
<div style={{ height: 65, paddingTop: 25 }}>
- <Link to={props.to} style={{ textDecoration: 'none' }}>
+ <Link to={props.to}>
<Island className="flex right" style={styles.backButton}>
<div style={{ marginLeft: 12 }}>
<i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index a6707e86c..3a8c69a70 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -39,7 +39,7 @@ export interface DrawerMenuProps {
}
export const DrawerMenu = (props: DrawerMenuProps) => {
const relayerItemEntry = {
- to: `${WebsitePaths.Portal}`,
+ to: WebsitePaths.Portal,
labelText: 'Relayer ecosystem',
iconName: 'zmdi-portable-wifi',
};
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 39dab77f5..a3352529c 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -1,7 +1,7 @@
import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { MenuItem } from 'ts/components/ui/menu_item';
+import { CustomMenuItem } from 'ts/components/ui/custom_menu_item';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
@@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
{_.map(props.menuItemEntries, entry => {
const isSelected = entry.to === props.selectedPath;
return (
- <MenuItem key={entry.to} to={entry.to}>
+ <CustomMenuItem key={entry.to} to={entry.to}>
<MenuItemLabel
title={entry.labelText}
iconName={entry.iconName}
selected={isSelected}
theme={props.theme}
/>
- </MenuItem>
+ </CustomMenuItem>
);
})}
</div>
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 1470239d6..c58dc26bd 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,9 +1,9 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -317,7 +317,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
};
return (
<Section
- header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />}
+ header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />}
body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />}
/>
);
@@ -389,9 +389,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</Container>
);
return !shouldStartOnboarding ? (
- <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}>
- {startOnboarding}
- </Link>
+ <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link>
) : (
startOnboarding
);
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
deleted file mode 100644
index a14ab54f5..000000000
--- a/packages/website/ts/components/sidebar_header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as React from 'react';
-
-interface SidebarHeaderProps {
- title: string;
- iconUrl: string;
-}
-
-interface SidebarHeaderState {}
-
-export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
- public render(): React.ReactNode {
- return (
- <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
- <div className="flex" style={{ fontSize: 25 }}>
- <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
- <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
- docs
- </div>
- </div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
- |
- </div>
- <div className="flex">
- <div>
- <img src={this.props.iconUrl} width="22" />
- </div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
- {this.props.title}
- </div>
- </div>
- </div>
- );
- }
-}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index fe2c1fcf9..7e7247c25 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,23 +1,16 @@
-import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
-import {
- colors,
- constants as sharedConstants,
- MenuSubsectionsBySection,
- NestedSidebarMenu,
- Styles,
-} from '@0xproject/react-shared';
+import { DocsInfo } from '@0xproject/react-docs';
+import { ALink, colors, Link, Styles } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
-import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
+import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
import { DrawerMenu } from 'ts/components/portal/drawer_menu';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
-import { DropDown } from 'ts/components/ui/drop_down';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -41,8 +34,7 @@ export interface TopBarProps {
translate: Translate;
docsVersion?: string;
availableDocVersions?: string[];
- menu?: DocsMenu;
- menuSubsectionsBySection?: MenuSubsectionsBySection;
+ sectionNameToLinks?: ObjectMap<ALink[]>;
displayType?: TopBarDisplayType;
docsInfo?: DocsInfo;
style?: React.CSSProperties;
@@ -80,21 +72,6 @@ const styles: Styles = {
},
};
-const DOC_WEBSITE_PATHS_TO_KEY = {
- [WebsitePaths.SolCov]: Key.SolCov,
- [WebsitePaths.SmartContracts]: Key.SmartContracts,
- [WebsitePaths.Web3Wrapper]: Key.Web3Wrapper,
- [WebsitePaths.SolCompiler]: Key.SolCompiler,
- [WebsitePaths.JSONSchemas]: Key.JsonSchemas,
- [WebsitePaths.Subproviders]: Key.Subproviders,
- [WebsitePaths.ContractWrappers]: Key.ContractWrappers,
- [WebsitePaths.Connect]: Key.Connect,
- [WebsitePaths.ZeroExJs]: Key.ZeroExJs,
- [WebsitePaths.OrderUtils]: Key.OrderUtils,
- [WebsitePaths.OrderWatcher]: Key.OrderWatcher,
- [WebsitePaths.AssetBuyer]: Key.AssetBuyer,
-};
-
const DEFAULT_HEIGHT = 68;
const EXPANDED_HEIGHT = 75;
@@ -130,117 +107,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
? 'flex mx-auto items-center max-width-4'
: 'flex mx-auto items-center';
const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
- const developerSectionMenuItems = [
- <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
- </Link>,
- <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SmartContracts, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)}
- />
- </Link>,
- <a
- key="subMenuItem-standard-relayer-api"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_STANDARD_RELAYER_API_GITHUB}
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)}
- />
- </a>,
- <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
- />
- </Link>,
- <Link
- key="subMenuItem-contractWrappers"
- to={WebsitePaths.ContractWrappers}
- className="text-decoration-none"
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-asset-buyer" to={WebsitePaths.AssetBuyer} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.AssetBuyer, Deco.CapWords)}
- />
- </Link>,
- <a
- key="subMenuItem-whitePaper"
- target="_blank"
- className="text-decoration-none"
- href={`${WebsitePaths.Whitepaper}`}
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
- />
- </a>,
- <a
- key="subMenuItem-github"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_GITHUB_ORG}
- >
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
- </a>,
- ];
const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
@@ -252,15 +118,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
color: isNightVersion ? 'white' : 'black',
cursor: 'pointer',
};
- const activeNode = (
- <div className="flex relative" style={{ color: menuIconStyle.color }}>
- <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
- <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
- <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
- </div>
- </div>
- );
- const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
return (
<div
style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }}
@@ -273,56 +130,45 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
paddingLeft={this.props.paddingLeft}
paddingRight={this.props.paddingRight}
>
- <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Home}>
<img src={logoUrl} height="30" />
</Link>
<div className="flex-auto" />
{!this._isViewingPortal() && (
<div className={menuClasses}>
<div className="flex items-center justify-between">
- <DropDown
- activeNode={activeNode}
- popoverContent={popoverContent}
- anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
- targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
- style={styles.menuItem}
- />
- <TopBarMenuItem
- title={this.props.translate.get(Key.Wiki, Deco.Cap)}
- path={`${WebsitePaths.Wiki}`}
- style={styles.menuItem}
- isNightVersion={isNightVersion}
- isExternal={false}
+ <DevelopersDropDown
+ location={this.props.location}
+ menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }}
+ translate={this.props.translate}
+ menuIconStyle={menuIconStyle}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Blog, Deco.Cap)}
path={constants.URL_BLOG}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={true}
+ shouldOpenInNewTab={true}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.About, Deco.Cap)}
- path={`${WebsitePaths.About}`}
+ path={WebsitePaths.About}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Careers, Deco.Cap)}
- path={`${WebsitePaths.Careers}`}
+ path={WebsitePaths.Careers}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
- path={`${WebsitePaths.Portal}`}
+ path={WebsitePaths.Portal}
isPrimary={true}
style={styles.menuItem}
className={`${isExpandedDisplayType && 'md-hide'}`}
isNightVersion={isNightVersion}
- isExternal={false}
/>
</div>
</div>
@@ -379,54 +225,35 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
onRequestChange={this._onMenuButtonClick.bind(this)}
>
<div className="clearfix">
- {this._renderDocsMenu()}
- {this._renderWiki()}
<div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
{this.props.translate.get(Key.Website, Deco.Cap)}
</div>
- <Link to={WebsitePaths.Home} className="text-decoration-none">
+ <Link to={WebsitePaths.Home}>
<MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem>
</Link>
- <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
- <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
+ <Link to={WebsitePaths.Docs}>
+ <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem>
</Link>
- {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => {
- if (!this._doesUrlInclude(websitePath)) {
- return (
- <Link
- key={`drawer-menu-item-${websitePath}`}
- to={websitePath}
- className="text-decoration-none"
- >
- <MenuItem className="py2">
- {this.props.translate.get(key, Deco.Cap)}{' '}
- {this.props.translate.get(Key.Docs, Deco.Cap)}
- </MenuItem>
- </Link>
- );
- }
- return null;
- })}
{!this._isViewingPortal() && (
- <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Portal}>
<MenuItem className="py2">
{this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
</MenuItem>
</Link>
)}
- <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
+ <Link to={WebsitePaths.Whitepaper} shouldOpenInNewTab={true}>
<MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem>
- </a>
- <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
+ </Link>
+ <Link to={WebsitePaths.About}>
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
- <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Careers}>
<MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
</Link>
- <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
+ <Link to={constants.URL_BLOG} shouldOpenInNewTab={true}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
- </a>
- <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+ </Link>
+ <Link to={WebsitePaths.FAQ}>
<MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
{this.props.translate.get(Key.Faq, Deco.Cap)}
</MenuItem>
@@ -435,49 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</Drawer>
);
}
- private _renderDocsMenu(): React.ReactNode {
- const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
- return this._doesUrlInclude(websitePath);
- });
- // HACK: We need to make sure the SCROLL_CONTAINER is loaded before rendering the Sidebar
- // because the sidebar renders `react-scroll` links which depend on the scroll container already
- // being rendered.
- const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID);
- if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) {
- return undefined;
- }
- return (
- <div className="lg-hide md-hide">
- <NestedSidebarMenu
- topLevelMenu={this.props.menu}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- sidebarHeader={this.props.sidebarHeader}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- selectedVersion={this.props.docsVersion}
- versions={this.props.availableDocVersions}
- onVersionSelected={this.props.onVersionSelected}
- />
- </div>
- );
- }
- private _renderWiki(): React.ReactNode {
- if (!this._isViewingWiki()) {
- return undefined;
- }
-
- return (
- <div className="lg-hide md-hide">
- <NestedSidebarMenu
- topLevelMenu={this.props.menuSubsectionsBySection}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- sidebarHeader={this.props.sidebarHeader}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- />
- </div>
- );
- }
private _onMenuButtonClick(): void {
this.setState({
isDrawerOpen: !this.state.isDrawerOpen,
@@ -486,28 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
private _isViewingPortal(): boolean {
return _.includes(this.props.location.pathname, WebsitePaths.Portal);
}
- private _isViewingDocs(): boolean {
- return _.includes(this.props.location.pathname, WebsitePaths.Docs);
- }
private _isViewingFAQ(): boolean {
return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
}
- private _doesUrlInclude(aPath: string): boolean {
- return _.includes(this.props.location.pathname, aPath);
- }
- private _isViewingWiki(): boolean {
- return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
- }
private _shouldDisplayBottomBar(): boolean {
- const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
- return this._doesUrlInclude(websitePath);
- });
- return (
- isViewingDocsPage ||
- this._isViewingWiki() ||
- this._isViewingFAQ() ||
- this._isViewingDocs() ||
- this._isViewingPortal()
- );
+ return this._isViewingFAQ() || this._isViewingPortal();
}
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 25fab2868..eff5ba66d 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -1,7 +1,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { CallToAction } from 'ts/components/ui/button';
@@ -13,7 +12,7 @@ interface TopBarMenuItemProps {
title: string;
path?: string;
isPrimary?: boolean;
- isExternal: boolean;
+ shouldOpenInNewTab?: boolean;
style?: React.CSSProperties;
className?: string;
isNightVersion?: boolean;
@@ -26,6 +25,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
isPrimary: false,
style: DEFAULT_STYLE,
className: '',
+ shouldOpenInNewTab: false,
isNightVersion: false,
};
public render(): React.ReactNode {
@@ -38,20 +38,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
);
return (
<div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
- {this.props.isExternal ? (
- <a
- className="text-decoration-none"
- style={{ color: linkColor }}
- target="_blank"
- href={this.props.path}
- >
- {itemContent}
- </a>
- ) : (
- <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
- {itemContent}
- </Link>
- )}
+ <Link to={this.props.path} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}>
+ {itemContent}
+ </Link>
</div>
);
}
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 75ba7bcff..2a6a1f477 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -10,11 +10,13 @@ export interface ButtonProps {
fontFamily?: string;
backgroundColor?: string;
borderColor?: string;
+ borderRadius?: string;
width?: string;
padding?: string;
type?: string;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+ textAlign?: string;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -29,11 +31,12 @@ export const Button = styled(PlainButton)`
color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
- border-radius: 6px;
+ border-radius: ${props => props.borderRadius};
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
+ text-align: ${props => props.textAlign};
background-color: ${props => props.backgroundColor};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
@@ -52,11 +55,13 @@ export const Button = styled(PlainButton)`
Button.defaultProps = {
fontSize: '12px',
+ borderRadius: '6px',
backgroundColor: colors.white,
width: 'auto',
fontFamily: 'Roboto',
isDisabled: false,
padding: '0.8em 2.2em',
+ textAlign: 'center',
};
Button.displayName = 'Button';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..ece077563 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,7 +15,11 @@ export interface ContainerProps {
paddingRight?: StringOrNum;
paddingLeft?: StringOrNum;
backgroundColor?: string;
+ background?: string;
borderRadius?: StringOrNum;
+ borderBottomLeftRadius?: StringOrNum;
+ borderBottomRightRadius?: StringOrNum;
+ borderBottom?: StringOrNum;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 0cb4b387c..c25da6be6 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,24 +1,23 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
-interface MenuItemProps {
+interface CustomMenuItemProps {
to: string;
- style?: React.CSSProperties;
onClick?: () => void;
className?: string;
}
-interface MenuItemState {
+interface CustomMenuItemState {
isHovering: boolean;
}
-export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
- public static defaultProps: Partial<MenuItemProps> = {
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+ public static defaultProps: Partial<CustomMenuItemProps> = {
onClick: _.noop.bind(_),
className: '',
};
- public constructor(props: MenuItemProps) {
+ public constructor(props: CustomMenuItemProps) {
super(props);
this.state = {
isHovering: false,
@@ -30,7 +29,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
opacity: this.state.isHovering ? 0.5 : 1,
};
return (
- <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
+ <Link to={this.props.to}>
<div
onClick={this.props.onClick.bind(this)}
className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 4d5caef08..4138b3fe5 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
import Popover from 'material-ui/Popover';
import * as React from 'react';
import { MaterialUIPosition } from 'ts/types';
@@ -21,6 +22,7 @@ export interface DropDownProps {
zDepth?: number;
activateEvent?: DropdownMouseEvent;
closeEvent?: DropdownMouseEvent;
+ popoverStyle?: React.CSSProperties;
}
interface DropDownState {
@@ -34,6 +36,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
zDepth: 1,
activateEvent: DropdownMouseEvent.Hover,
closeEvent: DropdownMouseEvent.Hover,
+ popoverStyle: {},
};
private _isHovering: boolean;
private _popoverCloseCheckIntervalId: number;
@@ -73,10 +76,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
anchorEl={this.state.anchorEl}
anchorOrigin={this.props.anchorOrigin}
targetOrigin={this.props.targetOrigin}
- onRequestClose={this._closePopover.bind(this)}
+ onRequestClose={
+ this.props.closeEvent === DropdownMouseEvent.Click
+ ? this._closePopover.bind(this)
+ : _.noop.bind(_)
+ }
useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
animated={false}
zDepth={this.props.zDepth}
+ style={this.props.popoverStyle}
>
<div
onMouseEnter={this._onHover.bind(this)}
@@ -92,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
if (this.props.activateEvent === DropdownMouseEvent.Click) {
this.setState({
- isDropDownOpen: true,
+ isDropDownOpen: !this.state.isDropDownOpen,
anchorEl: event.currentTarget,
});
}
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 8a9349c6d..bdaf0701e 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
@@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
GoToAccountManagementSimpleMenuItemProps
> = ({ onClick }) => {
return (
- <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+ <Link to={`${WebsitePaths.Portal}/account`}>
<SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
</Link>
);
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index cd8f290e3..4415962b1 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -19,7 +19,9 @@ export interface TextProps {
textDecorationLine?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
hoverColor?: string;
+ letterSpacing?: string | number;
noWrap?: boolean;
+ textAlign?: string;
display?: string;
}
@@ -34,6 +36,8 @@ export const Text = styled(PlainText)`
font-style: ${props => props.fontStyle};
font-weight: ${props => props.fontWeight};
font-size: ${props => props.fontSize};
+ text-align: ${props => props.textAlign};
+ letter-spacing: ${props => props.letterSpacing};
text-decoration-line: ${props => props.textDecorationLine};
${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
${props => (props.center ? 'text-align: center' : '')};