Update benefits section

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>