diff options
Diffstat (limited to 'packages/website/ts/@next/components')
6 files changed, 170 insertions, 164 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 7d98804bb..86a94ae2b 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; @@ -14,7 +15,8 @@ interface Props { title: string; description: React.ReactNode | string; linkLabel?: string; - linkUrl?: string; + href?: string; + to?: string; children?: React.ReactNode; } @@ -22,31 +24,32 @@ export const AboutPageLayout = (props: Props) => ( <SiteWrap theme="light"> <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> <Column> - <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink> - <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink> - <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink> - <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink> - </Column> + <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink> + <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink> + <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink> + <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink> + </Column> - <Column width="70%" maxWidth="800px"> - <Column width="100%" maxWidth="680px"> - <AnimatedHeading size="medium"> - {props.title} - </AnimatedHeading> + <Column width="70%" maxWidth="800px"> + <Column width="100%" maxWidth="680px"> + <AnimatedHeading size="medium">{props.title}</AnimatedHeading> - <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> - {props.description} - </AnimatedParagraph> + <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> + {props.description} + </AnimatedParagraph> - {(props.linkLabel && props.linkUrl) && - <AnimatedLink - to={props.linkUrl} - isWithArrow={true} - isAccentColor={true} - > - {props.linkLabel} - </AnimatedLink> - } + {props.linkLabel && + (props.href || props.to) && ( + <AnimatedLink + to={props.to} + href={props.href} + target={!_.isUndefined(props.href) ? '_blank' : undefined} + isWithArrow={true} + isAccentColor={true} + > + {props.linkLabel} + </AnimatedLink> + )} </Column> </Column> </Section> @@ -56,13 +59,13 @@ export const AboutPageLayout = (props: Props) => ( ); const AnimatedHeading = styled(Heading)` - ${addFadeInAnimation('0.5s')} + ${addFadeInAnimation('0.5s')}; `; const AnimatedParagraph = styled(Paragraph)` - ${addFadeInAnimation('0.5s', '0.15s')} + ${addFadeInAnimation('0.5s', '0.15s')}; `; const AnimatedLink = styled(Button)` - ${addFadeInAnimation('0.6s', '0.3s')} + ${addFadeInAnimation('0.6s', '0.3s')}; `; diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index dfd351d32..96d88846b 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -1,63 +1,73 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import {Link as RouterLink} from 'react-router-dom'; -import styled, {withTheme} from 'styled-components'; +import styled, { withTheme } from 'styled-components'; -import {Button} from 'ts/@next/components/button'; -import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout'; -import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; -import {Heading} from 'ts/@next/components/text'; +import { Button } from 'ts/@next/components/button'; +import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { Heading } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface Props { theme: ThemeValuesInterface; } -const introData = [ +interface LinkConfig { + label: string; + url: string; + shouldOpenInNewTab?: boolean; +} + +const introData: LinkConfig[] = [ { label: 'Build a relayer', - url: 'https://0x.org/wiki#Build-A-Relayer', + url: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, { label: 'Develop on Ethereum', - url: 'https://0x.org/wiki#Ethereum-Development', + url: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { label: 'Make & take orders', - url: 'https://0x.org/wiki#Create,-Validate,-Fill-Order', + url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, { label: 'Use networked liquidity', - url: 'https://0x.org/wiki#Find,-Submit,-Fill-Order-From-Relayer', + url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; -const docsData = [ +const docsData: LinkConfig[] = [ { label: '0x.js', - url: 'https://0x.org/docs/0x.js', + url: WebsitePaths.ZeroExJs, }, { label: '0x Connect', - url: 'https://0x.org/docs/connect', + url: WebsitePaths.Connect, }, { label: 'Smart Contract', - url: 'https://0x.org/docs/contracts', + url: WebsitePaths.SmartContracts, }, ]; -const linksData = [ +const linksData: LinkConfig[] = [ { label: 'Wiki', - url: 'https://0x.org/wiki', + url: WebsitePaths.Wiki, }, { label: 'Github', - url: 'https://github.com/0xProject', + url: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, }, { - label: 'Whitepaper', - url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', + label: 'Protocol specification', + url: constants.URL_PROTOCOL_SPECIFICATION, + shouldOpenInNewTab: true, }, ]; @@ -65,25 +75,16 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro <> <DropdownWrap> <div> - <Heading - asElement="h4" - size={14} - color="inherit" - marginBottom="15px" - isMuted={0.35} - > + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> Getting Started </Heading> <StyledGrid isCentered={false} isWrapped={true}> {_.map(introData, (item, index) => ( <li> - <RouterLink - key={`introLink-${index}`} - to={item.url} - > + <Link key={`introLink-${index}`} to={item.url}> {item.label} - </RouterLink> + </Link> </li> ))} </StyledGrid> @@ -91,51 +92,44 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro <StyledWrap> <Column width="calc(100% - 15px)"> - <Heading - asElement="h4" - size={14} - color="inherit" - marginBottom="15px" - isMuted={0.35} - > + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> Popular Docs </Heading> <ul> {_.map(docsData, (item, index) => ( <li key={`docsLink-${index}`}> - <RouterLink to={item.url}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> {item.label} - </RouterLink> + </Link> </li> ))} </ul> </Column> <Column width="calc(100% - 15px)"> - <Heading - asElement="h4" - size={14} - color="inherit" - marginBottom="15px" - isMuted={0.35} - > + <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}> Useful Links </Heading> <ul> {_.map(linksData, (item, index) => ( <li key={`usefulLink-${index}`}> - <RouterLink to={item.url}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> {item.label} - </RouterLink> + </Link> </li> ))} </ul> </Column> </StyledWrap> - <StyledLink to="https://0x.org/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}> + <StyledLink + to={WebsitePaths.Docs} + bgColor={props.theme.dropdownButtonBg} + isAccentColor={true} + isNoBorder={true} + > View All Documentation </StyledLink> </DropdownWrap> @@ -174,7 +168,7 @@ const StyledWrap = styled(FlexWrap)` opacity: 0.15; position: absolute; top: 0; - left:0; + left: 0; } `; diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 155f46979..1e4d7789b 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -1,3 +1,4 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; @@ -8,11 +9,12 @@ import { Logo } from 'ts/@next/components/logo'; import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { NewsletterForm } from 'ts/@next/components/newsletter_form'; import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface LinkInterface { text: string; url: string; - newWindow?: boolean; + shouldOpenInNewTab?: boolean; } interface LinkRows { @@ -37,9 +39,9 @@ const linkRows: LinkRows[] = [ { heading: 'Developers', links: [ - { url: '#', text: 'Documentation' }, - { url: '#', text: 'GitHub' }, - { url: '#', text: 'Whitepaper' }, + { url: WebsitePaths.Docs, text: 'Documentation' }, + { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true }, + { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protogcol Spec', shouldOpenInNewTab: true }, ], }, { @@ -49,7 +51,7 @@ const linkRows: LinkRows[] = [ { url: WebsitePaths.AboutMission, text: 'Mission' }, { url: WebsitePaths.AboutTeam, text: 'Team' }, { url: WebsitePaths.AboutJobs, text: 'Jobs' }, - { url: WebsitePaths.AboutPress, text: 'Press Kit' }, + { url: WebsitePaths.AboutPress, text: 'Press' }, { url: WebsitePaths.Ecosystem, text: 'Grant Program' }, ], }, @@ -57,10 +59,10 @@ const linkRows: LinkRows[] = [ heading: 'Community', isOnMobile: true, links: [ - { url: '#', text: 'Twitter' }, - { url: '#', text: 'Rocket Chat' }, - { url: '#', text: 'Facebook' }, - { url: '#', text: 'Reddit' }, + { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true }, + { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true }, + { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true }, + { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true }, ], }, ]; @@ -78,9 +80,7 @@ export const Footer: React.StatelessComponent = () => ( {_.map(linkRows, (row: LinkRows, index) => ( <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}> <FooterSectionWrap> - <RowHeading> - {row.heading} - </RowHeading> + <RowHeading>{row.heading}</RowHeading> <LinkList links={row.links} /> </FooterSectionWrap> @@ -93,15 +93,15 @@ export const Footer: React.StatelessComponent = () => ( ); const LinkList = (props: LinkListProps) => ( - <List> - {_.map(props.links, (link, index) => ( - <li key={`fl-${index}`}> - <Link to={link.url}> - {link.text} - </Link> - </li> - ))} - </List> + <List> + {_.map(props.links, (link, index) => ( + <li key={`fl-${index}`}> + <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}> + {link.text} + </Link> + </li> + ))} + </List> ); const FooterWrap = styled.footer` @@ -154,7 +154,7 @@ const List = styled.ul` } `; -const Link = styled(ReactRouterLink)` +const Link = styled(SmartLink)` color: inherit; opacity: 0.5; display: block; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..e6b49e395 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,8 +1,8 @@ +import { Link } from '@0x/react-shared'; import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { NavLink as ReactRouterLink } from 'react-router-dom'; -import styled, { withTheme } from 'styled-components'; +import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; @@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface HeaderProps { location?: Location; @@ -29,6 +30,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +45,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +62,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: constants.URL_BLOG, + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +73,7 @@ class HeaderBase extends React.Component<HeaderProps> { if (this.props.isNavToggled) { this.props.toggleMobileNav(); } - } + }; public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -81,25 +82,16 @@ class HeaderBase extends React.Component<HeaderProps> { <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}> <StyledHeader isNavToggled={isNavToggled}> <HeaderWrap> - <ReactRouterLink to={WebsitePaths.Home}> + <Link to={WebsitePaths.Home}> <Logo /> - </ReactRouterLink> + </Link> <NavLinks> - {_.map(navItems, (link, index) => ( - <NavItem - key={`navlink-${index}`} - link={link} - /> - ))} + {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)} </NavLinks> <MediaQuery minWidth={990}> - <TradeButton - bgColor={theme.headerButtonBg} - color="#ffffff" - href="/portal" - > + <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal"> Trade on 0x </TradeButton> </MediaQuery> @@ -118,23 +110,30 @@ export const Header = withTheme(HeaderBase); const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; - + const linkElement = _.isUndefined(link.url) ? ( + <StyledAnchor href="#">{link.text}</StyledAnchor> + ) : ( + <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}> + {link.text} + </StyledNavLink> + ); return ( <LinkWrap> - <StyledNavLink to={link.url}> - {link.text} - </StyledNavLink> + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( <DropdownWrap width={link.dropdownWidth}> <Subnav /> </DropdownWrap> - } + )} </LinkWrap> ); }; -const StyledHeader = styled.header<HeaderProps>` +const StyledHeader = + styled.header < + HeaderProps > + ` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -157,9 +156,7 @@ const LinkWrap = styled.li` } `; -const StyledNavLink = styled(ReactRouterLink).attrs({ - activeStyle: { opacity: 1 }, -})` +const linkStyles = css` color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; @@ -171,15 +168,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; +`; + const HeaderWrap = styled(FlexWrap)` - justify-content: space-between; - align-items: center; - - @media (max-width: 800px) { - padding-top: 0; - display: flex; - padding-bottom: 0; - } + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } `; const NavLinks = styled.ul` @@ -192,7 +199,10 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = styled.div<DropdownWrapInterface>` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index 001bc3713..a7711451b 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -1,5 +1,5 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as React from 'react'; -import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; interface LinkInterface { @@ -13,7 +13,7 @@ interface LinkInterface { theme?: { textColor: string; }; - target?: string; + shouldOpenInNewTab?: boolean; } export const Link = (props: LinkInterface) => { @@ -44,7 +44,7 @@ export const LinkWrap = styled.div` `; const StyledLink = - styled(ReactRouterLink) < + styled(SmartLink) < LinkInterface > ` display: ${props => !props.isBlock && 'inline-flex'}; diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx index 8b5ffd7e8..122036b9a 100644 --- a/packages/website/ts/@next/components/mobileNav.tsx +++ b/packages/website/ts/@next/components/mobileNav.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import MediaQuery from 'react-responsive'; import styled from 'styled-components'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; -import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout'; +import { WrapGrid, WrapProps } from 'ts/@next/components/newLayout'; import { WebsitePaths } from 'ts/types'; interface Props { @@ -24,14 +24,10 @@ export class MobileNav extends React.PureComponent<Props> { <ul> <li> - <Link to={WebsitePaths.Instant}> - 0x Instant - </Link> + <Link to={WebsitePaths.Instant}>0x Instant</Link> </li> <li> - <Link to={WebsitePaths.LaunchKit}> - 0x Launch Kit - </Link> + <Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link> </li> </ul> </Section> @@ -39,39 +35,36 @@ export class MobileNav extends React.PureComponent<Props> { <Section isDark={true}> <Grid as="ul" isFullWidth={true} isWrapped={true}> <li> - <Link to={WebsitePaths.Why}> - Why 0x - </Link> + <Link to={WebsitePaths.Why}>Why 0x</Link> </li> <li> - <Link to={WebsitePaths.AboutMission}> - About - </Link> + <Link to={WebsitePaths.AboutMission}>About</Link> </li> <li> - <a href="https://blog.0x.org/latest" target="_blank"> + <a href="https://blog.0xproject.com/latest" target="_blank"> Blog </a> </li> </Grid> </Section> - {isToggled && - <Overlay onClick={toggleMobileNav} /> - } + {isToggled && <Overlay onClick={toggleMobileNav} />} </Wrap> </MediaQuery> ); } } -const Wrap = styled.nav<{ isToggled: boolean }>` +const Wrap = + styled.nav < + { isToggled: boolean } > + ` width: 100%; height: 357px; background-color: ${props => props.theme.mobileNavBgUpper}; color: ${props => props.theme.mobileNavColor}; - transition: ${props => props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s'}; - transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0); + transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')}; + transform: translate3d(0, ${props => (props.isToggled ? 0 : '-100%')}, 0); visibility: ${props => !props.isToggled && 'hidden'}; position: fixed; display: flex; @@ -103,13 +96,19 @@ const Overlay = styled.div` cursor: pointer; `; -const Section = styled.div<{ isDark?: boolean }>` +const Section = + styled.div < + { isDark: boolean } > + ` width: 100%; padding: 15px 30px; background-color: ${props => props.isDark && props.theme.mobileNavBgLower}; `; -const Grid = styled(WrapGrid)<WrapProps>` +const Grid = + styled(WrapGrid) < + WrapProps > + ` justify-content: flex-start; li { |