aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/button.tsx47
-rw-r--r--packages/website/ts/@next/components/definition.tsx37
-rw-r--r--packages/website/ts/@next/components/link.tsx1
-rw-r--r--packages/website/ts/@next/components/newsletter_form.tsx65
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx47
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>
);