diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-13 01:38:41 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-13 01:44:03 +0800 |
commit | 7080f0c35a3e5c84fa2907c6feb0610c699c2823 (patch) | |
tree | 90162e21d572a2af9ffdb1bfaf727f1f3e6e1e28 /packages/website/ts/pages/jobs/benefits.tsx | |
parent | 679d60cd5a5debcacff42c38967c1f8b7d972882 (diff) | |
download | dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar.gz dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar.bz2 dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar.lz dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar.xz dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.tar.zst dexon-sol-tools-7080f0c35a3e5c84fa2907c6feb0610c699c2823.zip |
Implement small open positions
Diffstat (limited to 'packages/website/ts/pages/jobs/benefits.tsx')
-rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 57 |
1 files changed, 42 insertions, 15 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index a7cc23503..b27c68a5b 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,40 +1,45 @@ import * as _ from 'lodash'; import * as React from 'react'; -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 { 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 IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [ +const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ { bulletColor: '#6FCF97', - title: 'Ethics/Doing the right thing', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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', - title: 'Consistently ship', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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: 'Focus on long term impact', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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: '#6FCF97', - title: 'Test test yo', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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', - title: 'Waddle Waddle', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', + 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 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; @@ -47,11 +52,14 @@ export const Benefits = (props: BenefitsProps) => ( ); const LargeLayout = () => ( - <div className="flex" style={{ height: 937 }}> + <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}> <div style={{ width: '43%', height: '100%' }}> <ImageGrid /> </div> - <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}> + <div + className="pr4" + style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }} + > <BenefitsList /> </div> </div> @@ -64,7 +72,26 @@ const SmallLayout = () => ( </div> ); -const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />; +export const BenefitsList = () => { + return ( + <div> + <HeaderItem headerText={HEADER_TEXT} /> + {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))} + </div> + ); +}; +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%' }}> |