diff options
| -rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 11 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/market_maker.tsx | 1 |
2 files changed, 9 insertions, 3 deletions
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) => ( <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} @@ -42,6 +43,10 @@ export const Hero = (props: Props) => ( </Section> ); +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={<HeroActions/>} |