Edits jobs page, wip current openings

2 files changed, 60 insertions, 55 deletions

diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index cc1f725ba..4c5afd318 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -53,7 +53,10 @@ export const Column = styled.div<ColumnProps>`
 
     @media (max-width: 768px) {
         width: 100%;
-        margin-bottom: 60px;
+
+        & + & {
+            margin-top: 60px;
+        }
     }
 `;
 
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 0fa066223..b1b9752cf 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/@next/pages/about/jobs.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Link } from 'ts/@next/components/link';
 import { Separator } from 'ts/@next/components/separator';
 import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -44,85 +44,74 @@ export const NextAboutJobs = () => (
         linkLabel="Our mission and values"
         linkUrl="/mission"
     >
-        <Section bgColor="#F3F6F4" isPadLarge={true}>
-            <Wrap>
-                <Column colWidth="1/3">
-                    <Heading size="medium" isNoMargin={true}>
+        <Section bgColor="#F3F6F4" isFlex={true} maxWidth="1170px">
+                <Column maxWidth="442px">
+                    <Heading size="medium" marginBottom="30px">
                         Powered by a Diverse Worldwide Community
                     </Heading>
-                </Column>
-            </Wrap>
-            <Wrap>
-                <Column colWidth="1/3">
+
                     <Paragraph>
                         We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world.
                     </Paragraph>
                 </Column>
 
-                <Column colWidth="2/3">
-                    <img src="/images/@next/jobs/map@2x.png" height="365" alt="Map of community"/>
+                <Column maxWidth="600px">
+                    <ImageWrap>
+                        <img src="/images/@next/jobs/map@2x.png" height="365" alt="Map of community"/>
+                    </ImageWrap>
                 </Column>
-            </Wrap>
         </Section>
 
-        <Section isPadLarge={true}>
-            <Wrap>
+        <Section isFlex={true} maxWidth="1170px">
                 <Column colWidth="1/3">
                     <Heading size="medium">Benefits</Heading>
                 </Column>
 
-                <Column colWidth="2/3">
-                    <Wrap>
-                        <Column>
-                            <BenefitsList>
-                                <li>Comprehensive Insurance</li>
-                                <li>Unlimited Vacation</li>
-                                <li>Meals and snacks provided daily</li>
-                                <li>Flexible hours and liberal  work-from-home-policy</li>
-                                <li>Supportive of remote working</li>
-                                <li>Transportation, phone, and wellness expense</li>
-                                <li>Relocation assistance</li>
-                                <li>Optional team excursions</li>
-                                <li>Competitive salary</li>
-                                <li>Cryptocurrency based compensation</li>
-                            </BenefitsList>
-                        </Column>
-                    </Wrap>
+                <Column maxWidth="826px">
+                    <BenefitsList>
+                        <li>Comprehensive Insurance</li>
+                        <li>Unlimited Vacation</li>
+                        <li>Meals and snacks provided daily</li>
+                        <li>Flexible hours and liberal  work-from-home-policy</li>
+                        <li>Supportive of remote working</li>
+                        <li>Transportation, phone, and wellness expense</li>
+                        <li>Relocation assistance</li>
+                        <li>Optional team excursions</li>
+                        <li>Competitive salary</li>
+                        <li>Cryptocurrency based compensation</li>
+                    </BenefitsList>
                 </Column>
-            </Wrap>
         </Section>
 
-        <Section isPadLarge={true}>
-            <Wrap>
-                <Column colWidth="1/3">
-                    <Heading size="medium">Current<br/>Openings</Heading>
-                </Column>
+        <Section isFlex={true} maxWidth="1170px">
+            <Column>
+                <Heading size="medium">Current<br/>Openings</Heading>
+            </Column>
+
+            <Column maxWidth="826px">
 
-                <Column colWidth="2/3">
                     {_.map(positions, (position, index) => (
                         <Position key={`position-${index}`} position={position} />
                     ))}
-                </Column>
-            </Wrap>
+            </Column>
         </Section>
     </AboutPageLayout>
 );
 
 const Position = ({ position }) => (
-    <>
-        <Wrap>
-            <Column colWidth="1/3">
-                <Heading size="small">{position.title}</Heading>
-            </Column>
-            <Column colWidth="1/3">
-                <Paragraph isMuted={true}>{position.location}</Paragraph>
-            </Column>
-            <Column colWidth="1/3">
-                <Paragraph><Link href={position.href}>Apply</Link></Paragraph>
-            </Column>
-        </Wrap>
-        <Separator/>
-    </>
+    <FlexWrap>
+        <Column width="30%">
+            <Heading size="small">{position.title}</Heading>
+        </Column>
+
+        <StyledColumn width="50%">
+            <Paragraph isMuted={true}>{position.location}</Paragraph>
+        </Column>
+
+        <Column colWidth="1/3">
+            <Paragraph><Link href={position.href}>Apply</Link></Paragraph>
+        </Column>
+    </FlexWrap>
 );
 
 const BenefitsList = styled.ul`
@@ -135,3 +124,16 @@ const BenefitsList = styled.ul`
         margin-bottom: 1em;
     }
 `;
+
+const ImageWrap = styled.figure`
+    @media (min-width: 768px) {
+        height: 600px;
+        padding-left: 60px;
+        display: flex;
+        align-items: flex-end;
+    }
+`;
+
+const StyledColumn = styled(Column)`
+    flex-shrink: 0;
+`;