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