From 4da419cf7591a8beb32fb5e41e31b129c5fbb99f Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 4 Dec 2018 14:58:37 +0100 Subject: Fixes all lint issues, cleanup --- packages/website/ts/@next/components/button.tsx | 12 +-- packages/website/ts/@next/components/footer.tsx | 44 ++++---- packages/website/ts/@next/components/header.tsx | 8 +- packages/website/ts/@next/components/icon.tsx | 2 - packages/website/ts/@next/components/image.tsx | 14 ++- packages/website/ts/@next/components/layout.tsx | 8 +- packages/website/ts/@next/components/logo.tsx | 9 +- .../website/ts/@next/components/newsletterForm.tsx | 8 +- packages/website/ts/@next/components/siteWrap.tsx | 6 +- packages/website/ts/@next/components/text.tsx | 1 - .../website/ts/@next/constants/globalStyle.tsx | 6 +- packages/website/ts/@next/pages/about/jobs.tsx | 34 +++--- packages/website/ts/@next/pages/about/mission.tsx | 13 +-- packages/website/ts/@next/pages/about/press.tsx | 12 +-- packages/website/ts/@next/pages/about/team.tsx | 10 +- packages/website/ts/@next/pages/ecosystem.tsx | 105 +++++++++--------- 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, 227 insertions(+), 278 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 2569c39c5..92c2dac28 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 032d2e8a1..13b681572 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 c934b29ac..dfe9028c3 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 112d4ed68..28a8b3c60 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 f49c8c059..34520b619 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 2067b67b0..5c5d1bbda 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 5d6258f37..9f147e3fb 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 422d25bec..4ff9663ba 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 cd99ce5a0..f7b2c4df2 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 22026d810..a746cb3b9 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 7e8f2ebdb..fd9e67cb4 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 35d4432c5..4f85b9945 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 fd52d1a16..234f7254d 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 e222434b4..3a500ff39 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 1a88a7ff7..1c7ff319b 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 199c9038e..094d5e126 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. + + 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. + + Technical Support + + + Receive ongoing technical assistance from knowledgeable and responsive 0x developers. + - Recruiting Assistance - Grow your team by accessing an exclusive pool of top engineering and business operations talent. + + 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. + + 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 a8707cdd7..29975193d 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 5f90ffb6e..b39ee409d 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 dd0ff0758..cd86f66c9 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 52268bd26..d922aac9e 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 = () => ( -- cgit v1.2.3