Tweak banner

packages/website/ts/components/banner.tsx

@@ -31,11 +31,11 @@ interface BorderProps {
 export const Banner: React.StatelessComponent<Props> = (props: Props) => {
     const { heading, subline, mainCta, secondaryCta } = props;
     return (
-        <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0">
+        <CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0" alignItems="center">
             <Border />
             <Border isBottom={true} />
 
-            <Column>
+            <Column maxWidth="455px">
                 <CustomHeading>{heading}</CustomHeading>
 
                 {subline && (
@@ -77,6 +77,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
 const CustomSection = styled(Section)`
     color: ${colors.white};
     margin-top: 30px;
+    margin-top: 0;
 
     @media (max-width: 900px) {
         text-align: center;
@@ -93,8 +94,11 @@ const CustomSection = styled(Section)`
 
 const CustomHeading = styled.h2`
     font-size: 34px;
+    line-height: normal;
     font-weight: 400;
-    margin-bottom: 10px @media (max-width: 768px) {
+    margin-bottom: 10px;
+
+    @media (max-width: 768px) {
         font-size: 30px;
     }
 `;

packages/website/ts/components/newLayout.tsx

@@ -32,12 +32,14 @@ export interface SectionProps extends WrapProps {
     maxWidth?: string;
     bgColor?: 'dark' | 'light' | string;
     children: any;
+    alignItems?: string;
 }
 
 export interface FlexProps {
     padding?: string;
     isFlex?: boolean;
     flexBreakpoint?: string;
+    alignItems?: string;
 }
 
 export interface ColumnProps {
@@ -76,6 +78,7 @@ export const FlexWrap = styled.div<FlexProps>`
     @media (min-width: ${props => props.flexBreakpoint || '768px'}) {
         display: ${props => props.isFlex && 'flex'};
         justify-content: ${props => props.isFlex && 'space-between'};
+        align-items: ${props => props.alignItems};
     }
 `;