diff options
Diffstat (limited to 'packages/website/ts/@next/components')
3 files changed, 45 insertions, 59 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 2620b92ef..982e764af 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -3,11 +3,11 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import {Button} from 'ts/@next/components/button'; -import {ThemeInterface} from 'ts/@next/components/siteWrap'; -import {Paragraph} from 'ts/@next/components/text'; +import { Button } from 'ts/@next/components/button'; +import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import { Paragraph } from 'ts/@next/components/text'; -import {Column, Section} from 'ts/@next/components/newLayout'; +import { Column, Section } from 'ts/@next/components/newLayout'; interface Props { heading?: string; @@ -21,6 +21,7 @@ interface CTAButton { text: string; href?: string; onClick?: () => void; + shouldOpenInNewTab?: boolean; } interface BorderProps { @@ -28,44 +29,35 @@ interface BorderProps { } export const Banner: React.StatelessComponent<Props> = (props: Props) => { - const { - heading, - subline, - mainCta, - secondaryCta, - } = props; + const { heading, subline, mainCta, secondaryCta } = props; return ( - <CustomSection - bgColor="light" - isFlex={true} - flexBreakpoint="900px" - paddingMobile="120px 0" - > - <Border/> + <CustomSection bgColor="light" isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0"> + <Border /> <Border isBottom={true} /> <Column> <CustomHeading>{heading}</CustomHeading> - {subline && + {subline && ( <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}> {subline} </Paragraph> - } + )} </Column> <Column> <ButtonWrap> - {mainCta && + {mainCta && ( <Button color={colors.white} isTransparent={false} href={mainCta.href} + target={mainCta.shouldOpenInNewTab ? '_blank' : ''} > {mainCta.text} </Button> - } + )} - {secondaryCta && + {secondaryCta && ( <Button color={colors.white} href={secondaryCta.href} @@ -74,7 +66,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { > {secondaryCta.text} </Button> - } + )} </ButtonWrap> </Column> </CustomSection> @@ -101,9 +93,7 @@ const CustomSection = styled(Section)` const CustomHeading = styled.h2` font-size: 34px; font-weight: 400; - margin-bottom: 10px - - @media (max-width: 768px) { + margin-bottom: 10px @media (max-width: 768px) { font-size: 30px; } `; @@ -118,7 +108,8 @@ const ButtonWrap = styled.div` } @media (max-width: 768px) { - a, button { + a, + button { display: block; width: 220px; } @@ -132,15 +123,19 @@ const ButtonWrap = styled.div` // Note let's refactor this // is it absolutely necessary to have a stateless component // to pass props down into the styled icon? -const Border = styled.div<BorderProps>` +const Border = + styled.div < + BorderProps > + ` position: absolute; - background-image: ${props => props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);' }; - background-position: ${props => props.isBottom ? 'left top' : 'left bottom' }; + background-image: ${props => + props.isBottom ? 'url(/images/@next/banner/bottomofcta.png);' : 'url(/images/@next/banner/topofcta.png);'}; + background-position: ${props => (props.isBottom ? 'left top' : 'left bottom')}; left: 0; width: calc(100% + 214px); height: 40px; - top: ${props => !props.isBottom && 0 }; - bottom: ${props => props.isBottom && 0 }; + top: ${props => !props.isBottom && 0}; + bottom: ${props => props.isBottom && 0}; transform: translate(-112px); @media (max-width: 768px) { diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx index 1677d3c08..886cee44a 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -1,22 +1,22 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import {Heading, Paragraph} from 'ts/@next/components/text'; +import { Heading, Paragraph } from 'ts/@next/components/text'; import { WebsitePaths } from 'ts/types'; const navData = [ - { - title: '0x Instant', - description: 'Simple crypto purchasing', - url: WebsitePaths.Instant, - }, - { - title: '0x Launch kit', - description: 'Build on the 0x protocol', - url: WebsitePaths.LaunchKit, - }, + { + title: '0x Instant', + description: 'Simple crypto purchasing', + url: WebsitePaths.Instant, + }, + { + title: '0x Launch Kit', + description: 'Build on the 0x protocol', + url: WebsitePaths.LaunchKit, + }, ]; export const DropdownProducts: React.FunctionComponent<{}> = () => ( @@ -24,25 +24,15 @@ export const DropdownProducts: React.FunctionComponent<{}> = () => ( {_.map(navData, (item, index) => ( <li key={`productLink-${index}`}> <Link to={item.url}> - <Heading - asElement="h3" - color="inherit" - isNoMargin={true} - size="small" - > + <Heading asElement="h3" color="inherit" isNoMargin={true} size="small"> {item.title} </Heading> - {item.description && - <Paragraph - color="inherit" - isNoMargin={true} - size="small" - isMuted={0.5} - > + {item.description && ( + <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}> {item.description} </Paragraph> - } + )} </Link> </li> ))} diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 9c2c29446..e7346a797 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -5,6 +5,7 @@ import { Button } from 'ts/@next/components/button'; import { Icon, InlineIconWrap } from 'ts/@next/components/icon'; import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; import { Paragraph } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; interface FigureProps { value: string; @@ -25,7 +26,7 @@ export const SectionLandingAbout = () => ( instruments to assets that could have never existed before. </Paragraph> - <Button href="#" isWithArrow={true} isAccentColor={true}> + <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> Discover how developers use 0x </Button> |