Implement small open positions

1 files changed, 36 insertions, 6 deletions

diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index 465bae7f4..dcb457d06 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -2,10 +2,11 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
 import { ScreenWidths } from 'ts/types';
 
-const ITEMS_COLUMN1: BulletedItemInfo[] = [
+const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [
     {
         bulletColor: '#EB5757',
         title: 'User Growth',
@@ -19,7 +20,7 @@ const ITEMS_COLUMN1: BulletedItemInfo[] = [
             '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: BulletedItemInfo[] = [
+const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [
     {
         bulletColor: '#EB5757',
         title: 'Developer Tools',
@@ -34,6 +35,7 @@ const ITEMS_COLUMN2: BulletedItemInfo[] = [
     },
 ];
 const HEADER_TEXT = 'Our Teams';
+const MINIMUM_ITEM_HEIGHT = 240;
 
 export interface TeamsProps {
     screenWidth: ScreenWidths;
@@ -44,14 +46,42 @@ export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.
 const LargeLayout = () => (
     <div className="mx-auto max-width-4 clearfix pb4">
         <div className="col lg-col-6 md-col-6 col-12">
-            <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))}
         </div>
         <div className="col lg-col-6 md-col-6 col-12">
-            <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} />
+            <HeaderItem headerText=" " />
+            {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))}
         </div>
     </div>
 );
 
 const SmallLayout = () => (
-    <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} />
+    <div>
+        <HeaderItem headerText={HEADER_TEXT} />
+        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps =>
+            React.createElement(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}>
+                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+            </ListItem>
+            <ListItem>
+                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                    {description}
+                </div>
+            </ListItem>
+        </div>
+    );
+};