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') 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 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') 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 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') 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 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') 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 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') 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 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') 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 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') 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 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') 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