From 4da419cf7591a8beb32fb5e41e31b129c5fbb99f Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 4 Dec 2018 14:58:37 +0100 Subject: [PATCH] Fixes all lint issues, cleanup --- .../website/ts/@next/components/button.tsx | 12 +- .../website/ts/@next/components/footer.tsx | 46 +++---- .../website/ts/@next/components/header.tsx | 8 +- packages/website/ts/@next/components/icon.tsx | 2 - .../website/ts/@next/components/image.tsx | 14 +-- .../website/ts/@next/components/layout.tsx | 8 +- packages/website/ts/@next/components/logo.tsx | 9 +- .../ts/@next/components/newsletterForm.tsx | 8 +- .../website/ts/@next/components/siteWrap.tsx | 6 +- packages/website/ts/@next/components/text.tsx | 1 - .../ts/@next/constants/globalStyle.tsx | 6 +- .../website/ts/@next/pages/about/jobs.tsx | 34 ++--- .../website/ts/@next/pages/about/mission.tsx | 13 +- .../website/ts/@next/pages/about/press.tsx | 12 +- .../website/ts/@next/pages/about/team.tsx | 10 +- packages/website/ts/@next/pages/ecosystem.tsx | 117 ++++++++--------- packages/website/ts/@next/pages/instant.tsx | 24 +--- packages/website/ts/@next/pages/landing.tsx | 69 +++------- packages/website/ts/@next/pages/launchKit.tsx | 119 +++++++++++------- packages/website/ts/@next/pages/why.tsx | 1 - 20 files changed, 234 insertions(+), 285 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 2569c39c50..92c2dac283 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -5,9 +5,9 @@ import { colors } from 'ts/style/colors'; interface ButtonInterface { children: Node | string; - transparent?: any; - hasIcon?: any; - inline?: any; + isTransparent?: boolean; + hasIcon?: boolean | string; + isInline?: boolean; href?: string; onClick?: () => void; } @@ -31,9 +31,9 @@ export const ButtonWrap = styled.div` const StyledButton = styled.button` appearance: none; border: 1px solid transparent; - display: ${props => props.inline && 'inline-block'}; - background-color: ${props => !props.transparent && colors.brandLight}; - border-color: ${props => props.transparent && '#6a6a6a'}; + display: ${props => props.isInline && 'inline-block'}; + background-color: ${props => !props.isTransparent && colors.brandLight}; + border-color: ${props => props.isTransparent && '#6a6a6a'}; color: ${props => props.color || props.theme.textColor}; text-align: center; padding: 14px 22px; diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 032d2e8a19..13b681572f 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -1,11 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button } from 'ts/@next/components/button'; import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { NewsletterForm } from 'ts/@next/components/newsletterForm'; @@ -57,33 +56,28 @@ const linkRows: LinkRows[] = [ ]; export const Footer: React.StatelessComponent = ({}) => ( - - - - - - - - + - {_.map(linkRows, (row, index) => ( - - - { row.heading } - - - + + + + + + + + {_.map(linkRows, (row, index) => ( + + + {row.heading} + + + + + ))} + - ))} - - - + ); const LinkList = (props: LinkListProps) => ( diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c934b29acc..dfe9028c3d 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,12 +1,12 @@ -import * as _ from 'lodash'; +import _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; -import { Section, Wrap } from './layout'; -import { Button } from './button'; -import { Logo } from './logo'; +import { Button } from 'ts/@next/components/button'; +import { Section, Wrap } from 'ts/@next/components/layout'; +import { Logo } from 'ts/@next/components/logo'; interface HeaderProps { } diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 112d4ed685..28a8b3c607 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -7,8 +7,6 @@ interface Props { } export const IconClass: React.FunctionComponent = (props: Props) => { - const { icon, size } = props; - return (
); diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx index f49c8c0599..34520b619b 100644 --- a/packages/website/ts/@next/components/image.tsx +++ b/packages/website/ts/@next/components/image.tsx @@ -3,19 +3,17 @@ import styled from 'styled-components'; interface Props { alt?: string; - src: any; - srcset: any; - center: any; + src?: any; + srcset?: any; + isCentered?: boolean; } const ImageClass: React.FunctionComponent = (props: Props) => { - const { src, srcset, alt } = props; - return ( - + ); }; -export const Image = styled(ImageClass)` - margin: ${(props: Props) => props.center && `0 auto`}; +export const Image = styled(ImageClass)` + 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 2067b67b0f..5c5d1bbdac 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -29,7 +29,7 @@ interface WrapProps { bgColor?: string; isWrapped?: boolean; isCentered?: boolean; - padding?: number | ('large' | 'default' | number)[]; + padding?: number | Array<'large' | 'default' | number>; } interface ColumnProps { @@ -52,7 +52,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => { return `calc(${percentWidth}% - ${gutterDiff}px)`; }; -const _getPadding = (value: number | (string | number)[]): string => { +const _getPadding = (value: number | Array): string => { if (Array.isArray(value)) { return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); } else { @@ -99,7 +99,7 @@ export const Section = styled.section` margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-left: ${props => props.isFullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; - border: 1px dotted rgba(0, 255, 0, 0.3); + border: 1px dotted rgba(0, 255, 0, 0.15); @media (min-width: 1560px) { width: ${props => props.isFullWidth && '100vw'}; @@ -141,7 +141,7 @@ export const WrapGrid = styled(WrapBase)` export const Column = styled.div` padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; - border: 1px dotted rgba(255, 0, 0, 0.3); + border: 1px dotted rgba(255, 0, 0, 0.15); background-color: ${props => props.bgColor}; border-color: ${props => props.borderColor && `${props.borderColor}`}; diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 5d6258f375..9f147e3fbe 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -2,14 +2,13 @@ import * as React from 'react'; import styled from 'styled-components'; import { ThemeInterface } from 'ts/@next/components/siteWrap'; -import LogoIcon from '../icons/logo-with-type.svg'; +import LogoIcon from 'ts/@next/icons/logo-with-type.svg'; interface LogoInterface { - light?: any; + isLight?: boolean; theme?: ThemeInterface; } - // Note let's refactor this // is it absolutely necessary to have a stateless component // to pass props down into the styled icon? @@ -21,11 +20,11 @@ const Icon = styled(LogoIcon)` flex-shrink: 0; path { - fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor}; + fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor}; } `; -export const Logo: React.StatelessComponent = (props) => ( +export const Logo: React.StatelessComponent = (props: LogoInterface) => ( diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx index 422d25becb..4ff9663bad 100644 --- a/packages/website/ts/@next/components/newsletterForm.tsx +++ b/packages/website/ts/@next/components/newsletterForm.tsx @@ -5,8 +5,6 @@ import { colors } from 'ts/style/colors'; import {Button} from 'ts/@next/components/button'; -import ArrowIcon from 'ts/@next/icons/form-arrow.svg'; - interface InputProps { name: string; label: string; @@ -15,9 +13,9 @@ interface InputProps { interface Props { } -const Input = ({ ...props }) => { +const Input = (props: InputProps) => { const { name, label } = props; - const id = 'input-' + name; + const id = `input-${name}`; return ( <> @@ -31,7 +29,7 @@ export const NewsletterForm: React.StatelessComponent = (props: Props) => ( - + Submit diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index cd99ce5a02..f7b2c4df29 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; +import { ThemeProvider } from 'styled-components'; import { Footer } from 'ts/@next/components/footer'; import { Header } from 'ts/@next/components/header'; @@ -18,7 +18,7 @@ export interface ThemeInterface { [key: string]: { bgColor: string; textColor: string; - } + }; } const GLOBAL_THEMES: ThemeInterface = { @@ -34,7 +34,7 @@ const GLOBAL_THEMES: ThemeInterface = { bgColor: '#e0e0e0', textColor: '#000000', }, -} +}; export const SiteWrap: React.StatelessComponent = props => { const { diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 22026d8101..a746cb3b9c 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; - interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; size?: 'default' | 'medium' | 'large' | 'small'; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 7e8f2ebdbc..fd9e67cb46 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,13 +1,11 @@ -import { withTheme, createGlobalStyle } from 'styled-components'; +import { createGlobalStyle, withTheme } from 'styled-components'; import {cssReset} from 'ts/@next/constants/cssReset'; -import {colors} from 'ts/style/colors'; - interface GlobalStyle { theme: { bgColor: string; textColor: string; - } + }; } const GlobalStyles = withTheme(createGlobalStyle ` diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx index 35d4432c54..4f85b99458 100644 --- a/packages/website/ts/@next/pages/about/jobs.tsx +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -1,18 +1,10 @@ import * as React from 'react'; -import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; -import { colors } from 'ts/style/colors'; - -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; -import { Image } from 'ts/@next/components/image'; - -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; -import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; -import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; export const NextAboutJobs = () => ( @@ -25,9 +17,12 @@ export const NextAboutJobs = () => ( Jobs - Join Us in Our Mission - To create a tokenized world where all value can flow freely. -We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place. + + Join Us in Our Mission + + + To create a tokenized world where all value can flow freely.We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place. + @@ -35,8 +30,12 @@ We are powering a growing ecosystem of decentralized applications and solving no
- Powered by a Diverse Worldwide Community - We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world. + + Powered by a Diverse Worldwide Community + + + We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world. + @@ -95,7 +94,9 @@ We are powering a growing ecosystem of decentralized applications and solving no Open Positition - We're always interested in talking to talented people. Send us an application if you think you're the right fit. + + We're always interested in talking to talented people. Send us an application if you think you're the right fit. + Apply @@ -118,6 +119,7 @@ const BenefitsList = styled.ul` } `; +// Lets refactor these chapter links into button perhaps as a const ChapterLink = styled(ReactRouterLink)` font-size: 1.222222222rem; display: block; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index fd52d1a167..234f7254dd 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -1,15 +1,12 @@ import * as React from 'react'; -import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; - -import { colors } from 'ts/style/colors'; +import styled from 'styled-components'; import { Image } from 'ts/@next/components/image'; -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; @@ -32,11 +29,9 @@ export const NextAboutMission = () => (
-
+
- +
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index e222434b4d..3a500ff39c 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -1,18 +1,10 @@ import * as React from 'react'; -import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; -import { colors } from 'ts/style/colors'; - -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; -import { Image } from 'ts/@next/components/image'; - -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; -import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; -import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; export const NextAboutPress = () => ( diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx index 1a88a7ff72..1c7ff319b0 100644 --- a/packages/website/ts/@next/pages/about/team.tsx +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Column, Section, Wrap, WrapGrid, WrapCentered } from 'ts/@next/components/layout'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; -import { Image } from 'ts/@next/components/image'; - -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; -import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; -import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; interface TeamMember { name: string; diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx index 199c9038eb..094d5e126f 100644 --- a/packages/website/ts/@next/pages/ecosystem.tsx +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import styled from 'styled-components'; -import { Link as ReactRouterLink } from 'react-router-dom'; import { colors } from 'ts/style/colors'; @@ -8,19 +6,19 @@ import {Button} from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; -import { Image } from 'ts/@next/components/image'; -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; -import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; export const NextEcosystem = () => (
- Jumpstart your Business on 0x - The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x. + + Jumpstart your Business on 0x + + + The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x. +
Get Started Learn More @@ -31,39 +29,68 @@ export const NextEcosystem = () => (
- Join a vibrant ecosystem of projects in the 0x Network. + + Join a vibrant ecosystem of projects in the 0x Network. + + {/* This */} - Milestone Grants - Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement. + + Milestone Grants + + + Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement. + + + + + + + VC Introductions + + + Connect with leading venture capital firms that could participate in your next funding round. + + + + + + + Technical Support + + + Receive ongoing technical assistance from knowledgeable and responsive 0x developers. + - VC Introductions - Connect with leading venture capital firms that could participate in your next funding round. + + Recruiting Assistance + + + Grow your team by accessing an exclusive pool of top engineering and business operations talent. + - Technical Support - Receive ongoing technical assistance from knowledgeable and responsive 0x developers. + + Marketing and Design Help + + + Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business. + - Recruiting Assistance - Grow your team by accessing an exclusive pool of top engineering and business operations talent. - - - - Marketing and Design Help - Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business. - - - - Legal Resources - Obtain important legal documents and resources that will help you navigate the regulatory landscape. + + Legal Resources + + + Obtain important legal documents and resources that will help you navigate the regulatory landscape. +
@@ -72,8 +99,12 @@ export const NextEcosystem = () => ( - Apply for the program now - Have questions? Please join our Discord channel + + Apply for the program now + + + Have questions? Please join our Discord channel + @@ -81,7 +112,7 @@ export const NextEcosystem = () => (
- +
@@ -89,29 +120,3 @@ export const NextEcosystem = () => (
); - -const BenefitsList = styled.ul` - color: #000; - list-style: disc; - columns: auto 2; - column-gap: 80px; - - li { - margin-bottom: 1em; - } -`; - -const ChapterLink = styled(ReactRouterLink)` - font-size: 1.222222222rem; - display: block; - opacity: 0.8; - margin-bottom: 1.666666667rem; - - &:first-child { - opacity: 1; - } - - &:hover { - opacity: 1; - } -`; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index a8707cdd77..29975193de 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import styled from 'styled-components'; import {colors} from 'ts/style/colors'; @@ -8,9 +7,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; export const Next0xInstant = () => ( @@ -22,9 +21,7 @@ export const Next0xInstant = () => (
-
+
Preview of payment widgets @@ -108,7 +105,7 @@ export const Next0xInstant = () => (
- +
@@ -125,18 +122,3 @@ export const Next0xInstant = () => (
); - -const ChapterLink = styled.a ` - font-size: 1.222222222rem; - display: block; - opacity: 0.8; - margin-bottom: 1.666666667rem; - - &:first-child { - opacity: 1; - } - - &:hover { - opacity: 1; - } -`; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 5f90ffb6ef..b39ee409d9 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import * as _ from 'lodash'; +import * as React from 'react'; import styled from 'styled-components'; import {colors} from 'ts/style/colors'; @@ -14,17 +14,6 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg'; import SupportIcon from 'ts/@next/icons/illustrations/support.svg'; -/** - Note(ez): Maybe when we're done at least with a basic structure, - we can take out each section into e.g. LandingSectionIntro.tsx in - @next/sections/landing ? so then our routes would only look like - - - - - -*/ - interface ProjectLogo { name: string; imageUrl?: string; @@ -83,11 +72,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( - - @@ -99,22 +88,18 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
-
+
- + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. - @@ -122,61 +107,39 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( {/* Note you can also pass in a string "large/default" or a number for custom margins */} {/* NOTE: this probably should be withComponent as part of a
*/} - - + + 873,435 - + Number of transactions - - + + $203M - + Total volume - - + + 227,372 - + Number of relayers
-
+
You're in good company diff --git a/packages/website/ts/@next/pages/launchKit.tsx b/packages/website/ts/@next/pages/launchKit.tsx index dd0ff07587..cd86f66c91 100644 --- a/packages/website/ts/@next/pages/launchKit.tsx +++ b/packages/website/ts/@next/pages/launchKit.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import styled from 'styled-components'; import {colors} from 'ts/style/colors'; @@ -8,17 +7,22 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; -import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; export const NextLaunchKit = () => (
- 0x Launch Kit - The definitive starting point for building a business on top of the 0x protocol. - + + 0x Launch Kit + + + The definitive starting point for building a business on top of the 0x protocol. + +
@@ -31,7 +35,9 @@ export const NextLaunchKit = () => ( > - Tap into and share liquidity with other relayers + + Tap into and share liquidity with other relayers + ( > - Tap into and share liquidity with other relayers + + Tap into and share liquidity with other relayers + ( > - Tap into and share liquidity with other relayers + + Tap into and share liquidity with other relayer + @@ -64,8 +74,12 @@ export const NextLaunchKit = () => ( - Working on a new token? - Easily create a secondary market for your asset/asset class + + Working on a new token? + + + Easily create a secondary market for your asset/asset clas +
@@ -76,8 +90,12 @@ export const NextLaunchKit = () => ( - Working on a new game? - Easily create an in-app marketplace + + Working on a new game? + + + Easily create an in-app marketplace +
@@ -88,8 +106,12 @@ export const NextLaunchKit = () => ( - No exchange in your location? - Build a 0x relayer for your contry’s market + + No exchange in your location? + + + Build a 0x relayer for your contry’s market +
@@ -97,17 +119,31 @@ export const NextLaunchKit = () => (
- 0x Instant Configurator - Liquidity Source - What tokens can users buy? (select all) - Transaction fee ETH address - Fee Percentage + + 0x Instant Configurator + + + Liquidity Source + + + What tokens can users buy? (select all) + + + Transaction fee ETH address + + + Fee Percentage + - Code Snippet + + Code Snippet + Explore the Docs - <code snippet> + + <code snippet> +
@@ -116,16 +152,24 @@ export const NextLaunchKit = () => ( - Need more flexibility? - Dive into our docs, or contact us if needed + + Need more flexibility? + + + Dive into our docs, or contact us if needed +
- - + +
@@ -135,25 +179,14 @@ export const NextLaunchKit = () => (
- Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations. - See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. + + Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations. + + + See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. +
); - -const ChapterLink = styled.a ` - font-size: 1.222222222rem; - display: block; - opacity: 0.8; - margin-bottom: 1.666666667rem; - - &:first-child { - opacity: 1; - } - - &:hover { - opacity: 1; - } -`; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 52268bd26e..d922aac9ea 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -9,7 +9,6 @@ import { Heading, Paragraph } from 'ts/@next/components/text'; import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; -import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; export const NextWhy = () => (