diff options
Diffstat (limited to 'packages/website/ts/@next/components')
5 files changed, 109 insertions, 88 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index ab804b758..b686b27a2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -19,52 +19,55 @@ interface ButtonInterface { isInline?: boolean; href?: string; type?: string; + target?: string; to?: string; onClick?: () => any; theme?: ThemeInterface; + useAnchorTag?: boolean; } export const Button = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - to, - } = props; + const { children, href, isWithArrow, to, useAnchorTag, target } = props; let linkElem; - if (href) { linkElem = 'a'; } - if (to) { linkElem = ReactRouterLink; } + if (href || useAnchorTag) { + linkElem = 'a'; + } + if (to) { + linkElem = ReactRouterLink; + } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + const targetProp = href && target ? { target } : {}; return ( - <Component {...props}> + <Component {...props} {...targetProp}> {children} - { isWithArrow && + {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" - /> + <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>` +const ButtonBase = + styled.button < + ButtonInterface > + ` appearance: none; border: 1px solid transparent; display: inline-block; 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'}; + 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'}; white-space: ${props => props.isWithArrow && 'nowrap'}; text-align: center; - font-size: ${props => props.isWithArrow ? '20px' : '18px'}; + font-size: ${props => (props.isWithArrow ? '20px' : '18px')}; text-decoration: none; cursor: pointer; outline: none; @@ -77,12 +80,12 @@ const ButtonBase = styled.button<ButtonInterface>` } path { - fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; + fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; } &:hover { - background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'}; - border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; + background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'}; + border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'}; svg { transform: translate3d(2px, -2px, 0); diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 77f837294..d203151b9 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -7,7 +7,9 @@ import { Heading, Paragraph } from 'ts/@next/components/text'; interface Action { label: string; - url: string; + url?: string; + onClick?: () => void; + useAnchorTag?: boolean; } interface Props { @@ -25,11 +27,7 @@ interface Props { export const Definition = (props: Props) => ( <Wrap {...props}> - <Icon - name={props.icon} - size={props.iconSize || 'medium'} - margin={[0, 0, 'default', 0]} - /> + <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} /> <TextWrap {...props}> <Heading @@ -42,34 +40,36 @@ export const Definition = (props: Props) => ( </Heading> {typeof props.description === 'string' ? ( - <Paragraph isMuted={true}> - {props.description} - </Paragraph> + <Paragraph isMuted={true}>{props.description}</Paragraph> ) : ( - <> - {props.description} - </> + <>{props.description}</> )} - {props.actions && + {props.actions && ( <LinkWrap> {props.actions.map((item, index) => ( <Button key={`dlink-${index}`} href={item.url} + onClick={item.onClick} isWithArrow={true} isAccentColor={true} + useAnchorTag={item.useAnchorTag} + target="_blank" > {item.label} </Button> ))} </LinkWrap> - } + )} </TextWrap> </Wrap> ); -const Wrap = styled.div<Props>` +const Wrap = + styled.div < + Props > + ` max-width: ${props => props.isInline && '354px'}; & + & { @@ -78,7 +78,7 @@ const Wrap = styled.div<Props>` } @media (min-width: 768px) { - width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'}; + width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')}; display: ${props => props.isInlineIcon && 'flex'}; justify-content: ${props => props.isInlineIcon && 'space-between'}; align-items: ${props => props.isInlineIcon && 'center'}; @@ -94,7 +94,10 @@ const Wrap = styled.div<Props>` } `; -const TextWrap = styled.div<Props>` +const TextWrap = + styled.div < + Props > + ` width: 100%; max-width: 560px; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index 6ca1e44c1..a7711451b 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -13,6 +13,7 @@ interface LinkInterface { theme?: { textColor: string; }; + shouldOpenInNewTab?: boolean; } export const Link = (props: LinkInterface) => { diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx index 6dc4bf678..eef496982 100644 --- a/packages/website/ts/@next/components/newsletter_form.tsx +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import styled, { withTheme } from 'styled-components'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { colors } from 'ts/style/colors'; - -import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; +import { errorReporter } from 'ts/utils/error_reporter'; interface FormProps { theme: ThemeValuesInterface; @@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme return ( <InnerInputWrapper {...props}> - <label className="visuallyHidden" htmlFor={id}>{label}</label> + <label className="visuallyHidden" htmlFor={id}> + {label} + </label> <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} /> </InnerInputWrapper> ); @@ -39,17 +41,34 @@ class Form extends React.Component<FormProps> { isSubmitted: false, }; public render(): React.ReactNode { - const {isSubmitted} = this.state; - const {theme} = this.props; + const { isSubmitted } = this.state; + const { theme } = this.props; return ( <StyledForm onSubmit={this._onSubmitAsync.bind(this)}> <InputWrapper> - <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} textColor={theme.textColor} /> + <Input + isSubmitted={isSubmitted} + name="email" + type="email" + label="Email Address" + ref={this.emailInput} + required={true} + textColor={theme.textColor} + /> <SubmitButton> - <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/> + <Arrow + isSubmitted={isSubmitted} + width="22" + height="17" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" + fill="#CBCBCB" + /> </Arrow> </SubmitButton> <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText> @@ -67,6 +86,10 @@ class Form extends React.Component<FormProps> { this.setState({ isSubmitted: true }); + if (email === 'triggererror@0xproject.org') { + throw new Error('Manually triggered error'); + } + try { const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { method: 'post', @@ -77,7 +100,7 @@ class Form extends React.Component<FormProps> { body: JSON.stringify({ email, referrer }), }); } catch (e) { - // dosomething + errorReporter.report(e); } } } @@ -92,7 +115,10 @@ const StyledForm = styled.form` margin-top: 27px; `; -const StyledInput = styled.input<InputProps>` +const StyledInput = + styled.input < + InputProps > + ` appearance: none; background-color: transparent; border: 0; @@ -112,7 +138,10 @@ const InputWrapper = styled.div` position: relative; `; -const InnerInputWrapper = styled.div<ArrowProps>` +const InnerInputWrapper = + styled.div < + ArrowProps > + ` opacity: ${props => props.isSubmitted && 0}; visibility: ${props => props.isSubmitted && 'hidden'}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; @@ -143,7 +172,10 @@ const Text = styled.p` margin-top: 15px; `; -const SuccessText = styled.p<ArrowProps>` +const SuccessText = + styled.p < + ArrowProps > + ` color: #B1B1B1; font-size: 1rem; font-weight: 300; @@ -154,13 +186,16 @@ const SuccessText = styled.p<ArrowProps>` top: 0; text-align: left; right: 50px; - opacity: ${props => props.isSubmitted ? 1 : 0}; - visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'}; + opacity: ${props => (props.isSubmitted ? 1 : 0)}; + visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; transition-delay: 0.55s; `; -const Arrow = styled.svg<ArrowProps>` +const Arrow = + styled.svg < + ArrowProps > + ` transform: ${props => props.isSubmitted && `translateX(44px)`}; transition: transform 0.25s ease-in-out; `; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index ee1cfb434..9c2c29446 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import styled from 'styled-components'; -import {Button} from 'ts/@next/components/button'; -import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; -import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout'; -import {Paragraph} from 'ts/@next/components/text'; +import { Button } from 'ts/@next/components/button'; +import { Icon, InlineIconWrap } from 'ts/@next/components/icon'; +import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; +import { Paragraph } from 'ts/@next/components/text'; interface FigureProps { value: string; @@ -20,20 +20,12 @@ export const SectionLandingAbout = () => ( <Icon name="descriptionBolt" size="small" /> </InlineIconWrap> - <Paragraph - size="large" - isCentered={true} - isMuted={1} - padding={['large', 0, 'default', 0]} - > - Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have never existed before. + <Paragraph size="large" isCentered={true} isMuted={1} padding={['large', 0, 'default', 0]}> + Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial + instruments to assets that could have never existed before. </Paragraph> - <Button - href="#" - isWithArrow={true} - isAccentColor={true} - > + <Button href="#" isWithArrow={true} isAccentColor={true}> Discover how developers use 0x </Button> @@ -46,32 +38,19 @@ export const SectionLandingAbout = () => ( /> <FlexWrap as="dl"> - <Figure - value="873,435" - description="Number of Transactions" - /> + <Figure value="166,976" description="Total Transactions" /> - <Figure - value="$203M" - description="Total Volume" - /> + <Figure value="$216M" description="Total Volume" /> - <Figure - value="227,372" - description="Number of Relayers" - /> + <Figure value="30+" description="Total Projects" /> </FlexWrap> </Section> ); const Figure = (props: FigureProps) => ( <Column padding="0 30px"> - <FigureValue> - {props.value} - </FigureValue> - <FigureDescription> - {props.description} - </FigureDescription> + <FigureValue>{props.value}</FigureValue> + <FigureDescription>{props.description}</FigureDescription> </Column> ); |