aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 07:58:27 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 07:58:27 +0800
commit14767f1a513c47c616d9ed3783f6c2bbe6963fef (patch)
tree67ed53d307708622ad6ac799c2ded021d0c8ebe7
parentd34d8cac5ddcee5a1583445f2e571b8eac590e58 (diff)
downloaddexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar.gz
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar.bz2
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar.lz
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar.xz
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.tar.zst
dexon-sol-tools-14767f1a513c47c616d9ed3783f6c2bbe6963fef.zip
Prettify banner
-rw-r--r--packages/website/ts/@next/components/banner.tsx63
1 files changed, 26 insertions, 37 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 2620b92ef..40ec22c3f 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;
@@ -28,44 +28,30 @@ 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 &&
- <Button
- color={colors.white}
- isTransparent={false}
- href={mainCta.href}
- >
+ {mainCta && (
+ <Button color={colors.white} isTransparent={false} href={mainCta.href}>
{mainCta.text}
</Button>
- }
+ )}
- {secondaryCta &&
+ {secondaryCta && (
<Button
color={colors.white}
href={secondaryCta.href}
@@ -74,7 +60,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
>
{secondaryCta.text}
</Button>
- }
+ )}
</ButtonWrap>
</Column>
</CustomSection>
@@ -101,9 +87,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 +102,8 @@ const ButtonWrap = styled.div`
}
@media (max-width: 768px) {
- a, button {
+ a,
+ button {
display: block;
width: 220px;
}
@@ -132,15 +117,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) {