Polish mission section and photo section

packages/website/ts/containers/jobs.ts

@@ -5,10 +5,12 @@ import { Dispatch } from 'redux';
 import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
+import { ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 interface ConnectedState {
     translate: Translate;
+    screenWidth: ScreenWidths;
 }
 
 interface ConnectedDispatch {
@@ -17,6 +19,7 @@ interface ConnectedDispatch {
 
 const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({
     translate: state.translate,
+    screenWidth: state.screenWidth,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({

packages/website/ts/pages/jobs/floating_image.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface FloatingImageProps {
+    src: string;
+}
+export const FloatingImage = (props: FloatingImageProps) => {
+    return <img src={props.src} style={{ width: '100%' }} />;
+};

packages/website/ts/pages/jobs/jobs.tsx

@@ -1,10 +1,12 @@
 import { colors, utils as sharedUtils } from '@0xproject/react-shared';
+import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Benefits } from 'ts/pages/jobs/benefits';
+import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { Join0x } from 'ts/pages/jobs/join_0x';
 import { Mission } from 'ts/pages/jobs/mission';
 import { OpenPositions } from 'ts/pages/jobs/open_positions';
@@ -12,21 +14,33 @@ 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 { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+const OPEN_POSITIONS_HASH = 'positions';
+const THROTTLE_TIMEOUT = 100;
+const PHOTO_RAIL_IMAGES = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
 
 export interface JobsProps {
     location: Location;
     translate: Translate;
     dispatcher: Dispatcher;
+    screenWidth: ScreenWidths;
 }
 
 export interface JobsState {}
 
-const OPEN_POSITIONS_HASH = 'positions';
-
 export class Jobs extends React.Component<JobsProps, JobsState> {
+    // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well)
+    private _throttledScreenWidthUpdate: () => void;
+    public constructor(props: JobsProps) {
+        super(props);
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+    }
     public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
         window.scrollTo(0, 0);
     }
     public render(): React.ReactNode {
@@ -40,8 +54,12 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     translate={this.props.translate}
                 />
                 <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
-                <Mission />
-                <PhotoRail />
+                <Mission screenWidth={this.props.screenWidth} />
+                {this._isSmallScreen() ? (
+                    <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} />
+                ) : (
+                    <PhotoRail images={PHOTO_RAIL_IMAGES} />
+                )}
                 <Values />
                 <Benefits />
                 <Teams />
@@ -53,4 +71,12 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
     private _onJoin0xCallToActionClick(): void {
         sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
     }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        this.props.dispatcher.updateScreenWidth(newScreenWidth);
+    }
+    private _isSmallScreen(): boolean {
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+        return isSmallScreen;
+    }
 }

packages/website/ts/pages/jobs/join_0x.tsx

@@ -8,7 +8,7 @@ export interface Join0xProps {
 }
 
 export const Join0x = (props: Join0xProps) => (
-    <div className="clearfix center py4" style={{ backgroundColor: colors.white, color: colors.black }}>
+    <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.white, color: colors.black }}>
         <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
             <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
                 Join 0x

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>
     );
 };

packages/website/ts/pages/jobs/photo_rail.tsx

@@ -2,12 +2,18 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { ScreenWidths } from 'ts/types';
 
-export const PhotoRail = () => {
-    const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
+const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
+
+export interface PhotoRailProps {
+    images: string[];
+}
+
+export const PhotoRail = (props: PhotoRailProps) => {
     return (
-        <div className="clearfix" style={{ height: 491 }}>
-            {_.map(images, (image: string) => {
+        <div className="clearfix" style={{ height: 490 }}>
+            {_.map(props.images, (image: string) => {
                 return (
                     <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}>
                         <FilledImage src={image} />

packages/website/ts/style/colors.ts

@@ -11,6 +11,7 @@ const appColors = {
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
     drawerMenuBackground: '#4a4a4a',
     menuItemDefaultSelectedBackground: '#424242',
+    jobsPageGrey: '#fafafa',
 };
 
 export const colors = {