diff options
Diffstat (limited to 'packages/website/ts/components')
9 files changed, 272 insertions, 218 deletions
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 9a2146f9c..c0bd4fb19 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -1,33 +1,25 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +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, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; export interface DocsTopBarProps { location: Location; + screenWidth: ScreenWidths; translate: Translate; - sectionNameToLinks?: ObjectMap<ALink[]>; + sidebar?: React.ReactNode; } interface DocsTopBarState { isDrawerOpen: boolean; } -interface MenuItemInfo { - title: string; - url: string; - iconUrl: string; - fontColor: string; - fontWeight?: string; -} - export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { constructor(props: DocsTopBarProps) { super(props); @@ -43,48 +35,35 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState } } public render(): React.ReactNode { - const menuItemInfos: MenuItemInfo[] = [ + const menuItemLinks: ALink[] = [ + { + title: this.props.translate.get(Key.Home, Deco.Cap), + to: WebsitePaths.Home, + }, { - title: this.props.translate.get(Key.Github, Deco.Cap), - url: constants.URL_GITHUB_ORG, - iconUrl: '/images/developers/github_icon.svg', - fontColor: colors.linkSectionGrey, + title: this.props.translate.get(Key.Wiki, Deco.Cap), + to: WebsitePaths.Wiki, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - url: constants.URL_FORUM, - iconUrl: '/images/developers/forum_icon.svg', - fontColor: colors.linkSectionGrey, + to: constants.URL_FORUM, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.LiveChat, Deco.Cap), - url: constants.URL_ZEROEX_CHAT, - iconUrl: '/images/developers/chat_icon.svg', - fontColor: colors.lightLinkBlue, - fontWeight: 'bold', + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, ]; return ( <Container height={80}> - <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> - <Container className="col col-2 sm-hide xs-hide"> - <Link - to={WebsitePaths.Home} - fontColor={colors.linkSectionGrey} - className="flex items-center text-decoration-none" - > - <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} /> - <Container paddingLeft="8px"> - <Text fontSize="16px" fontColor={colors.linkSectionGrey}> - 0xproject.com - </Text> - </Container> - </Link> - </Container> - <Container className="col col-4 md-hide sm-hide xs-hide" /> - <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <Container + className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 justify-end" + width="100%" + > + <Container className="sm-hide xs-hide"> <Container className="flex items-center justify-between right" width="300px"> - {this._renderMenuItems(menuItemInfos)} + {this._renderMenuItems(menuItemLinks)} </Container> </Container> <Container className="lg-hide md-hide"> @@ -104,33 +83,25 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState /> </Container> </Container> - <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} /> - {this._renderDrawer()} + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} </Container> ); } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { return ( - <a + <Link key={`menu-item-${menuItemInfo.title}`} - href={menuItemInfo.url} - target="_blank" - className="text-decoration-none" + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} > - <Container className="flex"> - <img src={menuItemInfo.iconUrl} width="18" /> - <Container className="flex items-center" paddingLeft="4px"> - <Text - fontSize="16px" - fontWeight={menuItemInfo.fontWeight || 'normal'} - fontColor={menuItemInfo.fontColor} - > - {menuItemInfo.title} - </Text> - </Container> + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {menuItemInfo.title} + </Text> </Container> - </a> + </Link> ); }); return menuItems; @@ -143,13 +114,8 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - <Container className="clearfix pl1"> - <NestedSidebarMenu - sectionNameToLinks={this.props.sectionNameToLinks} - shouldDisplaySectionHeaders={true} - shouldReformatMenuItemNames={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> + <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> + {this.props.sidebar} </Container> </Drawer> ); 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/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 index df5dc173d..1db1e89b8 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -44,6 +44,10 @@ const popularDocsToLinkInfos: ALink[] = [ ]; const usefulLinksToLinkInfo: ALink[] = [ { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { title: Key.Github, to: constants.URL_GITHUB_ORG, shouldOpenInNewTab: true, @@ -53,11 +57,6 @@ const usefulLinksToLinkInfo: ALink[] = [ to: WebsitePaths.Whitepaper, shouldOpenInNewTab: true, }, - { - title: Key.Sandbox, - to: constants.URL_SANDBOX, - shouldOpenInNewTab: true, - }, ]; interface DevelopersDropDownProps { @@ -85,7 +84,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} targetOrigin={{ horizontal: 'left', vertical: 'top' }} style={this.props.menuItemStyles} - popoverStyle={{ borderRadius: 4, width: 427, height: 373, marginTop: 10 }} + popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} /> ); } diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index f11ecae19..db4f57100 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -40,6 +40,10 @@ export class Footer extends React.Component<FooterProps, FooterState> { const sectionNameToLinks: ObjectMap<ALink[]> = { [Key.Documentation]: [ { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { title: '0x.js', to: WebsitePaths.ZeroExJs, }, @@ -60,10 +64,6 @@ export class Footer extends React.Component<FooterProps, FooterState> { title: this.props.translate.get(Key.Wiki, Deco.Cap), to: WebsitePaths.Wiki, }, - { - title: this.props.translate.get(Key.Faq, Deco.Cap), - to: WebsitePaths.FAQ, - }, ], [Key.Community]: [ { 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 3297befad..eb1854f50 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -35,7 +35,6 @@ export interface TopBarProps { docsVersion?: string; availableDocVersions?: string[]; sectionNameToLinks?: ObjectMap<ALink[]>; - subsectionNameToLinks?: ObjectMap<ALink[]>; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -73,20 +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, -}; - const DEFAULT_HEIGHT = 68; const EXPANDED_HEIGHT = 75; @@ -154,17 +139,11 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <div className="flex items-center justify-between"> <DevelopersDropDown location={this.props.location} - menuItemStyles={styles.menuItem} + menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }} translate={this.props.translate} menuIconStyle={menuIconStyle} /> <TopBarMenuItem - title={this.props.translate.get(Key.Wiki, Deco.Cap)} - path={WebsitePaths.Wiki} - style={styles.menuItem} - isNightVersion={isNightVersion} - /> - <TopBarMenuItem title={this.props.translate.get(Key.Blog, Deco.Cap)} path={constants.URL_BLOG} style={styles.menuItem} @@ -246,30 +225,15 @@ 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}> <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> - <Link to={WebsitePaths.Wiki}> - <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> + <Link to={WebsitePaths.Docs}> + <MenuItem className="py2">{this.props.translate.get(Key.Documentation, 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}> - <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}> <MenuItem className="py2"> @@ -298,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.sectionNameToLinks) || _.isNull(documentationContainer)) { - return undefined; - } - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - sectionNameToLinks={this.props.sectionNameToLinks} - subsectionNameToLinks={this.props.subsectionNameToLinks} - 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 - sectionNameToLinks={this.props.sectionNameToLinks} - subsectionNameToLinks={this.props.subsectionNameToLinks} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> - </div> - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -349,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/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 75ba7bcff..ccaadc800 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -10,6 +10,7 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; @@ -29,7 +30,7 @@ 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}; @@ -52,6 +53,7 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 1daaeb1c3..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'; @@ -75,7 +76,11 @@ 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} @@ -95,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, }); } |