diff options
Diffstat (limited to 'packages/website')
11 files changed, 127 insertions, 216 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 2d871ac71..a5e8df7e8 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { ChapterLink } from 'ts/@next/components/chapter_link'; import { Column, Section } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; @@ -37,9 +37,12 @@ export const AboutPageLayout = (props: Props) => ( </AnimatedParagraph> {(props.linkLabel && props.linkUrl) && - <AnimatedLink href={props.linkUrl} isNoBorder={true} isWithArrow={true}> + <AnimatedLink + to={props.linkUrl} + isWithArrow={true} + > {props.linkLabel} - </AnimatedLink> + </AnimatedLink> } </Column> </Column> @@ -57,6 +60,6 @@ const AnimatedParagraph = styled(Paragraph)` ${addFadeInAnimation('0.5s', '0.15s')} `; -const AnimatedLink = styled(Link)` +const AnimatedLink = styled(Button)` ${addFadeInAnimation('0.6s', '0.3s')} `; diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 6b7603a10..a3740c25a 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import {colors} from 'ts/style/colors'; -import {Button, Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Wrap, WrapCentered} from 'ts/@next/components/layout'; import {ThemeInterface} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; @@ -56,11 +56,21 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { <Column colWidth="1/2" isPadLarge={true}> <ButtonWrap> {mainCta && - <Link isTransparent={false} href={mainCta.href}>{mainCta.text}</Link> + <Button + isTransparent={false} + href={mainCta.href} + > + {mainCta.text} + </Button> } {secondaryCta && - <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button> + <Button + href={secondaryCta.href} + isTransparent={true} + > + {secondaryCta.text} + </Button> } </ButtonWrap> </Column> diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 42b260731..7033ec88d 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import styled from 'styled-components'; -import {Button, Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Icon} from 'ts/@next/components/icon'; interface Props { icon: string; title: string; linkLabel: string; - linkUrl?: string; - onClick?: () => void; + linkUrl: string; + linkAction: () => void; } export const BlockIconLink = (props: Props) => ( @@ -25,29 +25,14 @@ export const BlockIconLink = (props: Props) => ( {props.title} </Title> - {props.linkUrl && - <Link - isWithArrow={true} - isTransparent={true} - isNoBorder={true} - href={props.linkUrl} - onClick={props.onClick} - > - {props.linkLabel} - </Link> - } - - {props.onClick && - <Button - isWithArrow={true} - isTransparent={true} - isNoBorder={true} - href={props.linkUrl} - onClick={props.onClick} - > - {props.linkLabel} - </Button> - } + <Button + isWithArrow={true} + isTransparent={true} + href={props.linkUrl} + onClick={props.linkAction} + > + {props.linkLabel} + </Button> </div> </Wrap> ); diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 377d1d820..cbe90c7c2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom'; import styled from 'styled-components'; -import { BREAKPOINTS } from 'ts/@next/components/layout'; import { colors } from 'ts/style/colors'; interface ButtonInterface { @@ -11,7 +10,6 @@ interface ButtonInterface { children?: Node | string; isTransparent?: boolean; isNoBorder?: boolean; - isCentered?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; isAccentColor?: boolean; @@ -25,11 +23,41 @@ interface ButtonInterface { }; } -export const Button = styled.button<ButtonInterface>` +export const Button = (props: ButtonInterface) => { + const { + children, + href, + isWithArrow, + to, + } = props; + let linkElem; + + if (props.href) { linkElem = 'a'; } + if (props.to) { linkElem = ReactRouterLink; } + + const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + + return ( + <Component {...props}> + {props.children} + + { isWithArrow && + <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" + /> + </svg> + } + </Component> + ); +}; + +const ButtonBase = styled.button<ButtonInterface>` appearance: none; - border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`}; + border: 1px solid transparent; display: inline-block; - background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}; + background-color: ${props => props.bgColor || colors.brandLight}; + background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'} border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; @@ -38,6 +66,7 @@ export const Button = styled.button<ButtonInterface>` line-height: normal; text-decoration: none; cursor: pointer; + outline: none; transition: background-color 0.35s, border-color 0.35s; svg { @@ -51,7 +80,7 @@ export const Button = styled.button<ButtonInterface>` } &:hover { - background-color: ${props => !props.isTransparent && '#04BEA8'}; + background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; svg { @@ -59,77 +88,3 @@ export const Button = styled.button<ButtonInterface>` } } `; - -export const Link: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterLink); - - return ( - <Component to={href} {...props}> - {children} - - { isWithArrow && - <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" - /> - </svg> - } - </Component> - ); -}; - -Link.defaultProps = { - isTransparent: true, -}; - -export const NavLink: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterNavLink); - - return ( - <Component to={href} {...props}> - {children} - - { isWithArrow && - <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" - /> - </svg> - } - </Component> - ); -}; - -NavLink.defaultProps = { - isTransparent: true, -}; - -// Added this, & + & doesnt really work since we switch with element types... -export const ButtonWrap = styled.div` - button + button, - a + a, - a + button, - button + a { - @media (min-width: ${BREAKPOINTS.mobile}) { - margin-left: 10px; - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - margin: 0 10px; - } - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - white-space: nowrap; - } -`; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index cab153361..e19f041c7 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import {Link} from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { Paragraph } from 'ts/@next/components/text'; @@ -42,15 +42,13 @@ export const Definition = (props: Props) => ( {props.actions && <LinkWrap> {props.actions.map((item, index) => ( - <Link + <Button href={item.url} isWithArrow={true} - isTransparent={true} - isNoBorder={true} isAccentColor={true} > {item.label} - </Link> + </Button> ))} </LinkWrap> } diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index 933ee7034..8a4db2656 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {Link as RouterLink} from 'react-router-dom'; import styled, {withTheme} from 'styled-components'; -import {Link} from 'ts/@next/components/button'; +import {Button} from 'ts/@next/components/button'; import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout'; import {Heading} from 'ts/@next/components/text'; import {GlobalStyle} from 'ts/@next/constants/globalStyle'; @@ -172,7 +172,7 @@ const StyledWrap = styled(Wrap)` } `; -const StyledLink = styled(Link)` +const StyledLink = styled(Button)` width: 100%; position: absolute; bottom: 0; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 72082ce9f..35d53d21f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, Link, NavLink } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; import { Dropdown } from 'ts/@next/components/dropdowns/mock'; @@ -85,29 +85,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { }); } - public getNavItem = (link: NavItem, index: number): React.ReactNode => { - const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; - const Subnav = link.dropdownComponent; - - return ( - <Wrapper key={`nav-${index}`}> - <StyledNavLink - href={link.url} - isTransparent={true} - isNoBorder={true} - > - {link.text} - </StyledNavLink> - - {link.dropdownComponent && - <DropdownWrap width={link.dropdownWidth}> - <Subnav /> - </DropdownWrap> - } - </Wrapper> - ); - } - public render(): React.ReactNode { const { isOpen } = this.state; const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -121,7 +98,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { <StyledButtonWrap> {_.map(navItems, (link, index) => ( - this.getNavItem(link, index) + <NavItem link={link} index={index} /> ))} </StyledButtonWrap> @@ -143,6 +120,30 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { export const Header = withTheme(HeaderBase); +const NavItem = (props): React.ReactNode => { + const { link, index } = props; + const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; + const Subnav = link.dropdownComponent; + + return ( + <Wrapper key={`nav-${index}`}> + <StyledNavLink + to={link.url} + isTransparent={true} + isNoBorder={true} + > + {link.text} + </StyledNavLink> + + {link.dropdownComponent && + <DropdownWrap width={link.dropdownWidth}> + <Subnav /> + </DropdownWrap> + } + </Wrapper> + ); +}; + const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; @@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` } `; -const StyledNavLink = styled(NavLink).attrs({ +const LinkWrap = styled.div` + position: relative; + + a { + display: block; + } + + @media (min-width: 800px) { + &:hover > div { + display: block; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0); + transition: opacity 0.35s, transform 0.35s, visibility 0s; + } + } +`; + +const StyledNavLink = styled(ReactRouterLink).attrs({ activeStyle: { opacity: 1 }, })` + color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; + padding: 15px 0; + margin: 0 30px; &:hover { opacity: 1; @@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div` @media (max-width: 800px) { display: none; } - -/* - @media (max-width: 800px) { - background-color: #022924; - display: flex; - flex-wrap: wrap; - padding: 20px 20px; - - a { - text-align: left; - padding-left: 0; - } - - a + a { - margin-left: 0; - } - } */ -`; - -const MobileProductLinksWrap = styled(StyledButtonWrap)` - display: none; - - @media (max-width: 800px) { - display: block; - background-color: transparent; - flex-direction: column; - - a { - display: block; - width: 100%; - } - } -`; - -const LinkWrap = styled.div` - position: relative; - - a { - display: block; - } - - @media (min-width: 800px) { - &:hover > div { - display: block; - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0); - transition: opacity 0.35s, transform 0.35s, visibility 0s; - } - } `; const DropdownWrap = styled.div<DropdownWrapInterface>` @@ -282,17 +254,6 @@ const DropdownWrap = styled.div<DropdownWrapInterface>` } `; -const Nav = styled.div` - @media (max-width: 800px) { - background-color: ${props => props.theme.bgColor}; - position: absolute; - top: 0; - left: 0; - right: 0; - padding-top: 65px; - } -`; - const TradeButton = styled(Button)` padding: 14px 22px; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index 3aac7f5d8..5a0617256 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -24,13 +24,13 @@ export const SectionLandingCta = (props: Props) => ( icon="getStarted" title="Ready to build on 0x?" linkLabel="Get Started" - linkUrl="#" + linkUrl="https://0xproject.com/docs" /> <BlockIconLink icon="getInTouch" title="Want help from the 0x team?" linkLabel="Get in Touch" - onClick={props.onContactClick} + linkAction={props.onContactClick} /> </Section> ); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 513fa9867..8c9d4376f 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -21,7 +21,7 @@ const HeroActions = () => ( Get Started </Button> - <Button href="/why" isTransparent={true} isInline={true}> + <Button to="/next/why" isTransparent={true} isInline={true}> Learn More </Button> </> diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index 259618d13..92c076266 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; import { Separator } from 'ts/@next/components/separator'; import { Heading, Paragraph } from 'ts/@next/components/text'; @@ -61,7 +61,7 @@ const Highlight = ({ highlight }) => ( <Column width="60%" maxWidth="560px"> <Paragraph isMuted={false}>{highlight.text}</Paragraph> - <Link href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Link> + <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button> </Column> </HighlightWrap> ); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 75269d7ef..bb9b058e2 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -8,7 +8,7 @@ import { colors } from 'ts/style/colors'; import {Hero} from 'ts/@next/components/hero'; import { Banner } from 'ts/@next/components/banner'; -import { Link } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; @@ -84,14 +84,13 @@ export class NextWhy extends React.PureComponent { title="The exchange layer for the crypto economy" description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens." actions={ - <Link + <Button href="/docs" - isCentered={true} isWithArrow={true} isAccentColor={true} > Build on 0x - </Link> + </Button> } /> |