diff options
Diffstat (limited to 'packages/website/ts/pages/jobs/values.tsx')
-rw-r--r-- | packages/website/ts/pages/jobs/values.tsx | 38 |
1 files changed, 35 insertions, 3 deletions
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx index 45bbf950f..abacafdba 100644 --- a/packages/website/ts/pages/jobs/values.tsx +++ b/packages/website/ts/pages/jobs/values.tsx @@ -2,9 +2,10 @@ 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'; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ { bulletColor: '#6FCF97', title: 'Ethics/Doing the right thing', @@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ }, ]; -export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +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 => React.createElement(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}> + <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div> + </ListItem> + <ListItem> + <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}> + {description} + </div> + </ListItem> + </div> + ); +}; |