Prettify banner

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) {