diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-07-25 17:48:12 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-07-25 17:48:12 +0800 |
commit | 854b8fad22437123c03245ce90245da08e9f12de (patch) | |
tree | 8f9e8ec84bc50ee61799ab3857dec9d68f139635 | |
parent | bb7c308081d11e0bd424db8a25b9b75554c61211 (diff) | |
download | dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar.gz dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar.bz2 dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar.lz dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar.xz dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.tar.zst dexon-0x-contracts-854b8fad22437123c03245ce90245da08e9f12de.zip |
Update benefits section
-rw-r--r-- | packages/website/ts/pages/jobs/benefits.tsx | 59 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/join_0x.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/pages/jobs/mission.tsx | 8 |
3 files changed, 48 insertions, 23 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx index 87412ed22..863423285 100644 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ b/packages/website/ts/pages/jobs/benefits.tsx @@ -6,17 +6,21 @@ import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; +import { media } from 'ts/style/media'; +import { styled } from 'ts/style/theme'; import { ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; const BENEFITS = [ - 'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.', - 'Unlimited vacation. Three weeks per year minimum.', - 'Flexible hours and liberal work-from-home-policy.', - 'Relocation Assistance.', - 'Whole team offsites and community / hackathon events (often international).', - 'Monthly transportation and phone reimbursement.', - 'Meals and snacks provided in-office daily.', + 'Comprehensive insurance (medical, dental, and vision)', + 'Unlimited vacation (three weeks per year minimum)', + 'Meals and snacks provided in-office daily', + 'Flexible hours and liberal work-from-home-policy', + 'Supportive remote working environment', + 'Transportation, phone, and wellness expense', + 'Relocation assistance', + 'Optional team excursions (fully paid, often international)', + 'Competitive salary and cryptocurrency-based compensation', ]; interface Value { @@ -45,11 +49,11 @@ export interface BenefitsProps { export const Benefits = (props: BenefitsProps) => { const isSmallScreen = props.screenWidth === ScreenWidths.Sm; return ( - <Container className="flex flex-column items-center py4 sm-px3" backgroundColor={colors.white}> + <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}> {!isSmallScreen ? ( - <Container className="flex" maxWidth="800px"> + <Container className="flex" maxWidth="1200px"> <BenefitsList /> - <Container marginLeft="215px"> + <Container marginLeft="120px"> <ValuesList /> </Container> </Container> @@ -73,14 +77,21 @@ const Header: React.StatelessComponent = ({ children }) => ( </Container> ); -const BenefitsList = () => { +interface BenefitsListProps { + className?: string; +} +const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => { return ( - <Container maxWidth="360px"> + <Container className={className}> <Header>Benefits</Header> {_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)} </Container> ); }; +const BenefitsList = styled(PlainBenefitsList)` + transform: translateY(30px); +`; + interface BenefitItemProps { description: string; } @@ -98,25 +109,39 @@ const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description } </Container> ); -const ValuesList = () => { +interface ValuesListProps { + className?: string; +} +const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => { return ( - <Container maxWidth="360px"> + <Container className={className} maxWidth="270px"> <Header>Our Values</Header> {_.map(VALUES, value => <ValueItem key={value.text} {...value} />)} <Text fontSize="14px" lineHeight="26px"> - We care deeply about our mission and encourage you to{' '} + We care deeply about our culture and values, and encourage you to{' '} <a - style={{ color: colors.mediumBlue }} + style={{ color: colors.mediumBlue, textDecoration: 'none' }} target="_blank" href={constants.URL_MISSION_AND_VALUES_BLOG_POST} > - read more here + read more on our blog </a>. </Text> </Container> ); }; +const ValuesList = styled(PlainValuesList)` + border-color: ${colors.beigeWhite}; + border-radius: 7px; + border-width: 1px; + border-style: solid; + padding-left: 38px; + padding-right: 38px; + padding-top: 28px; + padding-bottom: 28px; +`; + type ValueItemProps = Value; const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => { return ( diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index f214f442a..6159c26a2 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -20,10 +20,10 @@ export const Join0x = (props: Join0xProps) => ( className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }} > - <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px"> + <Container className="sm-hide xs-hide md-hide" position="absolute" left="100%" marginLeft="80px"> <Image src="images/jobs/hero-dots-right.svg" width="400px" /> </Container> - <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px"> + <Container className="sm-hide xs-hide md-hide" position="absolute" right="100%" marginRight="80px"> <Image src="images/jobs/hero-dots-left.svg" width="400px" /> </Container> <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx index e1a9880d6..28546f985 100644 --- a/packages/website/ts/pages/jobs/mission.tsx +++ b/packages/website/ts/pages/jobs/mission.tsx @@ -10,9 +10,9 @@ export interface MissionProps { screenWidth: ScreenWidths; } export const Mission = (props: MissionProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const shouldShowImage = props.screenWidth === ScreenWidths.Lg; const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />; - const missionStatementClassName = isSmallScreen ? 'center' : undefined; + const missionStatementClassName = !shouldShowImage ? 'center' : undefined; const missionStatement = ( <Container className={missionStatementClassName} maxWidth="388px"> <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px"> @@ -31,10 +31,10 @@ export const Mission = (props: MissionProps) => { ); return ( <div - className="flex flex-column items-center py4 sm-px3" + className="flex flex-column items-center py4 px3" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} > - {!isSmallScreen ? ( + {shouldShowImage ? ( <Container className="flex items-center" maxWidth="1200px"> {image} <Container marginLeft="115px">{missionStatement}</Container> |