diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-09 06:27:11 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-13 01:41:08 +0800 |
commit | 087aaa2f948391da70a4d5b53b8e7e301288ab5f (patch) | |
tree | 634ee997f095ba200dc64ea21c063c7714541fd9 /packages/website/ts/pages/jobs/mission.tsx | |
parent | 474b93a22f9545fe9bcabe5a80e6a057e66ab286 (diff) | |
download | dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar.gz dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar.bz2 dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar.lz dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar.xz dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.tar.zst dexon-sol-tools-087aaa2f948391da70a4d5b53b8e7e301288ab5f.zip |
Polish mission section and photo section
Diffstat (limited to 'packages/website/ts/pages/jobs/mission.tsx')
-rw-r--r-- | packages/website/ts/pages/jobs/mission.tsx | 73 |
1 files changed, 42 insertions, 31 deletions
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a1d0dc927..a3584e5f6 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -1,43 +1,54 @@ -import { colors } from '@0xproject/react-shared'; - import * as React from 'react'; -export const Mission = () => { - const isSmallScreen = false; - return ( - <div className="container lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> - <div className="mx-auto clearfix"> - {!isSmallScreen && <WorldImage />} +import { FilledImage } from 'ts/pages/jobs/filled_image'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; + +export interface MissionProps { + screenWidth: ScreenWidths; +} +export const Mission = (props: MissionProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const image = ( + <div className="col lg-col-6 md-col-6 col-12 sm-py2 px2 center"> + <img src="/images/jobs/map.png" style={{ width: '100%' }} /> + </div> + ); + const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined; + const missionStatement = ( + <div className="col lg-col-6 md-col-6 col-12 center" style={missionStatementStyle}> + <div + className="mx-auto inline-block align-middle" + style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }} + > + <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> + Our Mission + </div> <div - className="col lg-col-6 md-col-6 col-12 center" - style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }} + className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center" + style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }} > - <div - className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top" - style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }} - > - <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> - Our Mission - </div> - <div - className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center" - style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }} - > - We believe a system can exist in which all world value is accessible to anyone, anywhere, - regardless of where you happen to be born. - </div> - </div> + We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless + of where you happen to be born. </div> </div> </div> ); -}; - -const WorldImage = () => { - const isSmallScreen = false; return ( - <div className="col lg-col-6 md-col-6 col-12 center"> - <img src="/images/jobs/map.png" height={isSmallScreen ? 280 : 364.5} /> + <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageGrey, color: colors.black }}> + <div className="mx-auto clearfix sm-py4"> + {isSmallScreen ? ( + <div> + {missionStatement} + {image} + </div> + ) : ( + <div> + {image} + {missionStatement} + </div> + )} + </div> </div> ); }; |