crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

run prettier on website

Browse Source
This commit is contained in:
Steve Klebanoff
2018-12-18 13:24:53 -08:00
parent 59d7efa78a
commit 9bd71aeeff
32 changed files with 403 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/website/ts/@next/components/animatedChatIcon.tsx
View File

@@ -4,28 +4,69 @@ import styled, { keyframes } from 'styled-components';
export const AnimatedChatIcon = () => (
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask30" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
<circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3" />
</mask>
<g mask="url(#mask30)">
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />
<Rays>
<path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
<path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3" />
<path
vector-effect="non-scaling-stroke"
d="M37 73.5L37 12M113 137.5L113 75"
stroke="#00AE99"
stroke-width="3"
/>
<path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3" />
<path
vector-effect="non-scaling-stroke"
d="M49.087 47.5264L92.574 4.03932"
stroke="#00AE99"
stroke-width="3"
/>
<path
vector-effect="non-scaling-stroke"
d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335"
stroke="#00AE99"
stroke-width="3"
/>
<path
vector-effect="non-scaling-stroke"
d="M58.2793 145.814L101.766 102.327"
stroke="#00AE99"
stroke-width="3"
/>
</Rays>
<Bubble>
<path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
<path
vector-effect="non-scaling-stroke"
d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z"
stroke="#00AE99"
strokeWidth="3"
/>
</Bubble>
<Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={4.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={-4.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
<Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
<Dot
delay={4.4}
vector-effect="non-scaling-stroke"
cx="91"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
<Dot
delay={-4.6}
vector-effect="non-scaling-stroke"
cx="59"
cy="75"
r="4"
stroke="#00AE99"
strokeWidth="3"
/>
</g>
</svg>
);
@@ -57,6 +98,9 @@ const Rays = styled.g`
transform-origin: 50% 50%;
`;
const Dot = styled.circle<{ delay: number }>`
const Dot =
styled.circle <
{ delay: number } >
`
animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
`;

22
packages/website/ts/@next/components/animatedCompassIcon.tsx
View File

@@ -4,17 +4,21 @@ import styled, { keyframes } from 'styled-components';
export const AnimatedCompassIcon = () => (
<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
<circle cx="75" cy="75" r="58" stroke="#00AE99" stroke-width="3"/>
<Needle d="M62.9792 62.9792L36.6447 113.355L87.0208 87.0208M62.9792 62.9792L113.355 36.6447L87.0208 87.0208M62.9792 62.9792L87.0208 87.0208" stroke="#00AE99" strokeWidth="3"/>
<circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />
<circle cx="75" cy="75" r="58" stroke="#00AE99" stroke-width="3" />
<Needle
d="M62.9792 62.9792L36.6447 113.355L87.0208 87.0208M62.9792 62.9792L113.355 36.6447L87.0208 87.0208M62.9792 62.9792L87.0208 87.0208"
stroke="#00AE99"
strokeWidth="3"
/>
<Dial>
<path d="M75 2V17M75 133V148" stroke="#00AE99" stroke-width="3"/>
<path d="M2 75L17 75M133 75L148 75" stroke="#00AE99" stroke-width="3"/>
<path d="M11.7801 38.5L24.7705 46M125.229 104L138.22 111.5" stroke="#00AE99" stroke-width="3"/>
<path d="M38.5001 11.7801L46.0001 24.7705M104 125.229L111.5 138.22" stroke="#00AE99" stroke-width="3"/>
<path d="M111.5 11.7801L104 24.7705M46 125.229L38.5 138.22" stroke="#00AE99" stroke-width="3"/>
<path d="M138.22 38.5L125.229 46M24.7705 104L11.7801 111.5" stroke="#00AE99" stroke-width="3"/>
<path d="M75 2V17M75 133V148" stroke="#00AE99" stroke-width="3" />
<path d="M2 75L17 75M133 75L148 75" stroke="#00AE99" stroke-width="3" />
<path d="M11.7801 38.5L24.7705 46M125.229 104L138.22 111.5" stroke="#00AE99" stroke-width="3" />
<path d="M38.5001 11.7801L46.0001 24.7705M104 125.229L111.5 138.22" stroke="#00AE99" stroke-width="3" />
<path d="M111.5 11.7801L104 24.7705M46 125.229L38.5 138.22" stroke="#00AE99" stroke-width="3" />
<path d="M138.22 38.5L125.229 46M24.7705 104L11.7801 111.5" stroke="#00AE99" stroke-width="3" />
</Dial>
</g>
</svg>

40
packages/website/ts/@next/components/blockIconLink.tsx
View File

@@ -1,9 +1,9 @@
import * as React from 'react';
import {withRouter} from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import {Button} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/icon';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
interface Props {
icon?: string;
@@ -16,48 +16,26 @@ interface Props {
class BaseComponent extends React.PureComponent<Props> {
public onClick = (): void => {
const {
linkAction,
linkUrl,
} = this.props;
const { linkAction, linkUrl } = this.props;
if (linkAction) {
linkAction();
} else {
this.props.history.push(linkUrl);
}
}
};
public render(): React.ReactNode {
const {
icon,
iconComponent,
linkUrl,
linkAction,
title,
linkLabel,
} = this.props;
const { icon, iconComponent, linkUrl, linkAction, title, linkLabel } = this.props;
return (
<Wrap onClick={this.onClick}>
<div>
<Icon
name={icon}
component={iconComponent}
size="large"
margin={[0, 0, 'default', 0]}
/>
<Icon name={icon} component={iconComponent} size="large" margin={[0, 0, 'default', 0]} />
<Title>
{title}
</Title>
<Title>{title}</Title>
<Button
isWithArrow={true}
isTransparent={true}
href={linkUrl}
onClick={linkAction}
>
<Button isWithArrow={true} isTransparent={true} href={linkUrl} onClick={linkAction}>
{linkLabel}
</Button>
</div>

4
packages/website/ts/@next/components/button.tsx
View File

@@ -74,7 +74,9 @@ const ButtonBase =
transition: background-color 0.35s, border-color 0.35s;
// @todo Refactor to use theme props
${props => props.bgColor === 'dark' && `
${props =>
props.bgColor === 'dark' &&
`
background-color: ${colors.brandDark};
color: ${colors.white};
`}

4
packages/website/ts/@next/components/definition.tsx
View File

@@ -41,7 +41,9 @@ export const Definition = (props: Props) => (
</Heading>
{typeof props.description === 'string' ? (
<Paragraph isMuted={true} size={props.fontSize || 'default'}>{props.description}</Paragraph>
<Paragraph isMuted={true} size={props.fontSize || 'default'}>
{props.description}
</Paragraph>
) : (
<>{props.description}</>
)}

9
packages/website/ts/@next/components/hamburger.tsx
View File

@@ -16,7 +16,10 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
);
};
const StyledHamburger = styled.button<Props>`
const StyledHamburger =
styled.button <
Props >
`
background: none;
border: 0;
width: 22px;
@@ -50,7 +53,9 @@ const StyledHamburger = styled.button<Props>`
//transform-origin: 0% 100%;
}
${props => props.isOpen && `
${props =>
props.isOpen &&
`
opacity: 1;
transform: rotate(45deg) translate(0, 1px);

47
packages/website/ts/@next/components/heroAnimation.tsx
View File

File diff suppressed because one or more lines are too long

6
packages/website/ts/@next/components/heroImage.tsx
View File

@@ -5,11 +5,7 @@ interface Props {
image: React.ReactNode;
}
export const LandingAnimation = (props: Props) => (
<Wrap>
{props.image}
</Wrap>
);
export const LandingAnimation = (props: Props) => <Wrap>{props.image}</Wrap>;
const Wrap = styled.figure`
display: inline-block;

22
packages/website/ts/@next/components/icon.tsx
View File

@@ -2,8 +2,8 @@ import * as React from 'react';
import Loadable from 'react-loadable';
import styled from 'styled-components';
import {Paragraph} from 'ts/@next/components/text';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
import { Paragraph } from 'ts/@next/components/text';
import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface IconProps extends PaddingInterface {
name?: string;
@@ -14,7 +14,7 @@ interface IconProps extends PaddingInterface {
export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
if (props.name && !props.component) {
const IconSVG = Loadable({
loader: async () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
loader: async () => import(/* webpackChunkName: "icon" */ `ts/@next/icons/illustrations/${props.name}.svg`),
loading: () => <Paragraph>Loading</Paragraph>,
});
@@ -26,17 +26,16 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
}
if (props.component) {
return (
<StyledIcon {...props}>
{props.component}
</StyledIcon>
);
return <StyledIcon {...props}>{props.component}</StyledIcon>;
}
return null;
};
export const InlineIconWrap = styled.div<PaddingInterface>`
export const InlineIconWrap =
styled.div <
PaddingInterface >
`
margin: ${props => getCSSPadding(props.margin)};
display: flex;
align-items: center;
@@ -55,7 +54,10 @@ const _getSize = (size: string | number = 'small'): string => {
return `${size}px`;
};
const StyledIcon = styled.figure<IconProps>`
const StyledIcon =
styled.figure <
IconProps >
`
width: ${props => _getSize(props.size)};
height: ${props => _getSize(props.size)};
margin: ${props => getCSSPadding(props.margin)};

9
packages/website/ts/@next/components/image.tsx
View File

@@ -9,11 +9,12 @@ interface Props {
}
const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
return (
<img {...props} />
);
return <img {...props} />;
};
export const Image = styled(ImageClass)<Props>`
export const Image =
styled(ImageClass) <
Props >
`
margin: ${props => props.isCentered && `0 auto`};
`;

39
packages/website/ts/@next/components/layout.tsx
View File

@@ -1,5 +1,5 @@
import styled from 'styled-components';
import {getCSSPadding, PADDING_SIZES, PaddingInterface} from 'ts/@next/constants/utilities';
import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -51,8 +51,8 @@ export interface WrapStickyInterface {
const _getColumnWidth = (args: GetColWidthArgs): string => {
const { span = 1, columns } = args;
const percentWidth = (span / columns) * 100;
const gutterDiff = (GUTTER * (columns - 1)) / columns;
const percentWidth = span / columns * 100;
const gutterDiff = GUTTER * (columns - 1) / columns;
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
@@ -87,8 +87,11 @@ export const Main = styled.main`
// passing a asElement (same patter nas Heading) so we dont have to
// make a const on every route to withComponent-size it.
// just <Section asElement?="div/section/footer/header/whatever" /> ?
export const Section = styled.section<SectionProps>`
width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
export const Section =
styled.section <
SectionProps >
`
width: ${props => (props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%')};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large}` : PADDING_SIZES.default)};
background-color: ${props => props.bgColor};
position: ${props => props.isRelative && 'relative'};
@@ -102,11 +105,15 @@ export const Section = styled.section<SectionProps>`
@media (max-width: ${BREAKPOINTS.mobile}) {
margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`};
padding: ${props => props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
padding: ${props =>
props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default};
}
`;
const WrapBase = styled.div<WrapProps>`
const WrapBase =
styled.div <
WrapProps >
`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
padding: ${props => props.padding && getCSSPadding(props.padding)};
background-color: ${props => props.bgColor};
@@ -130,7 +137,10 @@ export const WrapCentered = styled(WrapBase)`
text-align: center;
`;
export const WrapSticky = styled.div<WrapStickyInterface>`
export const WrapSticky =
styled.div <
WrapStickyInterface >
`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
@@ -138,16 +148,21 @@ export const WrapSticky = styled.div<WrapStickyInterface>`
export const WrapGrid = styled(WrapBase)`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
`;
export const Column = styled.div<ColumnProps>`
export const Column =
styled.div <
ColumnProps >
`
background-color: ${props => props.bgColor};
flex-grow: ${props => props.isFlexGrow && 1};
@media (min-width: ${BREAKPOINTS.mobile}) {
padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
padding: ${props =>
!props.isNoPadding &&
(props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)};
width: ${props => (props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%')};
}
@media (max-width: ${BREAKPOINTS.mobile}) {

5
packages/website/ts/@next/components/logo.tsx
View File

@@ -23,7 +23,10 @@ const StyledLogo = styled.div`
}
`;
const Icon = styled(LogoIcon)<LogoInterface>`
const Icon =
styled(LogoIcon) <
LogoInterface >
`
flex-shrink: 0;
path {

13
packages/website/ts/@next/components/modals/input.tsx
View File

@@ -47,7 +47,7 @@ Input.defaultProps = {
const StyledInput = styled.input`
appearance: none;
background-color: #fff;
border: 1px solid #D5D5D5;
border: 1px solid #d5d5d5;
color: #000;
font-size: 1.294117647rem;
padding: 16px 15px 14px;
@@ -59,11 +59,14 @@ const StyledInput = styled.input`
border-color: ${(props: InputProps) => props.isErrors && `#FD0000`};
&::placeholder {
color: #C3C3C3;
color: #c3c3c3;
}
`;
const InputWrapper = styled.div<InputProps>`
const InputWrapper =
styled.div <
InputProps >
`
position: relative;
flex-grow: ${props => props.width === InputWidth.Full && 1};
width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
@@ -83,8 +86,8 @@ const Label = styled.label`
`;
const Error = styled.span`
color: #FD0000;
font-size: .833333333rem;
color: #fd0000;
font-size: 0.833333333rem;
line-height: 1em;
display: inline-block;
position: absolute;

36
packages/website/ts/@next/components/newLayout.tsx
View File

@@ -49,14 +49,15 @@ export interface ColumnProps {
export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
return (
<SectionBase {...props}>
<Wrap {...props}>
{props.children}
</Wrap>
<Wrap {...props}>{props.children}</Wrap>
</SectionBase>
);
};
export const Column = styled.div<ColumnProps>`
export const Column =
styled.div <
ColumnProps >
`
width: ${props => props.width};
max-width: ${props => props.maxWidth};
padding: ${props => props.padding};
@@ -70,7 +71,10 @@ export const Column = styled.div<ColumnProps>`
}
`;
export const FlexWrap = styled.div<FlexProps>`
export const FlexWrap =
styled.div <
FlexProps >
`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@@ -81,12 +85,18 @@ export const FlexWrap = styled.div<FlexProps>`
}
`;
export const WrapSticky = styled.div<WrapProps>`
export const WrapSticky =
styled.div <
WrapProps >
`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
const SectionBase = styled.section<SectionProps>`
const SectionBase =
styled.section <
SectionProps >
`
width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
max-width: 1500px;
margin: 0 auto;
@@ -100,7 +110,10 @@ const SectionBase = styled.section<SectionProps>`
}
`;
const Wrap = styled(FlexWrap)<WrapProps>`
const Wrap =
styled(FlexWrap) <
WrapProps >
`
width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
width: ${props => props.bgColor && 'calc(100% - 60px)'};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
@@ -108,10 +121,13 @@ const Wrap = styled(FlexWrap)<WrapProps>`
margin: 0 auto;
`;
export const WrapGrid = styled(Wrap)<WrapProps>`
export const WrapGrid =
styled(Wrap) <
WrapProps >
`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => props.isCentered ? `center` : 'space-between'};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
@media (max-width: 768px) {
width: 100%;

10
packages/website/ts/@next/components/sections/landing/about.tsx
View File

@@ -57,11 +57,11 @@ const Figure = (props: FigureProps) => (
);
const DeveloperLink = styled(Button)`
@media (max-width: 500px) {
&& {
white-space: pre-wrap;
line-height: 1.3;
}
@media (max-width: 500px) {
&& {
white-space: pre-wrap;
line-height: 1.3;
}
}
`;

18
packages/website/ts/@next/components/sections/landing/clients.tsx
View File

@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import {Heading} from 'ts/@next/components/text';
import { Heading } from 'ts/@next/components/text';
import {Section, WrapGrid} from 'ts/@next/components/newLayout';
import { Section, WrapGrid } from 'ts/@next/components/newLayout';
interface ProjectLogo {
name: string;
@@ -58,16 +58,11 @@ const projects: ProjectLogo[] = [
export const SectionLandingClients = () => (
<Section isTextCentered={true}>
<Heading size="small">
Join the growing number of projects developing on 0x
</Heading>
<Heading size="small">Join the growing number of projects developing on 0x</Heading>
<WrapGrid isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
<StyledProject
key={`client-${index}`}
isOnMobile={item.persistOnMobile}
>
<StyledProject key={`client-${index}`} isOnMobile={item.persistOnMobile}>
<img src={item.imageUrl} alt={item.name} />
</StyledProject>
))}
@@ -75,7 +70,10 @@ export const SectionLandingClients = () => (
</Section>
);
const StyledProject = styled.div<StyledProjectInterface>`
const StyledProject =
styled.div <
StyledProjectInterface >
`
flex-shrink: 0;
img {

8
packages/website/ts/@next/components/sections/landing/hero.tsx
View File

@@ -1,10 +1,10 @@
import * as React from 'react';
import {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
import {LandingAnimation} from 'ts/@next/components/heroImage';
import { Button } from 'ts/@next/components/button';
import { Hero } from 'ts/@next/components/hero';
import { LandingAnimation } from 'ts/@next/components/heroImage';
import {HeroAnimation} from 'ts/@next/components/heroAnimation';
import { HeroAnimation } from 'ts/@next/components/heroAnimation';
import { WebsitePaths } from 'ts/types';
export const SectionLandingHero = () => (

2
packages/website/ts/@next/components/separator.tsx
View File

@@ -1,7 +1,7 @@
import styled from 'styled-components';
export const Separator = styled.hr`
background: #EAEAEA;
background: #eaeaea;
height: 1px;
border: 0;
`;

23
packages/website/ts/@next/components/siteWrap.tsx
View File

@@ -115,13 +115,10 @@ export class SiteWrap extends React.Component<Props, State> {
this.setState({
isMobileNavOpen: !this.state.isMobileNavOpen,
});
}
};
public render(): React.ReactNode {
const {
children,
theme = 'dark',
} = this.props;
const { children, theme = 'dark' } = this.props;
const { isMobileNavOpen } = this.state;
const currentTheme = GLOBAL_THEMES[theme];
@@ -131,16 +128,11 @@ export class SiteWrap extends React.Component<Props, State> {
<>
<GlobalStyles />
<Header
isNavToggled={isMobileNavOpen}
toggleMobileNav={this.toggleMobileNav}
/>
<Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
<Main isNavToggled={isMobileNavOpen}>
{children}
</Main>
<Main isNavToggled={isMobileNavOpen}>{children}</Main>
<Footer/>
<Footer />
</>
</ThemeProvider>
</>
@@ -148,7 +140,10 @@ export class SiteWrap extends React.Component<Props, State> {
}
}
const Main = styled.main<MainProps>`
const Main =
styled.main <
MainProps >
`
transition: transform 0.5s, opacity 0.5s;
opacity: ${props => props.isNavToggled && '0.5'};
`;

14
packages/website/ts/@next/components/slider/slider.tsx
View File

@@ -7,8 +7,7 @@ import { colors } from 'ts/style/colors';
import { Icon } from 'ts/@next/components/icon';
import { Heading, Paragraph } from 'ts/@next/components/text';
interface SliderProps {
}
interface SliderProps {}
interface SlideProps {
icon: string;
@@ -20,7 +19,8 @@ interface SlideProps {
const flickityOptions = {
initialIndex: 0,
cellAlign: 'left',
arrowShape: 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z',
arrowShape:
'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z',
prevNextButtons: true,
};
@@ -33,7 +33,9 @@ export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) =
<Icon name={icon} size="large" />
</SlideHead>
<SlideContent>
<Heading asElement="h4" size="small" marginBottom="15px">{heading}</Heading>
<Heading asElement="h4" size="small" marginBottom="15px">
{heading}
</Heading>
<Paragraph isMuted={true}>{text}</Paragraph>
</SlideContent>
</StyledSlide>
@@ -93,7 +95,7 @@ const StyledSlider = styled.div`
top: calc(50% - 37px);
border: 0;
padding: 0;
transition: background-color .40s ease-in-out, visibility .40s ease-in-out, opacity .40s ease-in-out;
transition: background-color 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out;
&:disabled {
opacity: 0;
@@ -130,7 +132,7 @@ const StyledSlide = styled.div`
height: 520px;
flex: 0 0 auto;
opacity: 0.3;
transition: opacity .40s ease-in-out;
transition: opacity 0.4s ease-in-out;
& + & {
margin-left: 30px;

38
packages/website/ts/@next/components/text.tsx
View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface BaseTextInterface extends PaddingInterface {
size?: 'default' | 'medium' | 'large' | 'small' | number;
@@ -9,7 +9,7 @@ interface BaseTextInterface extends PaddingInterface {
}
interface HeadingProps extends BaseTextInterface {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
asElement?: 'h1' | 'h2' | 'h3' | 'h4';
maxWidth?: string;
fontWeight?: string;
isCentered?: boolean;
@@ -27,38 +27,33 @@ interface ParagraphProps extends BaseTextInterface {
fontWeight?: string | number;
}
const StyledHeading = styled.h1<HeadingProps>`
const StyledHeading =
styled.h1 <
HeadingProps >
`
max-width: ${props => props.maxWidth};
color: ${props => props.color || props.theme.textColor};
display: ${props => props.isFlex && `inline-flex`};
align-items: center;
justify-content: ${props => props.isFlex && `space-between`};
font-size: ${props => typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
font-size: ${props =>
typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
text-align: ${props => props.isCentered && 'center'};
padding: ${props => props.padding && getCSSPadding(props.padding)};
margin-left: ${props => props.isCentered && 'auto'};
margin-right: ${props => props.isCentered && 'auto'};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
font-weight: ${props => props.fontWeight ? props.fontWeight : (['h4'].includes(props.asElement) ? 400 : 300)};
opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)};
font-weight: ${props => (props.fontWeight ? props.fontWeight : ['h4'].includes(props.asElement) ? 400 : 300)};
width: ${props => props.isFlex && `100%`};
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {
const {
asElement = 'h1',
children,
} = props;
const { asElement = 'h1', children } = props;
const Component = StyledHeading.withComponent(asElement);
return (
<Component
{...props}
>
{children}
</Component>
);
return <Component {...props}>{children}</Component>;
};
Heading.defaultProps = {
@@ -69,14 +64,17 @@ Heading.defaultProps = {
// Note: this would be useful to be implemented the same way was "Heading"
// and be more generic. e.g. <Text /> with a props asElement so we can use it
// for literally anything =
export const Paragraph = styled.p<ParagraphProps>`
export const Paragraph =
styled.p <
ParagraphProps >
`
font-size: ${props => `var(--${props.size || 'default'}Paragraph)`};
font-weight: ${props => props.fontWeight || 300};
margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
padding: ${props => props.padding && getCSSPadding(props.padding)};
color: ${props => props.color || props.theme.paragraphColor};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
text-align: ${props => props.textAlign ? props.textAlign : props.isCentered && 'center'};
opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)};
text-align: ${props => (props.textAlign ? props.textAlign : props.isCentered && 'center')};
line-height: 1.4;
`;

12
packages/website/ts/@next/constants/globalStyle.tsx
View File

@@ -1,5 +1,5 @@
import {createGlobalStyle, withTheme} from 'styled-components';
import {cssReset} from 'ts/@next/constants/cssReset';
import { createGlobalStyle, withTheme } from 'styled-components';
import { cssReset } from 'ts/@next/constants/cssReset';
export interface GlobalStyle {
theme: {
@@ -10,7 +10,10 @@ export interface GlobalStyle {
};
}
const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
const GlobalStyles = withTheme(
createGlobalStyle <
GlobalStyle >
`
${cssReset};
html {
@@ -100,6 +103,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
img + p {
padding-top: 30px;
}
`);
`,
);
export { GlobalStyles };

6
packages/website/ts/@next/constants/utilities.tsx
View File

@@ -8,9 +8,9 @@ interface PaddingSizes {
}
export const PADDING_SIZES: PaddingSizes = {
'default': '30px',
'large': '60px',
'small': '15px',
default: '30px',
large: '60px',
small: '15px',
};
export const getCSSPadding = (value: number | Array<string | number> = 0): string => {

61
packages/website/ts/@next/pages/community.tsx
View File

@@ -98,14 +98,12 @@ export class NextCommunity extends React.Component {
Community
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community.
The 0x community is a global, passionate group of crypto developers and enthusiasts. The
official channels below provide a great forum for connecting and engaging with the
community.
</Paragraph>
<LinkWrap>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Join the 0x community
</Button>
</LinkWrap>
@@ -113,7 +111,13 @@ export class NextCommunity extends React.Component {
</Section>
<Section isFullWidth={true}>
<WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1151px">
<WrapGrid
isTextCentered={true}
isWrapped={true}
isFullWidth={false}
isCentered={false}
maxWidth="1151px"
>
{_.map(communityLinks, (link: CommunityLinkProps, index: number) => (
<CommunityLink
key={`cl-${index}`}
@@ -126,32 +130,37 @@ export class NextCommunity extends React.Component {
</WrapGrid>
</Section>
<EventsWrapper bgColor={colors.backgroundLight} isFullWidth={true} isCentered={true} isTextCentered={true}>
<EventsWrapper
bgColor={colors.backgroundLight}
isFullWidth={true}
isCentered={true}
isTextCentered={true}
>
<Column maxWidth="720px">
<Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px">
Upcoming Events
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>
0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events.
0x meetups happen all over the world on a monthly basis and are hosted by devoted members of
the community. Want to host a meetup in your city? Reach out for help finding a venue,
connecting with local 0x mentors, and promoting your events.
</Paragraph>
<LinkWrap>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Get in Touch
</Button>
<Button
to="#"
isWithArrow={true}
isAccentColor={true}
>
<Button to="#" isWithArrow={true} isAccentColor={true}>
Join Newsletter
</Button>
</LinkWrap>
</Column>
<WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1149px">
<WrapGrid
isTextCentered={true}
isWrapped={true}
isFullWidth={false}
isCentered={false}
maxWidth="1149px"
>
{_.map(events, (ev: EventProps, index: number) => (
<Event
key={`event-${index}`}
@@ -177,17 +186,17 @@ export class NextCommunity extends React.Component {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
<StyledEvent>
<EventIcon name="logo-mark" size={30} margin={0} />
<EventImage src={event.imageUrl} alt=""/>
<EventImage src={event.imageUrl} alt="" />
<EventContent>
<Heading color={colors.white} size="small" marginBottom="0">
{event.title}
@@ -195,11 +204,7 @@ const Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
<Paragraph color={colors.white} isMuted={0.65}>
{event.date}
</Paragraph>
<Button
color={colors.white}
href={event.signupUrl}
isWithArrow={true}
>
<Button color={colors.white} href={event.signupUrl} isWithArrow={true}>
Sign Up
</Button>
</EventContent>

6
packages/website/ts/@next/pages/instant/code_demo.tsx
View File

@@ -22,7 +22,7 @@ const CustomPre = styled.pre`
border: none;
}
code:first-of-type {
background-color: #060D0D !important;
background-color: #060d0d !important;
color: #999;
min-height: 100%;
text-align: center;
@@ -161,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
<Container position="relative" height="100%">
<Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
<CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
<StyledButton>
{copyButtonText}
</StyledButton>
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
</Container>
<SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>

6
packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
View File

@@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component<
const hasError = !_.isEmpty(errMsg);
return (
<Container height="80px">
<Input
value={this.props.value}
onChange={this._handleChange}
placeholder="0xe99...aa8da4"
/>
<Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
<Container marginTop="5px" isHidden={!hasError} height="25px">
<Paragraph size="small" isNoMargin={true}>
{errMsg}

2
packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx
View File

@@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)`
top: 7px;
&:after {
border: solid transparent;
content: " ";
content: ' ';
height: 0;
width: 0;
position: absolute;

16
packages/website/ts/@next/pages/landing.tsx
View File

@@ -1,10 +1,10 @@
import * as React from 'react';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients';
import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about';
import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients';
import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta';
import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero';
import { ModalContact } from 'ts/@next/components/modals/modal_contact';
@@ -21,7 +21,7 @@ export class NextLanding extends React.Component<Props> {
isContactModalOpen: false,
};
public render(): React.ReactNode {
return (
return (
<SiteWrap theme="dark">
<SectionLandingHero />
<SectionLandingAbout />
@@ -34,9 +34,9 @@ export class NextLanding extends React.Component<Props> {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}

42
packages/website/ts/@next/pages/market_maker.tsx
View File

@@ -11,7 +11,7 @@ import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { ModalContact } from 'ts/@next/components/modals/modal_contact';
import {Section} from 'ts/@next/components/newLayout';
import { Section } from 'ts/@next/components/newLayout';
import { WebsitePaths } from 'ts/types';
@@ -19,7 +19,8 @@ const offersData = [
{
icon: 'supportForAllEthereumStandards',
title: 'Comprehensive Tutorials',
description: 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.',
description:
'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.',
},
{
icon: 'generateRevenueForYourBusiness-large',
@@ -34,7 +35,8 @@ const offersData = [
{
icon: 'getInTouch',
title: 'Personalized Support',
description: 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.',
description:
'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.',
},
];
@@ -53,14 +55,10 @@ export class NextMarketMaker extends React.Component {
isCenteredMobile={false}
title="Bring liquidity to the exchanges of the future"
description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs bring liquidity to the 0x network. The program includes tutorials, a robust data platform, trade compensation, and 1:1 support from our MM Success Manager."
actions={<HeroActions/>}
actions={<HeroActions />}
/>
<Section
bgColor="light"
isFlex={true}
maxWidth="1170px"
>
<Section bgColor="light" isFlex={true} maxWidth="1170px">
<Definition
title="Secure"
titleSize="small"
@@ -90,17 +88,17 @@ export class NextMarketMaker extends React.Component {
</Section>
<Section>
{_.map(offersData, (item, index) => (
<Definition
key={`offers-${index}`}
icon={item.icon}
title={item.title}
description={item.description}
isInlineIcon={true}
iconSize={240}
fontSize="medium"
/>
))}
{_.map(offersData, (item, index) => (
<Definition
key={`offers-${index}`}
icon={item.icon}
title={item.title}
description={item.description}
isInlineIcon={true}
iconSize={240}
fontSize="medium"
/>
))}
</Section>
<Banner
@@ -116,11 +114,11 @@ export class NextMarketMaker extends React.Component {
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
const HeroActions = () => (

100
packages/website/ts/@next/pages/why.tsx
View File

@@ -4,12 +4,12 @@ import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
import styled from 'styled-components';
import {Hero} from 'ts/@next/components/hero';
import { Hero } from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
import {Definition} from 'ts/@next/components/definition';
import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
import { Definition } from 'ts/@next/components/definition';
import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
@@ -48,7 +48,8 @@ const functionalityData = [
{
icon: 'buildBusiness',
title: 'Build a Business',
description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.',
description:
'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.',
},
];
@@ -56,27 +57,32 @@ const useCaseSlides = [
{
icon: 'gamingAndCollectibles',
title: 'Games & Collectibles',
description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.',
description:
'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.',
},
{
icon: 'predictionMarkets',
title: 'Prediction Markets',
description: 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.',
description:
'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.',
},
{
icon: 'orderBooks',
title: 'Order Books',
description: 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.',
description:
'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.',
},
{
icon: 'decentralisedLoans',
title: 'Decentralized Loans',
description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.',
description:
'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.',
},
{
icon: 'stableTokens',
title: 'Stable Tokens',
description: 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.',
description:
'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.',
},
];
@@ -93,21 +99,13 @@ export class NextWhy extends React.Component {
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 infrastracture that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens."
actions={
<Button
href="/docs"
isWithArrow={true}
isAccentColor={true}
>
Build on 0x
<Button href="/docs" isWithArrow={true} isAccentColor={true}>
Build on 0x
</Button>
}
/>
<Section
bgColor="dark"
isFlex={true}
maxWidth="1170px"
>
<Section bgColor="dark" isFlex={true} maxWidth="1170px">
<Definition
title="Support for all Ethereum Standards"
titleSize="small"
@@ -136,20 +134,22 @@ export class NextWhy extends React.Component {
/>
</Section>
<Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink href="#benefits">Benefits</ChapterLink>
<ChapterLink href="#cases">Use Cases</ChapterLink>
<ChapterLink href="#functionality">Features</ChapterLink>
</NavStickyWrap>
</Column>
<Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
<Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink href="#benefits">Benefits</ChapterLink>
<ChapterLink href="#cases">Use Cases</ChapterLink>
<ChapterLink href="#functionality">Features</ChapterLink>
</NavStickyWrap>
</Column>
<Column width="55%" maxWidth="826px">
<Column width="100%" maxWidth="560px" padding="0 30px 0 0">
<ScrollableAnchor id="benefits">
<SectionWrap>
<SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle>
<SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>
What 0x offers
</SectionTitle>
{_.map(offersData, (item, index) => (
<Definition
@@ -166,7 +166,9 @@ export class NextWhy extends React.Component {
<ScrollableAnchor id="cases">
<SectionWrap isNotRelative={true}>
<SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle>
<SectionTitle size="medium" marginBottom="60px">
Use Cases
</SectionTitle>
<Slider>
{_.map(useCaseSlides, (item, index) => (
<Slide
@@ -182,7 +184,9 @@ export class NextWhy extends React.Component {
<ScrollableAnchor id="functionality">
<SectionWrap>
<SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle>
<SectionTitle size="medium" marginBottom="60px">
Exchange Functionality
</SectionTitle>
{_.map(functionalityData, (item, index) => (
<Definition
@@ -198,33 +202,36 @@ export class NextWhy extends React.Component {
</ScrollableAnchor>
</Column>
</Column>
</Section>
</Section>
<Banner
heading="Ready to get started?"
subline="Dive into our docs, or contact us if needed"
mainCta={{ text: 'Get Started', href: '/docs' }}
secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
/>
<ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
<Banner
heading="Ready to get started?"
subline="Dive into our docs, or contact us if needed"
mainCta={{ text: 'Get Started', href: '/docs' }}
secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
/>
<ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
</SiteWrap>
);
}
public _onOpenContactModal = (): void => {
this.setState({ isContactModalOpen: true });
}
};
public _onDismissContactModal = (): void => {
this.setState({ isContactModalOpen: false });
}
};
}
interface SectionProps {
isNotRelative?: boolean;
}
const SectionWrap = styled.div<SectionProps>`
const SectionWrap =
styled.div <
SectionProps >
`
position: ${props => !props.isNotRelative && 'relative'};
& + & {
@@ -247,10 +254,15 @@ const SectionWrap = styled.div<SectionProps>`
}
`;
const SectionTitle = styled(Heading)<{ isNoBorder?: boolean }>`
const SectionTitle =
styled(Heading) <
{ isNoBorder: boolean } >
`
position: relative;
${props => !props.isNoBorder && `
${props =>
!props.isNoBorder &&
`
&:before {
content: '';
width: 100vw;

4
packages/website/ts/globals.d.ts vendored
View File

@@ -8,7 +8,7 @@ declare module 'react-flickity-component';
declare module 'react-anchor-link-smooth-scroll';
declare module 'react-responsive';
declare module 'react-scrollable-anchor';
declare module 'react-headroom'
declare module 'react-headroom';
declare module '*.json' {
const json: any;
@@ -20,7 +20,7 @@ declare module '*.json' {
declare module '*.svg' {
//const svg: any;
//export default svg;
import {PureComponent, SVGProps} from "react";
import { PureComponent, SVGProps } from 'react';
export default class extends PureComponent<SVGProps<SVGSVGElement>> {}
}

5
packages/website/tsconfig.json
View File

@@ -23,10 +23,7 @@
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"errorsAsWarnings": true,
"reportFiles": [
"./ts/**/*"
]
"reportFiles": ["./ts/**/*"]
},
"include": ["./ts/**/*"]
}