diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-12-19 05:19:32 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-19 05:19:32 +0800 |
commit | 59d7efa78af41a91617b5a1f253a0f7e17553dca (patch) | |
tree | dc15d2f052af0696bad5919197b6ed51aa4cc221 /packages/website/ts/@next | |
parent | 45d8b522f49829068b8ce6a3940b4dcef724041f (diff) | |
parent | 102b7154e0aadd2715159e9085389875ecf88a1f (diff) | |
download | dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar.gz dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar.bz2 dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar.lz dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar.xz dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.tar.zst dexon-0x-contracts-59d7efa78af41a91617b5a1f253a0f7e17553dca.zip |
Merge pull request #1456 from 0xProject/feature/website/0x-org-bb-fixes-rebase
[website] Bakken & Baeck 0x.org website fixes
Diffstat (limited to 'packages/website/ts/@next')
10 files changed, 113 insertions, 20 deletions
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: Props) => { const { heading, subline, mainCta, secondaryCta } = props; return ( - <CustomSection bgColor="light" isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> + <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> <Border /> <Border isBottom={true} /> 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) => ( </Heading> {typeof props.description === 'string' ? ( - <Paragraph isMuted={true}>{props.description}</Paragraph> + <Paragraph isMuted={true} size={props.fontSize || 'default'}>{props.description}</Paragraph> ) : ( <>{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/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)` diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 46e2ca6d9..c79e2a6eb 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -5,8 +5,11 @@ import {addFadeInAnimation} from 'ts/@next/constants/animations'; interface Props { title: string; + maxWidth?: string; + maxWidthHeading?: string; isLargeTitle?: boolean; isFullWidth?: boolean; + isCenteredMobile?: boolean; description: string; figure?: React.ReactNode; actions?: React.ReactNode; @@ -14,15 +17,15 @@ interface Props { export const Hero = (props: Props) => ( <Section> - <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}> + <Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth} isCenteredMobile={props.isCenteredMobile}> {props.figure && <Content width="400px"> {props.figure} </Content> } - <Content width={props.figure ? '546px' : '678px'}> - <Title isLarge={props.isLargeTitle}> + <Content width={props.maxWidth ? props.maxWidth : (props.figure ? '546px' : '678px')}> + <Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}> {props.title} </Title> @@ -40,6 +43,10 @@ export const Hero = (props: Props) => ( </Section> ); +Hero.defaultProps = { + isCenteredMobile: true, +}; + const Section = styled.section` padding: 120px 0; @@ -48,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; @@ -62,15 +69,18 @@ const Wrap = styled.div<{ isCentered?: boolean; isFullWidth?: boolean }>` } @media (max-width: 768px) { - text-align: center; + text-align: ${props => props.isCenteredMobile ? `center` : 'left'}; } `; -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 +95,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) { @@ -117,4 +128,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. </Paragraph> - <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> + <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> Discover how developers use 0x - </Button> + </DeveloperLink> <hr style={{ - width: '340px', + width: '100%', + maxWidth: '340px', borderColor: '#3C4746', margin: '60px auto', }} @@ -55,6 +56,15 @@ const Figure = (props: FigureProps) => ( </Column> ); +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; 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 @@ +<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg"> +<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="82" height="82"> +<path d="M41 79.9333C62.5023 79.9333 79.9333 62.5023 79.9333 41C79.9333 19.4977 62.5023 2.06665 41 2.06665C19.4977 2.06665 2.06665 19.4977 2.06665 41C2.06665 62.5023 19.4977 79.9333 41 79.9333Z" fill="#00AE99" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/> +</mask> +<g mask="url(#mask0)"> +<ellipse cx="41" cy="76" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="41" cy="71" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="41" cy="66" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="41" cy="61" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="41" cy="56" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="41" cy="50" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="41" cy="44" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="18" cy="89" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="18" cy="84" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="18" cy="79" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="18" cy="74" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="18" cy="69" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="18" cy="63" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="18" cy="57" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="70" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="64" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="59" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="54" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="49" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<ellipse cx="64" cy="44" rx="8" ry="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="64" cy="38" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="64" cy="32" r="8" fill="#F3F6F4" stroke="#00AE99" stroke-width="3"/> +<circle cx="41" cy="41" r="38.9333" stroke="#00AE99" stroke-width="3"/> +</g> +</svg> 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; diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index f2e49840f..37a25f0ac 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: ( <ul> - <li>Receive an infrastructure grant of $20,000+ for completing onboarding</li> - <li>Earn an additional $5,000 by referring other market makers to the Program</li> + <li>Receive an infrastructure grant of $20,000+ for completing onboarding*</li> + <li>Earn an additional $5,000 by referring other market makers to the Program*</li> </ul> ), }, @@ -43,17 +44,20 @@ export class NextMarketMaker extends React.Component { }; public render(): React.ReactNode { return ( - <SiteWrap theme="dark"> + <SiteWrap theme="light"> <Hero + maxWidth="865px" + 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={<HeroActions/>} /> <Section - bgColor="dark" + bgColor="light" isFlex={true} maxWidth="1170px" > @@ -79,7 +83,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 +98,7 @@ export class NextMarketMaker extends React.Component { description={item.description} isInlineIcon={true} iconSize={240} + fontSize="medium" /> ))} </Section> @@ -120,7 +125,7 @@ export class NextMarketMaker extends React.Component { const HeroActions = () => ( <> - <Button href="https://github.com/0xProject/0x-launch-kit" isInline={true}> + <Button href="https://github.com/0xProject/0x-launch-kit" bgColor="dark" isInline={true}> Get Started </Button> </> |