diff options
Diffstat (limited to 'packages/website/ts/pages/jobs')
| -rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 184 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/list/header_item.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/list/list_item.tsx | 15 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/mission.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/open_positions.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/teams.tsx | 90 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/values.tsx | 60 |
8 files changed, 115 insertions, 284 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 006facc83..c8024068f 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -1,109 +1,139 @@ import * as _ from 'lodash'; import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; +import { Container } from 'ts/components/ui/container'; import { FilledImage } from 'ts/components/ui/filled_image'; -import { HeaderItem } from 'ts/pages/jobs/list/header_item'; -import { ListItem } from 'ts/pages/jobs/list/list_item'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/Text'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; -const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png']; -const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [ - { - bulletColor: '#6FCF97', - 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', - 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 BENEFITS = [ + 'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.', + 'Unlimited vacation. Three weeks per year minimum.', + 'Flexible hours and libteral work-from-home-policy.', + 'Relocation Assistance.', + 'Whole team offsites and community / hackathon events (often international).', + 'Monthly transportation and phone reimbursement.', + 'Meals and snacks prvided in-office daily', +]; + +interface Value { + iconSrc: string; + text: string; +} +const VALUES: Value[] = [ { - bulletColor: '#EB5757', - 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', + iconSrc: 'images/jobs/heart-icon.svg', + text: 'Do the right thing', }, { - bulletColor: '#6FCF97', - 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', + iconSrc: 'images/jobs/ship-icon.svg', + text: 'Consistently ship', }, { - bulletColor: '#56CCF2', - 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', + iconSrc: 'images/jobs/calendar-icon.svg', + text: 'Focus on long term impact', }, ]; -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; } -export const Benefits = (props: BenefitsProps) => ( - <div style={{ backgroundColor: colors.jobsPageBackground }}> - {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />} - </div> -); - -const LargeLayout = () => ( - <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}> - <div style={{ width: '43%', height: '100%' }}> - <ImageGrid /> - </div> - <div - className="pr4" - style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }} - > - <BenefitsList /> - </div> - </div> -); +export const Benefits = (props: BenefitsProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + return ( + <Container className="flex flex-column items-center py4" backgroundColor={colors.white}> + {!isSmallScreen ? ( + <Container className="flex" maxWidth="800px"> + <BenefitsList /> + <Container marginLeft="200px"> + <ValuesList /> + </Container> + </Container> + ) : ( + <Container className="flex-column pl3"> + <BenefitsList /> + <Container marginTop="50px"> + <ValuesList /> + </Container> + </Container> + )} + </Container> + ); +}; -const SmallLayout = () => ( - <div> - <FilledImage src={_.head(IMAGE_PATHS)} /> - <BenefitsList /> - </div> +const Header: React.StatelessComponent = ({ children }) => ( + <Container marginBottom="51px"> + <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> + {children} + </Text> + </Container> ); -export const BenefitsList = () => { +const BenefitsList = () => { return ( - <div> - <HeaderItem headerText={HEADER_TEXT} /> - {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)} - </div> + <Container maxWidth="360px"> + <Header>Benefits</Header> + {_.map(BENEFITS, benefit => <BenefitItem description={benefit} />)} + </Container> ); }; 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%' }}> - <div className="flex" style={{ height: '67%' }}> - <FilledImage src={IMAGE_PATHS[0]} /> - </div> - <div className="clearfix" style={{ height: '33%' }}> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src={IMAGE_PATHS[1]} /> - </div> - <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}> - <FilledImage src={IMAGE_PATHS[2]} /> +const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => ( + <Container marginBottom="30px"> + <div className="flex"> + <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} /> + <div className="flex-auto"> + <Text fontSize="14px" lineHeight="24px"> + {description} + </Text> </div> </div> - </div> + </Container> ); + +const openMissionAndValuesBlogPost = () => { + utils.openUrl(constants.URL_MISSION_AND_VALUES_BLOG_POST); +}; +const ValuesList = () => { + return ( + <Container maxWidth="360px"> + <Header>Our Values</Header> + {_.map(VALUES, value => <ValueItem {...value} />)} + <Text fontSize="14px" lineHeight="26px"> + We care deeply about our mission and encourage you to{' '} + <a + style={{ color: colors.mediumBlue }} + target="_blank" + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + > + read more here + </a>. + </Text> + </Container> + ); +}; + +type ValueItemProps = Value; +const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => { + return ( + <Container marginBottom="45px"> + <div className="flex items-center"> + <Image className="flex-none pr2" width="20px" src={iconSrc} /> + <div className="flex-auto"> + <Text fontSize="14px" lineHeight="24px" fontWeight="bold"> + {text} + </Text> + </div> + </div> + </Container> + ); +}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 9cd7a08eb..49d6422f5 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -11,8 +11,6 @@ import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; import { OpenPositions } from 'ts/pages/jobs/open_positions'; import { PhotoRail } from 'ts/pages/jobs/photo_rail'; -import { Teams } from 'ts/pages/jobs/teams'; -import { Values } from 'ts/pages/jobs/values'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx deleted file mode 100644 index ac214904c..000000000 --- a/packages/website/ts/pages/jobs/list/header_item.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; - -import { Text } from 'ts/components/ui/text'; -import { ListItem } from 'ts/pages/jobs/list/list_item'; -import { colors } from 'ts/style/colors'; - -export interface HeaderItemProps { - headerText?: string; -} -export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => { - return ( - <div className="h2 lg-py4 md-py4 sm-py3"> - <ListItem> - <Text - fontFamily="Roboto Mono" - fontSize="24px" - lineHeight="1.25" - minHeight="1.25em" - fontColor={colors.black} - > - {headerText} - </Text> - </ListItem> - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx deleted file mode 100644 index 192433d39..000000000 --- a/packages/website/ts/pages/jobs/list/list_item.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; - -import { Circle } from 'ts/components/ui/circle'; - -export interface ListItemProps { - bulletColor?: string; -} -export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => { - return ( - <div className="flex items-center"> - <Circle className="flex-none lg-px2 md-px2 sm-pl2" diameter={26} fillColor={bulletColor || 'transparent'} /> - <div className="flex-auto px2">{children}</div> - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index a1e6881c9..68e095436 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -10,7 +10,7 @@ export interface MissionProps { } export const Mission = (props: MissionProps) => { const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - const image = <img src="/images/jobs/map.png" style={{ width: 500, height: 280 }} />; + const image = <img src="/images/jobs/world-map.svg" style={{ maxWidth: 500, maxHeight: 280 }} />; const missionStatementClassName = isSmallScreen ? 'center' : undefined; const missionStatement = ( <Container className={missionStatementClassName} maxWidth="388px"> @@ -38,7 +38,7 @@ export const Mission = (props: MissionProps) => { <Container marginLeft="115px">{missionStatement}</Container> </Container> ) : ( - <Container className="flex flex-column items-center" maxWidth="1200px"> + <Container className="flex flex-column items-center"> {missionStatement} <Container marginTop="40px">{image}</Container> </Container> diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index e789795c1..c9fe987e4 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -5,8 +5,6 @@ import * as React from 'react'; import { Retry } from 'ts/components/ui/retry'; import { Text } from 'ts/components/ui/text'; -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 { styled } from 'ts/style/theme'; import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; @@ -71,7 +69,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit private _renderList(): React.ReactNode { return ( <div style={{ backgroundColor: colors.jobsPageBackground }}> - <HeaderItem headerText={HEADER_TEXT} /> {_.map(this.state.jobInfos, jobInfo => ( <JobInfoListItem key={jobInfo.id} @@ -86,7 +83,6 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit private _renderTable(): React.ReactNode { return ( <div> - <HeaderItem headerText={HEADER_TEXT} /> <Table selectable={false} onCellClick={this._onCellClick.bind(this)}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> @@ -174,14 +170,12 @@ export interface JobInfoListItemProps { const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => ( <div className="mb3" onClick={onClick}> - <ListItem> - <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> - {title + ' ›'} - </Text> - <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> - {description} - </Text> - </ListItem> + <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}> + {title + ' ›'} + </Text> + <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}> + {description} + </Text> </div> ); diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx deleted file mode 100644 index 80b036396..000000000 --- a/packages/website/ts/pages/jobs/teams.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Text } from 'ts/components/ui/text'; -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 TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [ - { - bulletColor: '#EB5757', - title: 'User Growth', - 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: 'Governance', - 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 TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [ - { - bulletColor: '#EB5757', - title: 'Developer Tools', - 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: 'Marketing', - 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 HEADER_TEXT = 'Our Teams'; -const MINIMUM_ITEM_HEIGHT = 240; - -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 pb4"> - <div className="col lg-col-6 md-col-6 col-12"> - <HeaderItem headerText={HEADER_TEXT} /> - {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => <TeamItem {...teamItemProps} />)} - </div> - <div className="col lg-col-6 md-col-6 col-12"> - <HeaderItem headerText=" " /> - {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)} - </div> - </div> -); - -const SmallLayout = () => ( - <div> - <HeaderItem headerText={HEADER_TEXT} /> - {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => ( - <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}> - <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}> - {title} - </Text> - </ListItem> - <ListItem> - <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}> - {description} - </Text> - </ListItem> - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx deleted file mode 100644 index c7c4d5726..000000000 --- a/packages/website/ts/pages/jobs/values.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Text } from 'ts/components/ui/text'; -import { HeaderItem } from 'ts/pages/jobs/list/header_item'; -import { ListItem } from 'ts/pages/jobs/list/list_item'; -import { colors } from 'ts/style/colors'; - -const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [ - { - bulletColor: '#6FCF97', - title: 'Ethics/Doing the right thing', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', - }, - { - bulletColor: '#56CCF2', - title: 'Consistently ship', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', - }, - { - bulletColor: '#EB5757', - title: 'Focus on long term impact', - description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.', - }, -]; - -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 => <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}> - <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}> - {title} - </Text> - </ListItem> - <ListItem> - <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}> - {description} - </Text> - </ListItem> - </div> - ); -}; |