Benefits and values sections

8 files changed, 115 insertions, 284 deletions

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 006facc83..c8024068f 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,109 +1,139 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
 import { FilledImage } from 'ts/components/ui/filled_image';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/Text';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
-const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [
-    {
-        bulletColor: '#6FCF97',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
-    {
-        bulletColor: '#56CCF2',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
+const BENEFITS = [
+    'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
+    'Unlimited vacation. Three weeks per year minimum.',
+    'Flexible hours and libteral work-from-home-policy.',
+    'Relocation Assistance.',
+    'Whole team offsites and community / hackathon events (often international).',
+    'Monthly transportation and phone reimbursement.',
+    'Meals and snacks prvided in-office daily',
+];
+
+interface Value {
+    iconSrc: string;
+    text: string;
+}
+const VALUES: Value[] = [
     {
-        bulletColor: '#EB5757',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+        iconSrc: 'images/jobs/heart-icon.svg',
+        text: 'Do the right thing',
     },
     {
-        bulletColor: '#6FCF97',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+        iconSrc: 'images/jobs/ship-icon.svg',
+        text: 'Consistently ship',
     },
     {
-        bulletColor: '#56CCF2',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
+        iconSrc: 'images/jobs/calendar-icon.svg',
+        text: 'Focus on long term impact',
     },
 ];
-const LARGE_LAYOUT_HEIGHT = 937;
-const LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT = 205;
-const HEADER_TEXT = 'Benefits';
-const BENEFIT_ITEM_MIN_HEIGHT = 150;
 
 export interface BenefitsProps {
     screenWidth: ScreenWidths;
 }
 
-export const Benefits = (props: BenefitsProps) => (
-    <div style={{ backgroundColor: colors.jobsPageBackground }}>
-        {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
-    </div>
-);
-
-const LargeLayout = () => (
-    <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}>
-        <div style={{ width: '43%', height: '100%' }}>
-            <ImageGrid />
-        </div>
-        <div
-            className="pr4"
-            style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }}
-        >
-            <BenefitsList />
-        </div>
-    </div>
-);
+export const Benefits = (props: BenefitsProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    return (
+        <Container className="flex flex-column items-center py4" backgroundColor={colors.white}>
+            {!isSmallScreen ? (
+                <Container className="flex" maxWidth="800px">
+                    <BenefitsList />
+                    <Container marginLeft="200px">
+                        <ValuesList />
+                    </Container>
+                </Container>
+            ) : (
+                <Container className="flex-column pl3">
+                    <BenefitsList />
+                    <Container marginTop="50px">
+                        <ValuesList />
+                    </Container>
+                </Container>
+            )}
+        </Container>
+    );
+};
 
-const SmallLayout = () => (
-    <div>
-        <FilledImage src={_.head(IMAGE_PATHS)} />
-        <BenefitsList />
-    </div>
+const Header: React.StatelessComponent = ({ children }) => (
+    <Container marginBottom="51px">
+        <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
+            {children}
+        </Text>
+    </Container>
 );
 
-export const BenefitsList = () => {
+const BenefitsList = () => {
     return (
-        <div>
-            <HeaderItem headerText={HEADER_TEXT} />
-            {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)}
-        </div>
+        <Container maxWidth="360px">
+            <Header>Benefits</Header>
+            {_.map(BENEFITS, benefit => <BenefitItem description={benefit} />)}
+        </Container>
     );
 };
 interface BenefitItemProps {
-    bulletColor: string;
     description: string;
 }
 
-const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ bulletColor, description }) => (
-    <div style={{ minHeight: BENEFIT_ITEM_MIN_HEIGHT }}>
-        <ListItem bulletColor={bulletColor}>
-            <div style={{ fontSize: 16, lineHeight: 1.5 }}>{description}</div>
-        </ListItem>
-    </div>
-);
-
-const ImageGrid = () => (
-    <div style={{ width: '100%', height: '100%' }}>
-        <div className="flex" style={{ height: '67%' }}>
-            <FilledImage src={IMAGE_PATHS[0]} />
-        </div>
-        <div className="clearfix" style={{ height: '33%' }}>
-            <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
-                <FilledImage src={IMAGE_PATHS[1]} />
-            </div>
-            <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
-                <FilledImage src={IMAGE_PATHS[2]} />
+const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
+    <Container marginBottom="30px">
+        <div className="flex">
+            <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} />
+            <div className="flex-auto">
+                <Text fontSize="14px" lineHeight="24px">
+                    {description}
+                </Text>
             </div>
         </div>
-    </div>
+    </Container>
 );
+
+const openMissionAndValuesBlogPost = () => {
+    utils.openUrl(constants.URL_MISSION_AND_VALUES_BLOG_POST);
+};
+const ValuesList = () => {
+    return (
+        <Container maxWidth="360px">
+            <Header>Our Values</Header>
+            {_.map(VALUES, value => <ValueItem {...value} />)}
+            <Text fontSize="14px" lineHeight="26px">
+                We care deeply about our mission and encourage you to{' '}
+                <a
+                    style={{ color: colors.mediumBlue }}
+                    target="_blank"
+                    href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+                >
+                    read more here
+                </a>.
+            </Text>
+        </Container>
+    );
+};
+
+type ValueItemProps = Value;
+const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
+    return (
+        <Container marginBottom="45px">
+            <div className="flex items-center">
+                <Image className="flex-none pr2" width="20px" src={iconSrc} />
+                <div className="flex-auto">
+                    <Text fontSize="14px" lineHeight="24px" fontWeight="bold">
+                        {text}
+                    </Text>
+                </div>
+            </div>
+        </Container>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cd7a08eb..49d6422f5 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -11,8 +11,6 @@ import { Join0x } from 'ts/pages/jobs/join_0x';
 import { Mission } from 'ts/pages/jobs/mission';
 import { OpenPositions } from 'ts/pages/jobs/open_positions';
 import { PhotoRail } from 'ts/pages/jobs/photo_rail';
-import { Teams } from 'ts/pages/jobs/teams';
-import { Values } from 'ts/pages/jobs/values';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
deleted file mode 100644
index ac214904c..000000000
--- a/packages/website/ts/pages/jobs/list/header_item.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-
-export interface HeaderItemProps {
-    headerText?: string;
-}
-export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => {
-    return (
-        <div className="h2 lg-py4 md-py4 sm-py3">
-            <ListItem>
-                <Text
-                    fontFamily="Roboto Mono"
-                    fontSize="24px"
-                    lineHeight="1.25"
-                    minHeight="1.25em"
-                    fontColor={colors.black}
-                >
-                    {headerText}
-                </Text>
-            </ListItem>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx
deleted file mode 100644
index 192433d39..000000000
--- a/packages/website/ts/pages/jobs/list/list_item.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import { Circle } from 'ts/components/ui/circle';
-
-export interface ListItemProps {
-    bulletColor?: string;
-}
-export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => {
-    return (
-        <div className="flex items-center">
-            <Circle className="flex-none lg-px2 md-px2 sm-pl2" diameter={26} fillColor={bulletColor || 'transparent'} />
-            <div className="flex-auto px2">{children}</div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index a1e6881c9..68e095436 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -10,7 +10,7 @@ export interface MissionProps {
 }
 export const Mission = (props: MissionProps) => {
     const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const image = <img src="/images/jobs/map.png" style={{ width: 500, height: 280 }} />;
+    const image = <img src="/images/jobs/world-map.svg" style={{ maxWidth: 500, maxHeight: 280 }} />;
     const missionStatementClassName = isSmallScreen ? 'center' : undefined;
     const missionStatement = (
         <Container className={missionStatementClassName} maxWidth="388px">
@@ -38,7 +38,7 @@ export const Mission = (props: MissionProps) => {
                     <Container marginLeft="115px">{missionStatement}</Container>
                 </Container>
             ) : (
-                <Container className="flex flex-column items-center" maxWidth="1200px">
+                <Container className="flex flex-column items-center">
                     {missionStatement}
                     <Container marginTop="40px">{image}</Container>
                 </Container>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index e789795c1..c9fe987e4 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -5,8 +5,6 @@ import * as React from 'react';
 
 import { Retry } from 'ts/components/ui/retry';
 import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
@@ -71,7 +69,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
     private _renderList(): React.ReactNode {
         return (
             <div style={{ backgroundColor: colors.jobsPageBackground }}>
-                <HeaderItem headerText={HEADER_TEXT} />
                 {_.map(this.state.jobInfos, jobInfo => (
                     <JobInfoListItem
                         key={jobInfo.id}
@@ -86,7 +83,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
     private _renderTable(): React.ReactNode {
         return (
             <div>
-                <HeaderItem headerText={HEADER_TEXT} />
                 <Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
                     <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                         <TableRow>
@@ -174,14 +170,12 @@ export interface JobInfoListItemProps {
 
 const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => (
     <div className="mb3" onClick={onClick}>
-        <ListItem>
-            <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}>
-                {title + ' ›'}
-            </Text>
-            <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}>
-                {description}
-            </Text>
-        </ListItem>
+        <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}>
+            {title + ' ›'}
+        </Text>
+        <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}>
+            {description}
+        </Text>
     </div>
 );
 
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
deleted file mode 100644
index 80b036396..000000000
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths } from 'ts/types';
-
-const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [
-    {
-        bulletColor: '#EB5757',
-        title: 'User Growth',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
-    {
-        bulletColor: '#EB5757',
-        title: 'Governance',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
-];
-const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [
-    {
-        bulletColor: '#EB5757',
-        title: 'Developer Tools',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
-    {
-        bulletColor: '#EB5757',
-        title: 'Marketing',
-        description:
-            'Donec eget auctor mauris, a imperdiet ante. Ut a tellus ullamcorper, pharetra nibh sed, dignissim mauris. Quisque vel magna vitae nisi scelerisque commodo sed eget dolor. Maecenas vehicula orci',
-    },
-];
-const HEADER_TEXT = 'Our Teams';
-const MINIMUM_ITEM_HEIGHT = 240;
-
-export interface TeamsProps {
-    screenWidth: ScreenWidths;
-}
-
-export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />);
-
-const LargeLayout = () => (
-    <div className="mx-auto max-width-4 clearfix pb4">
-        <div className="col lg-col-6 md-col-6 col-12">
-            <HeaderItem headerText={HEADER_TEXT} />
-            {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => <TeamItem {...teamItemProps} />)}
-        </div>
-        <div className="col lg-col-6 md-col-6 col-12">
-            <HeaderItem headerText=" " />
-            {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)}
-        </div>
-    </div>
-);
-
-const SmallLayout = () => (
-    <div>
-        <HeaderItem headerText={HEADER_TEXT} />
-        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => (
-            <TeamItem {...teamItemProps} />
-        ))}
-    </div>
-);
-
-interface TeamItemProps {
-    bulletColor: string;
-    title: string;
-    description: string;
-}
-
-export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor, title, description }) => {
-    return (
-        <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}>
-            <ListItem bulletColor={bulletColor}>
-                <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}>
-                    {title}
-                </Text>
-            </ListItem>
-            <ListItem>
-                <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}>
-                    {description}
-                </Text>
-            </ListItem>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
deleted file mode 100644
index c7c4d5726..000000000
--- a/packages/website/ts/pages/jobs/values.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { HeaderItem } from 'ts/pages/jobs/list/header_item';
-import { ListItem } from 'ts/pages/jobs/list/list_item';
-import { colors } from 'ts/style/colors';
-
-const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [
-    {
-        bulletColor: '#6FCF97',
-        title: 'Ethics/Doing the right thing',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-        bulletColor: '#56CCF2',
-        title: 'Consistently ship',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-        bulletColor: '#EB5757',
-        title: 'Focus on long term impact',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-];
-
-const HEADER_TEXT = 'Our Values';
-const VALUE_ITEM_MIN_HEIGHT = 150;
-
-export const Values = () => {
-    return (
-        <div className="mx-auto max-width-4">
-            <HeaderItem headerText={HEADER_TEXT} />
-            {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => <ValueItem {...valueItemProps} />)}
-        </div>
-    );
-};
-
-interface ValueItemProps {
-    bulletColor: string;
-    title: string;
-    description: string;
-}
-
-export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColor, title, description }) => {
-    return (
-        <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}>
-            <ListItem bulletColor={bulletColor}>
-                <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}>
-                    {title}
-                </Text>
-            </ListItem>
-            <ListItem>
-                <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}>
-                    {description}
-                </Text>
-            </ListItem>
-        </div>
-    );
-};