aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 22:45:52 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 22:45:52 +0800
commitfa501e9c9313584d212b53282b73dc5390b29725 (patch)
treea605b7512e48301a380d31c3951b2167d5ec73d6
parent94c90cc49a556438a6eb298ddac7c0fb36163fde (diff)
downloaddexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar.gz
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar.bz2
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar.lz
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar.xz
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.tar.zst
dexon-sol-tools-fa501e9c9313584d212b53282b73dc5390b29725.zip
Edits jobs page, wip current openings
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx5
-rw-r--r--packages/website/ts/@next/pages/about/jobs.tsx110
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;
+`;