diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 21:28:33 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 21:28:33 +0800 |
commit | 0df51c37d172ec1c5b80c849869aaba665fef194 (patch) | |
tree | d3bf98c8651a0a8c8d0459a192ae9a4899cb9d44 /packages/website/ts/@next/components/banner.tsx | |
parent | bb2581612a2d4935ab58ec91fb024edfafeb954e (diff) | |
download | dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar.gz dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar.bz2 dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar.lz dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar.xz dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.tar.zst dexon-0x-contracts-0df51c37d172ec1c5b80c849869aaba665fef194.zip |
Edits banner, types newlayout
Diffstat (limited to 'packages/website/ts/@next/components/banner.tsx')
-rw-r--r-- | packages/website/ts/@next/components/banner.tsx | 97 |
1 files changed, 72 insertions, 25 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx index 9045a49f3..5b8c109fb 100644 --- a/packages/website/ts/@next/components/banner.tsx +++ b/packages/website/ts/@next/components/banner.tsx @@ -3,11 +3,13 @@ import styled from 'styled-components'; import {colors} from 'ts/style/colors'; -import {Button, ButtonWrap} from 'ts/@next/components/button'; -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import {Button, Link} from 'ts/@next/components/button'; +import {Wrap, WrapCentered } from 'ts/@next/components/layout'; import {Paragraph, Heading} from 'ts/@next/components/text'; import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import {Column, Section} from 'ts/@next/components/newLayout'; + interface Props { heading?: string; subline?: string; @@ -33,37 +35,82 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => { secondaryCta, } = props; return ( - <Section bgColor={colors.brandDark} isRelative={true}> + <CustomSection + bgColor="light" + isFlex={true} + flexBreakpoint="900px" + paddingMobile="120px 0" + > <Border/> - <Wrap> - <CustomColumn colWidth="1/2" isPadLarge={true}> - <WrapCentered padding={[30, 0]}> - <CustomHeading isNoMargin={true}>{heading}</CustomHeading> - {subline && <Paragraph isMuted={0.5} isNoMargin={true}>{subline}</Paragraph>} - </WrapCentered> - </CustomColumn> - <CustomColumn colWidth="1/2" isPadLarge={true}> - <WrapCentered padding={[30, 0]}> - <ButtonWrap> - {mainCta && <Button href={mainCta.href}>{mainCta.text}</Button>} - {secondaryCta && <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button>} - </ButtonWrap> - </WrapCentered> - </CustomColumn> - </Wrap> <Border isBottom={true} /> - </Section> + + <Column colWidth="1/2" isPadLarge={true}> + <CustomHeading isNoMargin={true}>{heading}</CustomHeading> + + {subline && + <Paragraph isMuted={0.5} isNoMargin={true}> + {subline} + </Paragraph> + } + </Column> + <Column colWidth="1/2" isPadLarge={true}> + <ButtonWrap> + {mainCta && + <Link href={mainCta.href}>{mainCta.text}</Link> + } + + {secondaryCta && + <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button> + } + </ButtonWrap> + </Column> + </CustomSection> ); }; -const CustomColumn = styled(Column)` - padding: 95px 30px; +const CustomSection = styled(Section)` + @media (max-width: 900px) { + text-align: center; + + p { + margin-bottom: 30px; + } + + div:last-child { + margin-bottom: 0; + } + } `; -const CustomHeading = styled(Heading)` - --defaultHeading: 1.888888889rem; +const CustomHeading = styled.h2` + font-size: 34px; font-weight: 400; - margin-bottom: 10px; + margin-bottom: 10px + + @media (max-width: 768px) { + font-size: 30px; + } +`; + +const ButtonWrap = styled.div` + display: inline-block; + + @media (min-width: 768px) { + * + * { + margin-left: 15px; + } + } + + @media (max-width: 768px) { + a, button { + display: block; + width: 220px; + } + + * + * { + margin-top: 15px; + } + } `; // Note let's refactor this |