From ddf3bb7c0446f2d85b6fa55cbe0b00b227f08af7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 12 Dec 2018 17:26:54 -0800 Subject: Add Python SRA client to Developer home --- packages/website/ts/pages/documentation/docs_home.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index f68d2892f..acd17dd06 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -91,6 +91,15 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { shouldOpenInNewTab: true, }, }, + { + description: + 'A Python Standard Relayer API client', + link: { + title: '0x-sra-client.py', + to: 'https://pypi.org/project/0x-sra-client/', + shouldOpenInNewTab: true, + }, + }, { description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', -- cgit v1.2.3 From ae27695d25301fe7cc34e22bddd3fedfdd8d81a2 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:03:40 +0100 Subject: Prevent overflow on instant page --- packages/website/ts/@next/pages/instant.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index a2df3ffc6..94633116f 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -204,6 +204,12 @@ const MarqueeWrap = styled.div` height: 514px; padding-bottom: 60px; + @media (max-width: 768px) { + width: calc(100% + 60px); + margin-left: -30px; + overflow: hidden; + } + > div { height: auto; display: flex; -- cgit v1.2.3 From 630ecb98e17c6cce795e368ebfe8af5ffb4a2266 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:04:44 +0100 Subject: Mobile tweaks --- packages/website/ts/@next/components/hero.tsx | 15 +++++++++++++++ .../ts/@next/components/sections/landing/about.tsx | 16 +++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 46e2ca6d9..6a781f923 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -117,4 +117,19 @@ const ButtonWrap = styled.div` > *:nth-child(2) { ${addFadeInAnimation('0.6s', '0.4s')} } + + @media (max-width: 500px) { + flex-direction: column; + justify-content: center; + + * { + padding-left: 20px; + padding-right: 20px; + } + + * + * { + margin-left: 0; + margin-top: 12px; + } + } `; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index bf2577581..87a0fe562 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -26,13 +26,14 @@ export const SectionLandingAbout = () => ( instruments to assets that could have never existed before. - +
( ); +const DeveloperLink = styled(Button)` + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } + } +`; + const FigureValue = styled.dt` font-size: 50px; font-weight: 300; -- cgit v1.2.3 From ffa57c37032f414f65d37e25a03b51347ae956c2 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:05:10 +0100 Subject: Tweak market maker --- packages/website/ts/@next/components/banner.tsx | 2 +- packages/website/ts/@next/components/button.tsx | 6 +++++ .../website/ts/@next/components/definition.tsx | 6 ++++- packages/website/ts/@next/components/hero.tsx | 14 +++++++--- packages/website/ts/@next/components/siteWrap.tsx | 7 ++++- .../ts/@next/icons/illustrations/low-cost.svg | 30 ++++++++++++++++++++++ packages/website/ts/@next/pages/market_maker.tsx | 18 ++++++++----- 7 files changed, 69 insertions(+), 14 deletions(-) create mode 100644 packages/website/ts/@next/icons/illustrations/low-cost.svg (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 982e764af..6c4d94dc5 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -31,7 +31,7 @@ interface BorderProps { export const Banner: React.StatelessComponent = (props: Props) => { const { heading, subline, mainCta, secondaryCta } = props; return ( - + diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index b686b27a2..fdf396ef0 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -73,6 +73,12 @@ const ButtonBase = outline: none; transition: background-color 0.35s, border-color 0.35s; + // @todo Refactor to use theme props + ${props => props.bgColor === 'dark' && ` + background-color: ${colors.brandDark}; + color: ${colors.white}; + `} + svg { margin-left: 9px; transition: transform 0.5s; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index d203151b9..965466f60 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -19,6 +19,7 @@ interface Props { isWithMargin?: boolean; icon: string; iconSize?: 'medium' | 'large' | number; + fontSize?: 'default' | 'medium' | number; title: string; titleSize?: 'small' | 'default' | number; description: React.ReactNode | string; @@ -40,7 +41,7 @@ export const Definition = (props: Props) => ( {typeof props.description === 'string' ? ( - {props.description} + {props.description} ) : ( <>{props.description} )} @@ -107,6 +108,9 @@ const TextWrap = } li { + color: ${props => props.theme.paragraphColor}; + font-size: ${props => `var(--${props.fontSize || 'default'}Paragraph)`}; + font-weight: 300; list-style: disc; opacity: 0.75; line-height: 1.444444444; diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 6a781f923..290c57bcb 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -5,6 +5,8 @@ import {addFadeInAnimation} from 'ts/@next/constants/animations'; interface Props { title: string; + maxWidth?: string; + maxWidthHeading?: string; isLargeTitle?: boolean; isFullWidth?: boolean; description: string; @@ -21,8 +23,8 @@ export const Hero = (props: Props) => ( } - - + <Content width={props.maxWidth ? props.maxWidth : (props.figure ? '546px' : '678px')}> + <Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}> {props.title} @@ -66,11 +68,14 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` } `; -const Title = styled.h1<{ isLarge?: any }>` +const Title = styled.h1<{ isLarge?: any; maxWidth?: string }>` font-size: ${props => props.isLarge ? '80px' : '50px'}; font-weight: 300; line-height: 1.1; + margin-left: auto; + margin-right: auto; margin-bottom: 30px; + max-width: ${props => props.maxWidth}; ${addFadeInAnimation('0.5s')} @media (max-width: 1024px) { @@ -85,9 +90,10 @@ const Title = styled.h1<{ isLarge?: any }>` const Description = styled.p` font-size: 22px; line-height: 31px; + font-weight: 300; padding: 0; margin-bottom: 50px; - color: rgba(255, 255, 255, 0.75); + color: ${props => props.theme.introTextColor}; ${addFadeInAnimation('0.5s', '0.15s')} @media (max-width: 1024px) { diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index ad7691885..db91fe08a 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -24,6 +24,7 @@ export interface ThemeValuesInterface { bgColor: string; darkBgColor?: string; lightBgColor: string; + introTextColor: string; textColor: string; paragraphColor: string; linkColor: string; @@ -48,6 +49,7 @@ const GLOBAL_THEMES: ThemeInterface = { bgColor: '#000000', darkBgColor: '#111A19', lightBgColor: '#003831', + introTextColor: 'rgba(255, 255, 255, 0.75)', textColor: '#FFFFFF', paragraphColor: '#FFFFFF', linkColor: colors.brandLight, @@ -63,7 +65,9 @@ const GLOBAL_THEMES: ThemeInterface = { }, light: { bgColor: '#FFFFFF', - lightBgColor: '#003831', + lightBgColor: '#F3F6F4', + darkBgColor: '#003831', + introTextColor: 'rgba(92, 92, 92, 0.87)', textColor: '#000000', paragraphColor: '#474747', linkColor: colors.brandDark, @@ -81,6 +85,7 @@ const GLOBAL_THEMES: ThemeInterface = { gray: { bgColor: '#e0e0e0', lightBgColor: '#003831', + introTextColor: 'rgba(92, 92, 92, 0.87)', textColor: '#000000', paragraphColor: '#777777', linkColor: colors.brandDark, diff --git a/packages/website/ts/@next/icons/illustrations/low-cost.svg b/packages/website/ts/@next/icons/illustrations/low-cost.svg new file mode 100644 index 000000000..530cbdd79 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/low-cost.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index f2e49840f..a9d8cb19f 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -1,11 +1,12 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Hero} from 'ts/@next/components/hero'; +import { colors } from 'ts/style/colors'; import { Banner } from 'ts/@next/components/banner'; import { Button } from 'ts/@next/components/button'; import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; import { Icon } from 'ts/@next/components/icon'; import { SiteWrap } from 'ts/@next/components/siteWrap'; @@ -25,8 +26,8 @@ const offersData = [ title: 'Market Making Compensation', description: (
    -
  • Receive an infrastructure grant of $20,000+ for completing onboarding
    • -
  • Earn an additional $5,000 by referring other market makers to the Program
    • +
  • Receive an infrastructure grant of $20,000+ for completing onboarding*
    • +
  • Earn an additional $5,000 by referring other market makers to the Program*
), }, @@ -43,8 +44,10 @@ export class NextMarketMaker extends React.Component { }; public render(): React.ReactNode { return ( - +
@@ -79,7 +82,7 @@ export class NextMarketMaker extends React.Component { title="Low Cost" titleSize="small" description="Pay no fees on orders except for bulk cancellations" - icon="secureTrading" + icon="low-cost" iconSize="medium" isInline={true} /> @@ -94,6 +97,7 @@ export class NextMarketMaker extends React.Component { description={item.description} isInlineIcon={true} iconSize={240} + fontSize="medium" /> ))}
@@ -120,7 +124,7 @@ export class NextMarketMaker extends React.Component { const HeroActions = () => ( <> - -- cgit v1.2.3 From b40551e2dfdae276850be1f38bd0eaeaafe02749 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:08:35 +0100 Subject: Change cursor on dropdown triggers --- packages/website/ts/@next/components/header.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index e6b49e395..24bfa28ba 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -176,6 +176,7 @@ const StyledNavLink = styled(Link).attrs({ const StyledAnchor = styled.a` ${linkStyles}; + cursor: default; `; const HeaderWrap = styled(FlexWrap)` -- cgit v1.2.3 From 342ecae34d80579560703b6912ac9219fcda0c72 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:30:10 +0100 Subject: Left-align hero on mobile --- packages/website/ts/@next/components/hero.tsx | 11 ++++++++--- packages/website/ts/@next/pages/market_maker.tsx | 1 + 2 files changed, 9 insertions(+), 3 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 290c57bcb..c79e2a6eb 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -9,6 +9,7 @@ interface Props { maxWidthHeading?: string; isLargeTitle?: boolean; isFullWidth?: boolean; + isCenteredMobile?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -16,7 +17,7 @@ interface Props { export const Hero = (props: Props) => (
- + {props.figure && {props.figure} @@ -42,6 +43,10 @@ export const Hero = (props: Props) => (
); +Hero.defaultProps = { + isCenteredMobile: true, +}; + const Section = styled.section` padding: 120px 0; @@ -50,7 +55,7 @@ const Section = styled.section` } `; -const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` +const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean; isCenteredMobile?: boolean }>` width: calc(100% - 60px); margin: 0 auto; @@ -64,7 +69,7 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` } @media (max-width: 768px) { - text-align: center; + text-align: ${props => props.isCenteredMobile ? `center` : 'left'}; } `; diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index a9d8cb19f..37a25f0ac 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -50,6 +50,7 @@ export class NextMarketMaker extends React.Component { maxWidthHeading="715px" isLargeTitle={false} isFullWidth={false} + 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={} -- cgit v1.2.3 From 7b117081d34111d9fdb35a613df48b3f0292094c Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:30:33 +0100 Subject: Added community and market maker routes --- packages/website/ts/types.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 9b5879175..37bd73063 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -356,9 +356,11 @@ export enum WebsitePaths { AboutTeam = '/about/team', AboutPress = '/about/press', AboutJobs = '/about/jobs', + Community = '/community', LaunchKit = '/launch-kit', Instant = '/instant', Ecosystem = '/eap', + MarketMaker = '/market-maker', Why = '/why', Whitepaper = '/pdfs/0x_white_paper.pdf', SmartContracts = '/docs/contracts', -- cgit v1.2.3 From abbb6793cc1551cb8a37b19b4ee75fdddc80f7c3 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:30:38 +0100 Subject: Added routes --- packages/website/ts/index.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index abd8bc2ef..f7a66c836 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -109,6 +109,8 @@ render( + + -- cgit v1.2.3 From 102b7154e0aadd2715159e9085389875ecf88a1f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 18:35:15 +0100 Subject: Remove community and market maker route --- packages/website/ts/index.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index f7a66c836..abd8bc2ef 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -109,8 +109,6 @@ render( - - -- cgit v1.2.3 From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:24:53 -0800 Subject: run prettier on website --- .../ts/@next/components/animatedChatIcon.tsx | 70 +++++++++++--- .../ts/@next/components/animatedCompassIcon.tsx | 22 +++-- .../website/ts/@next/components/blockIconLink.tsx | 40 ++------ packages/website/ts/@next/components/button.tsx | 4 +- .../website/ts/@next/components/definition.tsx | 4 +- packages/website/ts/@next/components/hamburger.tsx | 9 +- .../website/ts/@next/components/heroAnimation.tsx | 47 ++++++++-- packages/website/ts/@next/components/heroImage.tsx | 6 +- packages/website/ts/@next/components/icon.tsx | 22 +++-- packages/website/ts/@next/components/image.tsx | 9 +- packages/website/ts/@next/components/layout.tsx | 39 +++++--- packages/website/ts/@next/components/logo.tsx | 5 +- .../website/ts/@next/components/modals/input.tsx | 13 ++- packages/website/ts/@next/components/newLayout.tsx | 36 ++++++-- .../ts/@next/components/sections/landing/about.tsx | 10 +- .../@next/components/sections/landing/clients.tsx | 18 ++-- .../ts/@next/components/sections/landing/hero.tsx | 8 +- packages/website/ts/@next/components/separator.tsx | 2 +- packages/website/ts/@next/components/siteWrap.tsx | 23 ++--- .../website/ts/@next/components/slider/slider.tsx | 14 +-- packages/website/ts/@next/components/text.tsx | 38 ++++---- .../website/ts/@next/constants/globalStyle.tsx | 12 ++- packages/website/ts/@next/constants/utilities.tsx | 6 +- packages/website/ts/@next/pages/community.tsx | 61 ++++++------ .../website/ts/@next/pages/instant/code_demo.tsx | 6 +- .../instant/config_generator_address_input.tsx | 6 +- .../@next/pages/instant/fee_percentage_slider.tsx | 2 +- packages/website/ts/@next/pages/landing.tsx | 16 ++-- packages/website/ts/@next/pages/market_maker.tsx | 42 ++++----- packages/website/ts/@next/pages/why.tsx | 102 ++++++++++++--------- packages/website/ts/globals.d.ts | 4 +- 31 files changed, 403 insertions(+), 293 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx index feaa0631f..9a86e244c 100644 --- a/packages/website/ts/@next/components/animatedChatIcon.tsx +++ b/packages/website/ts/@next/components/animatedChatIcon.tsx @@ -4,28 +4,69 @@ import styled, { keyframes } from 'styled-components'; export const AnimatedChatIcon = () => ( - + - + - - - - - - + + + + + + - + - - - + + + ); @@ -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; `; diff --git a/packages/website/ts/@next/components/animatedCompassIcon.tsx b/packages/website/ts/@next/components/animatedCompassIcon.tsx index aa0cfd099..5388f95ca 100644 --- a/packages/website/ts/@next/components/animatedCompassIcon.tsx +++ b/packages/website/ts/@next/components/animatedCompassIcon.tsx @@ -4,17 +4,21 @@ import styled, { keyframes } from 'styled-components'; export const AnimatedCompassIcon = () => ( - - - + + + - - - - - - + + + + + + diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 46a267889..bdcc5c29d 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -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 { 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 (
- + - - {title} - + {title} -
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index fdf396ef0..790e31468 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -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}; `} diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 965466f60..12c22a5d6 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -41,7 +41,9 @@ export const Definition = (props: Props) => ( {typeof props.description === 'string' ? ( - {props.description} + + {props.description} + ) : ( <>{props.description} )} diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index b5c01a2b0..435d206cd 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -16,7 +16,10 @@ export const Hamburger: React.FunctionComponent = (props: Props) => { ); }; -const StyledHamburger = styled.button` +const StyledHamburger = + styled.button < + Props > + ` background: none; border: 0; width: 22px; @@ -50,7 +53,9 @@ const StyledHamburger = styled.button` //transform-origin: 0% 100%; } - ${props => props.isOpen && ` + ${props => + props.isOpen && + ` opacity: 1; transform: rotate(45deg) translate(0, 1px); diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/@next/components/heroAnimation.tsx index 32117c1f8..42956fb6a 100644 --- a/packages/website/ts/@next/components/heroAnimation.tsx +++ b/packages/website/ts/@next/components/heroAnimation.tsx @@ -4,16 +4,49 @@ import styled, { keyframes } from 'styled-components'; export const HeroAnimation = () => ( - + - - - - - - + + + + + + ); diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx index 956218083..af7c055ac 100644 --- a/packages/website/ts/@next/components/heroImage.tsx +++ b/packages/website/ts/@next/components/heroImage.tsx @@ -5,11 +5,7 @@ interface Props { image: React.ReactNode; } -export const LandingAnimation = (props: Props) => ( - - {props.image} - -); +export const LandingAnimation = (props: Props) => {props.image}; const Wrap = styled.figure` display: inline-block; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index d9632a3c7..fc9d488f9 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -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 = (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: () => Loading, }); @@ -26,17 +26,16 @@ export const Icon: React.FunctionComponent = (props: IconProps) => { } if (props.component) { - return ( - - {props.component} - - ); + return {props.component}; } return null; }; -export const InlineIconWrap = styled.div` +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` +const StyledIcon = + styled.figure < + IconProps > + ` width: ${props => _getSize(props.size)}; height: ${props => _getSize(props.size)}; margin: ${props => getCSSPadding(props.margin)}; diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx index 34520b619..65b2a9705 100644 --- a/packages/website/ts/@next/components/image.tsx +++ b/packages/website/ts/@next/components/image.tsx @@ -9,11 +9,12 @@ interface Props { } const ImageClass: React.FunctionComponent = (props: Props) => { - return ( - - ); + return ; }; -export const Image = styled(ImageClass)` +export const Image = + styled(ImageClass) < + Props > + ` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 358120adc..770ee159c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -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
? -export const Section = styled.section` - 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` @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` +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` +export const WrapSticky = + styled.div < + WrapStickyInterface > + ` position: sticky; top: ${props => props.offsetTop || '60px'}; `; @@ -138,16 +148,21 @@ export const WrapSticky = styled.div` 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` +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}) { diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 2423f07b5..227d48ee0 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -23,7 +23,10 @@ const StyledLogo = styled.div` } `; -const Icon = styled(LogoIcon)` +const Icon = + styled(LogoIcon) < + LogoInterface > + ` flex-shrink: 0; path { diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index d4d9206a2..5b5eac51c 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -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` +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; diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index edb236576..28e7653c5 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -49,14 +49,15 @@ export interface ColumnProps { export const Section: React.FunctionComponent = (props: SectionProps) => { return ( - - {props.children} - + {props.children} ); }; -export const Column = styled.div` +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` } `; -export const FlexWrap = styled.div` +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` } `; -export const WrapSticky = styled.div` +export const WrapSticky = + styled.div < + WrapProps > + ` position: sticky; top: ${props => props.offsetTop || '60px'}; `; -const SectionBase = styled.section` +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` } `; -const Wrap = styled(FlexWrap)` +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)` margin: 0 auto; `; -export const WrapGrid = styled(Wrap)` +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%; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 87a0fe562..7b51b0d13 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -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; + } } `; diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index e411feeb0..a7a526818 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -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 = () => (
- - Join the growing number of projects developing on 0x - + Join the growing number of projects developing on 0x {_.map(projects, (item: ProjectLogo, index) => ( - + {item.name} ))} @@ -75,7 +70,10 @@ export const SectionLandingClients = () => (
); -const StyledProject = styled.div` +const StyledProject = + styled.div < + StyledProjectInterface > + ` flex-shrink: 0; img { diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 85290d1c6..cf67ad66d 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -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 = () => ( diff --git a/packages/website/ts/@next/components/separator.tsx b/packages/website/ts/@next/components/separator.tsx index ccc79aedf..0b8b8d766 100644 --- a/packages/website/ts/@next/components/separator.tsx +++ b/packages/website/ts/@next/components/separator.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const Separator = styled.hr` - background: #EAEAEA; + background: #eaeaea; height: 1px; border: 0; `; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index db91fe08a..75cb9a268 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -115,13 +115,10 @@ export class SiteWrap extends React.Component { 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 { <> -
+
-
- {children} -
+
{children}
-
+
@@ -148,7 +140,10 @@ export class SiteWrap extends React.Component { } } -const Main = styled.main` +const Main = + styled.main < + MainProps > + ` transition: transform 0.5s, opacity 0.5s; opacity: ${props => props.isNavToggled && '0.5'}; `; diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx index 10bbbf609..33a352b9f 100644 --- a/packages/website/ts/@next/components/slider/slider.tsx +++ b/packages/website/ts/@next/components/slider/slider.tsx @@ -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 = (props: SlideProps) = - {heading} + + {heading} + {text} @@ -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; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index a687bca38..9f6ed9e7a 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -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` +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 = props => { - const { - asElement = 'h1', - children, - } = props; + const { asElement = 'h1', children } = props; const Component = StyledHeading.withComponent(asElement); - return ( - - {children} - - ); + return {children}; }; 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. with a props asElement so we can use it // for literally anything = -export const Paragraph = styled.p` +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; `; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index bf168d344..b095fafb5 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -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 ` +const GlobalStyles = withTheme( + createGlobalStyle < + GlobalStyle > + ` ${cssReset}; html { @@ -100,6 +103,7 @@ const GlobalStyles = withTheme(createGlobalStyle ` img + p { padding-top: 30px; } -`); +`, +); export { GlobalStyles }; diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx index 0d626c91b..ee5c5b4ce 100644 --- a/packages/website/ts/@next/constants/utilities.tsx +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -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 = 0): string => { diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx index a02e7e6fd..eb3e7210d 100644 --- a/packages/website/ts/@next/pages/community.tsx +++ b/packages/website/ts/@next/pages/community.tsx @@ -98,14 +98,12 @@ export class NextCommunity extends React.Component { 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. + 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. - @@ -113,7 +111,13 @@ export class NextCommunity extends React.Component {
- + {_.map(communityLinks, (link: CommunityLinkProps, index: number) => (
- + Upcoming 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. + 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. - - - + {_.map(events, (ev: EventProps, index: number) => ( { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const Event: React.FunctionComponent = (event: EventProps) => ( - + {event.title} @@ -195,11 +204,7 @@ const Event: React.FunctionComponent = (event: EventProps) => ( {event.date} - diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx index 04556123e..4a3022df5 100644 --- a/packages/website/ts/@next/pages/instant/code_demo.tsx +++ b/packages/website/ts/@next/pages/instant/code_demo.tsx @@ -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 { - - {copyButtonText} - + {copyButtonText} diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx index 23cdfcf7f..9b0e9b1d1 100644 --- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx @@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component< const hasError = !_.isEmpty(errMsg); return ( - + {errMsg} diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx index 512ae06b4..e9f8ba83b 100644 --- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)` top: 7px; &:after { border: solid transparent; - content: " "; + content: ' '; height: 0; width: 0; position: absolute; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 8696cf022..ae560e8e3 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -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 { isContactModalOpen: false, }; public render(): React.ReactNode { - return ( + return ( @@ -34,9 +34,9 @@ export class NextLanding extends React.Component { public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index 37a25f0ac..b4b5a30c9 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -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={} + actions={} /> -
+
- {_.map(offersData, (item, index) => ( - - ))} + {_.map(offersData, (item, index) => ( + + ))}
{ this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const HeroActions = () => ( diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 9c3c4d0a2..360db165c 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -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={ - } /> -
+
-
- - - Benefits - Use Cases - Features - - +
+ + + Benefits + Use Cases + Features + + - What 0x offers + + What 0x offers + {_.map(offersData, (item, index) => ( - Use Cases + + Use Cases + {_.map(useCaseSlides, (item, index) => ( - Exchange Functionality + + Exchange Functionality + {_.map(functionalityData, (item, index) => ( -
- - - +
+ + + ); } public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } interface SectionProps { isNotRelative?: boolean; } -const SectionWrap = styled.div` +const SectionWrap = + styled.div < + SectionProps > + ` position: ${props => !props.isNotRelative && 'relative'}; & + & { @@ -247,10 +254,15 @@ const SectionWrap = styled.div` } `; -const SectionTitle = styled(Heading)<{ isNoBorder?: boolean }>` +const SectionTitle = + styled(Heading) < + { isNoBorder: boolean } > + ` position: relative; - ${props => !props.isNoBorder && ` + ${props => + !props.isNoBorder && + ` &:before { content: ''; width: 100vw; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 9addab335..9a029397f 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -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> {} } -- cgit v1.2.3 From 67521da5c1dcb39d6f0349e67eb05b17c3771a71 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:29:21 -0800 Subject: useAnchorTag -> shouldUseAnchorTag --- packages/website/ts/@next/components/button.tsx | 6 +++--- packages/website/ts/@next/components/definition.tsx | 4 ++-- packages/website/ts/@next/pages/ecosystem.tsx | 4 ++-- packages/website/ts/@next/pages/instant.tsx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 790e31468..675f69308 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -23,14 +23,14 @@ interface ButtonInterface { to?: string; onClick?: () => any; theme?: ThemeInterface; - useAnchorTag?: boolean; + shouldUseAnchorTag?: boolean; } export const Button = (props: ButtonInterface) => { - const { children, href, isWithArrow, to, useAnchorTag, target } = props; + const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; let linkElem; - if (href || useAnchorTag) { + if (href || shouldUseAnchorTag) { linkElem = 'a'; } if (to) { diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 12c22a5d6..8adef8d54 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -9,7 +9,7 @@ interface Action { label: string; url?: string; onClick?: () => void; - useAnchorTag?: boolean; + shouldUseAnchorTag?: boolean; } interface Props { @@ -57,7 +57,7 @@ export const Definition = (props: Props) => ( onClick={item.onClick} isWithArrow={true} isAccentColor={true} - useAnchorTag={item.useAnchorTag} + shouldUseAnchorTag={item.shouldUseAnchorTag} target="_blank" > {item.label} diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx index ab73cc52f..3d3e219a2 100644 --- a/packages/website/ts/@next/pages/ecosystem.tsx +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -69,7 +69,7 @@ export const NextEcosystem = () => ( href={constants.URL_ECOSYSTEM_APPLY} isWithArrow={true} isAccentColor={true} - useAnchorTag={true} + shouldUseAnchorTag={true} > Apply now @@ -77,7 +77,7 @@ export const NextEcosystem = () => ( href={constants.URL_ECOSYSTEM_BLOG_POST} isWithArrow={true} isAccentColor={true} - useAnchorTag={true} + shouldUseAnchorTag={true} target="_blank" > Learn More diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 94633116f..056935189 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -39,7 +39,7 @@ const featuresData = [ { label: 'Get Started', onClick: getStartedClick, - useAnchorTag: true, + shouldUseAnchorTag: true, }, { label: 'Explore the Docs', -- cgit v1.2.3 From f097259266bebddca7d21a225e760d708f96ff82 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:56:53 -0800 Subject: Removing unused imports --- packages/website/ts/@next/components/footer.tsx | 1 - packages/website/ts/@next/pages/market_maker.tsx | 8 +------ packages/website/ts/index.tsx | 29 +++++++++++------------- 3 files changed, 14 insertions(+), 24 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index fedae5a1b..b30a0cc5e 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -2,7 +2,6 @@ import { Link as SmartLink } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; import { Logo } from 'ts/@next/components/logo'; diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index b4b5a30c9..e2d3c75c4 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -1,19 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { colors } from 'ts/style/colors'; - import { Banner } from 'ts/@next/components/banner'; import { Button } from 'ts/@next/components/button'; import { Definition } from 'ts/@next/components/definition'; import { Hero } from 'ts/@next/components/hero'; -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 { WebsitePaths } from 'ts/types'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; const offersData = [ { diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index abd8bc2ef..3f0c1c28c 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,13 +4,8 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import { MetaTags } from 'ts/components/meta_tags'; -import { About } from 'ts/containers/about'; import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; -import { Instant } from 'ts/containers/instant'; -import { Jobs } from 'ts/containers/jobs'; -import { Landing } from 'ts/containers/landing'; // Note(ez): When we're done we omit all old site imports -import { LaunchKit } from 'ts/containers/launch_kit'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; import { createLazyComponent } from 'ts/lazy_component'; @@ -25,12 +20,10 @@ import { NextAboutJobs } from 'ts/@next/pages/about/jobs'; import { NextAboutMission } from 'ts/@next/pages/about/mission'; import { NextAboutPress } from 'ts/@next/pages/about/press'; import { NextAboutTeam } from 'ts/@next/pages/about/team'; -import { NextCommunity } from 'ts/@next/pages/community'; import { NextEcosystem } from 'ts/@next/pages/ecosystem'; import { Next0xInstant } from 'ts/@next/pages/instant'; import { NextLanding } from 'ts/@next/pages/landing'; import { NextLaunchKit } from 'ts/@next/pages/launch_kit'; -import { NextMarketMaker } from 'ts/@next/pages/market_maker'; import { NextWhy } from 'ts/@next/pages/why'; // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries @@ -104,15 +97,19 @@ render(
{/* Next (new site) routes */} - - - - - - - - - + + + + + + + + + {/* Note(ez): We remove/replace all old routes with next routes once we're ready to put a ring on it. for now let's keep em there for reference -- cgit v1.2.3 From 9728267eac56f3d811d70bb794ffa98ebc832267 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:57:03 -0800 Subject: Removing unused interface --- packages/website/ts/@next/components/modals/input.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index 5b5eac51c..d4d53402a 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -15,10 +15,6 @@ interface InputProps { isErrors?: boolean; } -interface LabelProps { - string: boolean; -} - interface ErrorProps { [key: string]: string; } -- cgit v1.2.3 From f6525efe958158da9d8ab1ada22ca628239522f5 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:57:19 -0800 Subject: Not assigning to variable because we never used the variable --- packages/website/ts/@next/components/newsletter_form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx index eef496982..ce6b04993 100644 --- a/packages/website/ts/@next/components/newsletter_form.tsx +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -91,7 +91,7 @@ class Form extends React.Component { } try { - const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { + await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { method: 'post', mode: 'cors', headers: { -- cgit v1.2.3 From b96236cdb365c0ceae57e247faf8ab4d24205f66 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:57:26 -0800 Subject: Remove comments --- packages/website/ts/globals.d.ts | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 9a029397f..b953a319f 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -18,8 +18,6 @@ declare module '*.json' { } declare module '*.svg' { - //const svg: any; - //export default svg; import { PureComponent, SVGProps } from 'react'; export default class extends PureComponent> {} } -- cgit v1.2.3 From 09eac3904079517685ed1788f871639c685f2eef Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 14:07:53 -0800 Subject: Move imports --- packages/website/ts/@next/pages/instant.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 056935189..8b3a417a9 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -3,19 +3,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled, { keyframes } from 'styled-components'; -import { colors } from 'ts/style/colors'; - import { Banner } from 'ts/@next/components/banner'; -import { Hero } from 'ts/@next/components/hero'; - import { Button } from 'ts/@next/components/button'; import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; import { Section, SectionProps } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; import { Configurator } from 'ts/@next/pages/instant/configurator'; +import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; + import { ModalContact } from '../components/modals/modal_contact'; const CONFIGURATOR_MIN_WIDTH_PX = 1050; -- cgit v1.2.3 From 96a876270480242b00c770b97bb488841df4544e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 14:07:59 -0800 Subject: Move imports and put action into var --- packages/website/ts/@next/pages/why.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 360db165c..4d5e46361 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,20 +1,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; - import styled from 'styled-components'; -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 { Hero } from 'ts/@next/components/hero'; 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'; +import { Heading } from 'ts/@next/components/text'; import { ModalContact } from '../components/modals/modal_contact'; -import { Heading } from 'ts/@next/components/text'; const offersData = [ { @@ -93,16 +91,17 @@ export class NextWhy extends React.Component { isContactModalOpen: false, }; public render(): React.ReactNode { + const buildAction = ( + + ); return ( - Build on 0x - - } + actions={buildAction} />
-- cgit v1.2.3 From 441b5ac6f1d597f6a6ee32f672c46f2cdac03dbf Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 14:08:06 -0800 Subject: Get rid of unused import --- packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx index 176c9410c..ba141c01e 100644 --- a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { css, keyframes, styled } from 'ts/style/theme'; const appearFromBottomFrames = keyframes` -- cgit v1.2.3 From e10b30886ff0c3be4ef5f91e64107c79c9074725 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 14:11:29 -0800 Subject: includeEmpty -> shouldIncludeEmpty --- packages/website/ts/@next/pages/instant/config_generator.tsx | 2 +- packages/website/ts/@next/pages/instant/select.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx index a1263da58..d4497ac92 100644 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -65,7 +65,7 @@ export class ConfigGenerator extends React.Component