Edits banner, types newlayout

3 files changed, 83 insertions, 29 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
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index db6c5d5c2..3f14b59bd 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -16,7 +16,6 @@ interface ButtonInterface {
     isWithArrow?: boolean;
     isAccentColor?: boolean;
     hasIcon?: boolean | string;
-    isInline?: boolean;
     href?: string;
     onClick?: () => any;
     theme?: {
@@ -27,7 +26,7 @@ interface ButtonInterface {
 export const Button = styled.button<ButtonInterface>`
     appearance: none;
     border: ${props => !props.isNoBorder && `1px solid transparent`};
-    display: ${props => props.isInline && 'inline-block'};
+    display: inline-block;
     background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
     border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index fc2bae46b..107d96006 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -24,6 +24,7 @@ interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
     isFlex?: boolean;
+    paddingMobile?: string;
     flexBreakpoint?: string;
     maxWidth?: string;
     bgColor?: 'dark' | 'light' | string;
@@ -74,17 +75,24 @@ const SectionBase = styled.section<SectionProps>`
     margin: 0 auto;
     padding: ${props => props.isPadded && '120px 0'};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
+    position: relative;
+    overflow: hidden;
 
     @media (max-width: 768px) {
-        padding: ${props => props.isPadded && '40px 0'};
+        padding: ${props => props.isPadded && (props.paddingMobile || '40px 0')};
     }
 `;
 
 const Wrap = styled(FlexWrap)<WrapProps>`
     width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
-    margin: 0 auto;
     text-align: ${props => props.isTextCentered && 'center'};
+    margin: 0 auto;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+        width: calc(100% - 60px);
+    }
 `;
 
 export const WrapGrid = styled(Wrap)<WrapGridProps>`