Teams section

6 files changed, 70 insertions, 75 deletions

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 03a906a10..ce261592f 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,15 +1,14 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 import { FilledImage } from 'ts/pages/jobs/filled_image';
 import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 
 const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -65,7 +64,7 @@ const SmallLayout = () => (
     </div>
 );
 
-const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />;
+const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
 
 const ImageGrid = () => (
     <div style={{ width: '100%', height: '100%' }}>
diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx
deleted file mode 100644
index 9dc4fe4a3..000000000
--- a/packages/website/ts/pages/jobs/bulleted_item.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-export interface BulletedItemProps {
-    bulletColor: string;
-    title: string;
-    description: string;
-    height?: number;
-}
-export const BulletedItem = (props: BulletedItemProps) => {
-    const minHeight = props.height || 150;
-    return (
-        <div className="flex" style={{ minHeight }}>
-            <svg className="flex-none px2" height="26" width="26">
-                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
-            </svg>
-            <div className="flex-auto px2">
-                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
-                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
index 30dd126d1..a00290418 100644
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-
+export type BulletedItemInfo = BulletedItemProps;
 export interface BulletedItemListProps {
-    headerText: string;
-    bulletedItems: BulletedItemProps[];
+    headerText?: string;
+    bulletedItemInfos: BulletedItemInfo[];
 }
 export const BulletedItemList = (props: BulletedItemListProps) => {
     return (
         <div className="mx-auto max-width-4">
-            <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
-                {props.headerText}
-            </div>
+            {!_.isUndefined(props.headerText) && (
+                <div
+                    className="h2 lg-py4 md-py4 sm-py3"
+                    style={{
+                        paddingLeft: 90,
+                        fontFamily: 'Roboto Mono',
+                        minHeight: '1.25em',
+                        lineHeight: 1.25,
+                    }}
+                >
+                    {props.headerText}
+                </div>
+            )}
+
             <div className="px2">
-                {_.map(props.bulletedItems, bulletedItemProps => {
+                {_.map(props.bulletedItemInfos, bulletedItemProps => {
                     return (
                         <BulletedItem
                             key={bulletedItemProps.title}
@@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => {
         </div>
     );
 };
+
+interface BulletedItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+    height?: number;
+}
+const BulletedItem = (props: BulletedItemProps) => {
+    const minHeight = props.height || 150;
+    return (
+        <div className="flex" style={{ minHeight }}>
+            <svg className="flex-none px2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
+            </svg>
+            <div className="flex-auto px2">
+                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
+                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cce594fc..f3b455379 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -62,7 +62,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 )}
                 <Values />
                 <Benefits screenWidth={this.props.screenWidth} />
-                <Teams />
+                <Teams screenWidth={this.props.screenWidth} />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index b00170877..3d953c993 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { ScreenWidths } from 'ts/types';
 
-const ITEMS_COLUMN1: BulletedItemProps[] = [
+const ITEMS_COLUMN1: BulletedItemInfo[] = [
     {
         bulletColor: '#EB5757',
         title: 'User Growth',
@@ -18,7 +19,7 @@ const ITEMS_COLUMN1: BulletedItemProps[] = [
             '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 ITEMS_COLUMN2: BulletedItemProps[] = [
+const ITEMS_COLUMN2: BulletedItemInfo[] = [
     {
         bulletColor: '#EB5757',
         title: 'Developer Tools',
@@ -32,38 +33,25 @@ const ITEMS_COLUMN2: BulletedItemProps[] = [
             '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';
 
-export const Teams = () => {
-    const isSmallScreen = false;
-    const teamHeight = 220;
-    return (
-        <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
-            <div className="mx-auto max-width-4 clearfix">
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN1, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                                height={teamHeight}
-                            />
-                        );
-                    })}
-                </div>
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN2, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                                height={teamHeight}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
+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">
+        <div className="col lg-col-6 md-col-6 col-12">
+            <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
         </div>
-    );
-};
+        <div className="col lg-col-6 md-col-6 col-12">
+            <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} />
+        </div>
+    </div>
+);
+
+const SmallLayout = () => (
+    <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} />
+);
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 37e62d23b..45bbf950f 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,10 +2,9 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -23,4 +22,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [
     },
 ];
 
-export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />;
+export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />;