diff options
Diffstat (limited to 'packages/website/ts/@next/pages')
11 files changed, 142 insertions, 138 deletions
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx index a02e7e6fd..eb3e7210d 100644 --- a/packages/website/ts/@next/pages/community.tsx +++ b/packages/website/ts/@next/pages/community.tsx @@ -98,14 +98,12 @@ export class NextCommunity extends React.Component { Community </Heading> <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0"> - The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community. + The 0x community is a global, passionate group of crypto developers and enthusiasts. The + official channels below provide a great forum for connecting and engaging with the + community. </Paragraph> <LinkWrap> - <Button - to="#" - isWithArrow={true} - isAccentColor={true} - > + <Button to="#" isWithArrow={true} isAccentColor={true}> Join the 0x community </Button> </LinkWrap> @@ -113,7 +111,13 @@ export class NextCommunity extends React.Component { </Section> <Section isFullWidth={true}> - <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1151px"> + <WrapGrid + isTextCentered={true} + isWrapped={true} + isFullWidth={false} + isCentered={false} + maxWidth="1151px" + > {_.map(communityLinks, (link: CommunityLinkProps, index: number) => ( <CommunityLink key={`cl-${index}`} @@ -126,32 +130,37 @@ export class NextCommunity extends React.Component { </WrapGrid> </Section> - <EventsWrapper bgColor={colors.backgroundLight} isFullWidth={true} isCentered={true} isTextCentered={true}> + <EventsWrapper + bgColor={colors.backgroundLight} + isFullWidth={true} + isCentered={true} + isTextCentered={true} + > <Column maxWidth="720px"> <Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px"> Upcoming Events </Heading> <Paragraph size="medium" isCentered={true} isMuted={true}> - 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events. + 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of + the community. Want to host a meetup in your city? Reach out for help finding a venue, + connecting with local 0x mentors, and promoting your events. </Paragraph> <LinkWrap> - <Button - to="#" - isWithArrow={true} - isAccentColor={true} - > + <Button to="#" isWithArrow={true} isAccentColor={true}> Get in Touch </Button> - <Button - to="#" - isWithArrow={true} - isAccentColor={true} - > + <Button to="#" isWithArrow={true} isAccentColor={true}> Join Newsletter </Button> </LinkWrap> </Column> - <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1149px"> + <WrapGrid + isTextCentered={true} + isWrapped={true} + isFullWidth={false} + isCentered={false} + maxWidth="1149px" + > {_.map(events, (ev: EventProps, index: number) => ( <Event key={`event-${index}`} @@ -177,17 +186,17 @@ export class NextCommunity extends React.Component { public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const Event: React.FunctionComponent<EventProps> = (event: EventProps) => ( <StyledEvent> <EventIcon name="logo-mark" size={30} margin={0} /> - <EventImage src={event.imageUrl} alt=""/> + <EventImage src={event.imageUrl} alt="" /> <EventContent> <Heading color={colors.white} size="small" marginBottom="0"> {event.title} @@ -195,11 +204,7 @@ const Event: React.FunctionComponent<EventProps> = (event: EventProps) => ( <Paragraph color={colors.white} isMuted={0.65}> {event.date} </Paragraph> - <Button - color={colors.white} - href={event.signupUrl} - isWithArrow={true} - > + <Button color={colors.white} href={event.signupUrl} isWithArrow={true}> Sign Up </Button> </EventContent> diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx index ab73cc52f..3d3e219a2 100644 --- a/packages/website/ts/@next/pages/ecosystem.tsx +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -69,7 +69,7 @@ export const NextEcosystem = () => ( href={constants.URL_ECOSYSTEM_APPLY} isWithArrow={true} isAccentColor={true} - useAnchorTag={true} + shouldUseAnchorTag={true} > Apply now </Button> @@ -77,7 +77,7 @@ export const NextEcosystem = () => ( href={constants.URL_ECOSYSTEM_BLOG_POST} isWithArrow={true} isAccentColor={true} - useAnchorTag={true} + shouldUseAnchorTag={true} target="_blank" > Learn More diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 94633116f..8b3a417a9 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -3,19 +3,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled, { keyframes } from 'styled-components'; -import { colors } from 'ts/style/colors'; - import { Banner } from 'ts/@next/components/banner'; -import { Hero } from 'ts/@next/components/hero'; - import { Button } from 'ts/@next/components/button'; import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; import { Section, SectionProps } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; import { Configurator } from 'ts/@next/pages/instant/configurator'; +import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; + import { ModalContact } from '../components/modals/modal_contact'; const CONFIGURATOR_MIN_WIDTH_PX = 1050; @@ -39,7 +38,7 @@ const featuresData = [ { label: 'Get Started', onClick: getStartedClick, - useAnchorTag: true, + shouldUseAnchorTag: true, }, { label: 'Explore the Docs', diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx index 04556123e..4a3022df5 100644 --- a/packages/website/ts/@next/pages/instant/code_demo.tsx +++ b/packages/website/ts/@next/pages/instant/code_demo.tsx @@ -22,7 +22,7 @@ const CustomPre = styled.pre` border: none; } code:first-of-type { - background-color: #060D0D !important; + background-color: #060d0d !important; color: #999; min-height: 100%; text-align: center; @@ -161,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> { <Container position="relative" height="100%"> <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}> <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}> - <StyledButton> - {copyButtonText} - </StyledButton> + <StyledButton>{copyButtonText}</StyledButton> </CopyToClipboard> </Container> <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}> diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx index a1263da58..d4497ac92 100644 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -65,7 +65,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi <Container minWidth="350px"> <ConfigGeneratorSection title="Liquidity Source"> <Select - includeEmpty={false} + shouldIncludeEmpty={false} id="" value={value.orderSource} items={this._generateItems()} diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx index 23cdfcf7f..9b0e9b1d1 100644 --- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx @@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component< const hasError = !_.isEmpty(errMsg); return ( <Container height="80px"> - <Input - value={this.props.value} - onChange={this._handleChange} - placeholder="0xe99...aa8da4" - /> + <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" /> <Container marginTop="5px" isHidden={!hasError} height="25px"> <Paragraph size="small" isNoMargin={true}> {errMsg} diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx index 512ae06b4..e9f8ba83b 100644 --- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)` top: 7px; &:after { border: solid transparent; - content: " "; + content: ' '; height: 0; width: 0; position: absolute; diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx index f5b5e60c8..d4146cfb0 100644 --- a/packages/website/ts/@next/pages/instant/select.tsx +++ b/packages/website/ts/@next/pages/instant/select.tsx @@ -13,21 +13,21 @@ interface SelectProps { items: SelectItemConfig[]; emptyText?: string; onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void; - includeEmpty: boolean; + shouldIncludeEmpty: boolean; } export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, - includeEmpty, + shouldIncludeEmpty, emptyText, onChange, }) => { return ( <Container> <StyledSelect id={id} onChange={onChange}> - {includeEmpty && <option value="">{emptyText}</option>} + {shouldIncludeEmpty && <option value="">{emptyText}</option>} {items.map((item, index) => ( <option key={`${id}-item-${index}`} @@ -48,7 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({ Select.defaultProps = { emptyText: 'Select...', - includeEmpty: true, + shouldIncludeEmpty: true, }; const Container = styled.div` diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 8696cf022..ae560e8e3 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {SiteWrap} from 'ts/@next/components/siteWrap'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; -import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about'; -import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients'; -import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta'; -import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero'; +import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about'; +import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients'; +import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta'; +import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero'; import { ModalContact } from 'ts/@next/components/modals/modal_contact'; @@ -21,7 +21,7 @@ export class NextLanding extends React.Component<Props> { isContactModalOpen: false, }; public render(): React.ReactNode { - return ( + return ( <SiteWrap theme="dark"> <SectionLandingHero /> <SectionLandingAbout /> @@ -34,9 +34,9 @@ export class NextLanding extends React.Component<Props> { public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index 37a25f0ac..e2d3c75c4 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -1,25 +1,20 @@ import * as _ from 'lodash'; import * as React from 'react'; -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'; - import { ModalContact } from 'ts/@next/components/modals/modal_contact'; -import {Section} from 'ts/@next/components/newLayout'; - -import { WebsitePaths } from 'ts/types'; +import { Section } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; const offersData = [ { icon: 'supportForAllEthereumStandards', title: 'Comprehensive Tutorials', - description: 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.', + description: + 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.', }, { icon: 'generateRevenueForYourBusiness-large', @@ -34,7 +29,8 @@ const offersData = [ { icon: 'getInTouch', title: 'Personalized Support', - description: 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.', + description: + 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.', }, ]; @@ -53,14 +49,10 @@ export class NextMarketMaker extends React.Component { 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/>} + actions={<HeroActions />} /> - <Section - bgColor="light" - isFlex={true} - maxWidth="1170px" - > + <Section bgColor="light" isFlex={true} maxWidth="1170px"> <Definition title="Secure" titleSize="small" @@ -90,17 +82,17 @@ export class NextMarketMaker extends React.Component { </Section> <Section> - {_.map(offersData, (item, index) => ( - <Definition - key={`offers-${index}`} - icon={item.icon} - title={item.title} - description={item.description} - isInlineIcon={true} - iconSize={240} - fontSize="medium" - /> - ))} + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + fontSize="medium" + /> + ))} </Section> <Banner @@ -116,11 +108,11 @@ export class NextMarketMaker extends React.Component { public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const HeroActions = () => ( diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 9c3c4d0a2..73195f31c 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,20 +1,18 @@ import * as _ from 'lodash'; import * as React from 'react'; import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; - import styled from 'styled-components'; -import {Hero} from 'ts/@next/components/hero'; - import { Banner } from 'ts/@next/components/banner'; import { Button } from 'ts/@next/components/button'; -import {Definition} from 'ts/@next/components/definition'; -import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout'; +import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; +import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; +import { Heading } from 'ts/@next/components/text'; import { ModalContact } from '../components/modals/modal_contact'; -import { Heading } from 'ts/@next/components/text'; const offersData = [ { @@ -48,7 +46,8 @@ const functionalityData = [ { icon: 'buildBusiness', title: 'Build a Business', - description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', + description: + 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', }, ]; @@ -56,27 +55,32 @@ const useCaseSlides = [ { icon: 'gamingAndCollectibles', title: 'Games & Collectibles', - description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + description: + 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', }, { icon: 'predictionMarkets', title: 'Prediction Markets', - description: 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.', + description: + 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.', }, { icon: 'orderBooks', title: 'Order Books', - description: 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.', + description: + 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.', }, { icon: 'decentralisedLoans', title: 'Decentralized Loans', - description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.', + description: + 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.', }, { icon: 'stableTokens', title: 'Stable Tokens', - description: 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.', + description: + 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.', }, ]; @@ -87,27 +91,20 @@ export class NextWhy extends React.Component { isContactModalOpen: false, }; public render(): React.ReactNode { + const buildAction = ( + <Button href="/docs" isWithArrow={true} isAccentColor={true}> + Build on 0x + </Button> + ); return ( <SiteWrap theme="dark"> <Hero title="The exchange layer for the crypto economy" description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastracture that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens." - actions={ - <Button - href="/docs" - isWithArrow={true} - isAccentColor={true} - > - Build on 0x - </Button> - } + actions={buildAction} /> - <Section - bgColor="dark" - isFlex={true} - maxWidth="1170px" - > + <Section bgColor="dark" isFlex={true} maxWidth="1170px"> <Definition title="Support for all Ethereum Standards" titleSize="small" @@ -136,20 +133,22 @@ export class NextWhy extends React.Component { /> </Section> - <Section maxWidth="1170px" isFlex={true} isFullWidth={true}> - <Column> - <NavStickyWrap offsetTop="130px"> - <ChapterLink href="#benefits">Benefits</ChapterLink> - <ChapterLink href="#cases">Use Cases</ChapterLink> - <ChapterLink href="#functionality">Features</ChapterLink> - </NavStickyWrap> - </Column> + <Section maxWidth="1170px" isFlex={true} isFullWidth={true}> + <Column> + <NavStickyWrap offsetTop="130px"> + <ChapterLink href="#benefits">Benefits</ChapterLink> + <ChapterLink href="#cases">Use Cases</ChapterLink> + <ChapterLink href="#functionality">Features</ChapterLink> + </NavStickyWrap> + </Column> <Column width="55%" maxWidth="826px"> <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> <ScrollableAnchor id="benefits"> <SectionWrap> - <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle> + <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}> + What 0x offers + </SectionTitle> {_.map(offersData, (item, index) => ( <Definition @@ -166,7 +165,9 @@ export class NextWhy extends React.Component { <ScrollableAnchor id="cases"> <SectionWrap isNotRelative={true}> - <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle> + <SectionTitle size="medium" marginBottom="60px"> + Use Cases + </SectionTitle> <Slider> {_.map(useCaseSlides, (item, index) => ( <Slide @@ -182,7 +183,9 @@ export class NextWhy extends React.Component { <ScrollableAnchor id="functionality"> <SectionWrap> - <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle> + <SectionTitle size="medium" marginBottom="60px"> + Exchange Functionality + </SectionTitle> {_.map(functionalityData, (item, index) => ( <Definition @@ -198,33 +201,36 @@ export class NextWhy extends React.Component { </ScrollableAnchor> </Column> </Column> - </Section> - - <Banner - heading="Ready to get started?" - subline="Dive into our docs, or contact us if needed" - mainCta={{ text: 'Get Started', href: '/docs' }} - secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} - /> - <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </Section> + + <Banner + heading="Ready to get started?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ text: 'Get Started', href: '/docs' }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> </SiteWrap> ); } public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } interface SectionProps { isNotRelative?: boolean; } -const SectionWrap = styled.div<SectionProps>` +const SectionWrap = + styled.div < + SectionProps > + ` position: ${props => !props.isNotRelative && 'relative'}; & + & { @@ -247,10 +253,18 @@ const SectionWrap = styled.div<SectionProps>` } `; -const SectionTitle = styled(Heading)<{ isNoBorder?: boolean }>` +interface SectionTitleProps { + isNoBorder?: boolean; +} +const SectionTitle = + styled(Heading) < + SectionTitleProps > + ` position: relative; - ${props => !props.isNoBorder && ` + ${props => + !props.isNoBorder && + ` &:before { content: ''; width: 100vw; |