From 3d76d83a39ca61641f3efd7ed5cc6f7a214835ca Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 1 May 2018 10:17:27 -0700
Subject: Skeleton for jobs page and initial implementation

---
 packages/website/ts/pages/jobs/mission.tsx | 43 ++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/website/ts/pages/jobs/mission.tsx

(limited to 'packages/website/ts/pages/jobs/mission.tsx')

diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
new file mode 100644
index 000000000..a1d0dc927
--- /dev/null
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -0,0 +1,43 @@
+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 />}
+                <div
+                    className="col lg-col-6 md-col-6 col-12 center"
+                    style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }}
+                >
+                    <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>
+                </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>
+    );
+};
-- 
cgit 


From 087aaa2f948391da70a4d5b53b8e7e301288ab5f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 15:27:11 -0700
Subject: Polish mission section and photo section

---
 packages/website/ts/pages/jobs/mission.tsx | 73 +++++++++++++++++-------------
 1 file changed, 42 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts/pages/jobs/mission.tsx')

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


From 679d60cd5a5debcacff42c38967c1f8b7d972882 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 11 Jun 2018 12:38:25 -0700
Subject: Implement large screen open positions

---
 packages/website/ts/pages/jobs/mission.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/jobs/mission.tsx')

diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index a3584e5f6..b4d294623 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -35,7 +35,7 @@ export const Mission = (props: MissionProps) => {
         </div>
     );
     return (
-        <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageGrey, color: colors.black }}>
+        <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}>
             <div className="mx-auto clearfix sm-py4">
                 {isSmallScreen ? (
                     <div>
-- 
cgit 


From f1496656607bc2b382b8f378652a2e334f4a5908 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 13:40:15 -0700
Subject: Fix lint errors

---
 packages/website/ts/pages/jobs/mission.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/jobs/mission.tsx')

diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index b4d294623..f7f874e04 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { FilledImage } from 'ts/pages/jobs/filled_image';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 
@@ -35,7 +34,10 @@ export const Mission = (props: MissionProps) => {
         </div>
     );
     return (
-        <div className="container lg-py4 md-py4" style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}>
+        <div
+            className="container lg-py4 md-py4"
+            style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
+        >
             <div className="mx-auto clearfix sm-py4">
                 {isSmallScreen ? (
                     <div>
-- 
cgit