From 3898b8e8ab083689221e39de6b18fe31e6699d38 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 5 Jun 2018 21:36:05 -0700
Subject: Wrap AllowanceToggle in redux container

---
 .../ts/components/inputs/allowance_toggle.tsx      |  8 +++--
 .../onboarding/portal_onboarding_flow.tsx          | 15 ++++++++
 packages/website/ts/components/token_balances.tsx  |  5 +--
 packages/website/ts/components/wallet/wallet.tsx   |  7 ++--
 .../ts/containers/inputs/allowance_toggle.ts       | 42 ++++++++++++++++++++++
 5 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 packages/website/ts/containers/inputs/allowance_toggle.ts

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a8df4935a..ca4b89f77 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -18,11 +18,11 @@ interface AllowanceToggleProps {
     networkId: number;
     blockchain: Blockchain;
     dispatcher: Dispatcher;
-    onErrorOccurred: (errType: BalanceErrs) => void;
     token: Token;
     tokenState: TokenState;
     userAddress: string;
-    isDisabled: boolean;
+    isDisabled?: boolean;
+    onErrorOccurred?: (errType: BalanceErrs) => void;
     refetchTokenStateAsync: () => Promise<void>;
 }
 
@@ -57,6 +57,10 @@ const styles: Styles = {
 };
 
 export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
+    public static defaultProps = {
+        onErrorOccurred: _.noop,
+        isDisabled: false,
+    };
     constructor(props: AllowanceToggleProps) {
         super(props);
         this.state = {
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index bf52684d7..65cb20733 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -5,6 +5,7 @@ import { BigNumber } from '@0xproject/utils';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
@@ -77,6 +78,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
+            {
+                target: '.weth-row',
+                content: 'Unlock your tokens for trading. You only need to do this once for each token.',
+                placement: 'right',
+                continueButtonDisplay: 'disabled',
+            },
         ];
         return steps;
     }
@@ -125,4 +132,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.updateIsRunning(true);
         }
     }
+    private _renderAllowanceToggle(): React.ReactNode {
+        return (
+            <AllowanceToggle
+                blockchain={this.props.blockchain}
+                refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+            />
+        );
+    }
 }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 2bc065b0f..f95bfb39d 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -22,7 +22,7 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 import { Blockchain } from 'ts/blockchain';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { SendButton } from 'ts/components/send_button';
 import { HelpTooltip } from 'ts/components/ui/help_tooltip';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
@@ -362,13 +362,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </TableRowColumn>
                 <TableRowColumn>
                     <AllowanceToggle
-                        networkId={this.props.networkId}
                         blockchain={this.props.blockchain}
-                        dispatcher={this.props.dispatcher}
                         token={token}
                         tokenState={tokenState}
                         onErrorOccurred={this._onErrorOccurred.bind(this)}
-                        userAddress={this.props.userAddress}
                         isDisabled={!tokenState.isLoaded}
                         refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)}
                     />
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 37233930e..f8ec05790 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -23,7 +23,7 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
@@ -428,15 +428,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode {
+        // TODO: Error handling
         return (
             <AllowanceToggle
-                networkId={this.props.networkId}
                 blockchain={this.props.blockchain}
-                dispatcher={this.props.dispatcher}
                 token={config.token}
                 tokenState={config.tokenState}
-                onErrorOccurred={_.noop} // TODO: Error handling
-                userAddress={this.props.userAddress}
                 isDisabled={!config.tokenState.isLoaded}
                 refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
             />
diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts
new file mode 100644
index 000000000..1dd7b2101
--- /dev/null
+++ b/packages/website/ts/containers/inputs/allowance_toggle.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
+import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Blockchain } from 'ts/blockchain';
+import { State } from 'ts/redux/reducer';
+
+import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle';
+import { Dispatcher } from 'ts/redux/dispatcher';
+
+interface AllowanceToggleProps {
+    blockchain: Blockchain;
+    onErrorOccurred?: (errType: BalanceErrs) => void;
+    token: Token;
+    tokenState: TokenState;
+    isDisabled: boolean;
+    refetchTokenStateAsync: () => Promise<void>;
+}
+
+interface ConnectedState {
+    networkId: number;
+    userAddress: string;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({
+    networkId: state.networkId,
+    userAddress: state.userAddress,
+});
+
+const mapDispatchTopProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const AllowanceToggle: React.ComponentClass<AllowanceToggleProps> = connect(
+    mapStateToProps,
+    mapDispatchTopProps,
+)(AllowanceToggleComponent);
-- 
cgit v1.2.3


From 612cc96e417c1397e1874be22208864f12acbda3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 6 Jun 2018 11:47:11 -0700
Subject: Add utilities for getting tokens from tokensByAddress

---
 .../ts/components/onboarding/portal_onboarding_flow.tsx       |  3 +++
 packages/website/ts/components/portal/portal.tsx              |  6 +++++-
 packages/website/ts/containers/portal_onboarding_flow.ts      |  3 +++
 packages/website/ts/utils/utils.ts                            | 11 +++++++++--
 4 files changed, 20 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 65cb20733..55d89d61e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,12 +2,14 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { BigNumber } from '@0xproject/utils';
+import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
+    blockchain: Blockchain;
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
@@ -20,6 +22,7 @@ export interface PortalOnboardingFlowProps {
     trackedTokenStateByAddress: TokenStateByAddress;
     updateIsRunning: (isRunning: boolean) => void;
     updateOnboardingStep: (stepIndex: number) => void;
+    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
 }
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 90d45208f..02a58cbf3 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -235,7 +235,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
-                <PortalOnboardingFlow trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} />
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 0ad9aef13..ea71bddb5 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
+import { Blockchain } from 'ts/blockchain';
 import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 
 import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
@@ -9,6 +10,8 @@ import { State } from 'ts/redux/reducer';
 
 interface PortalOnboardingFlowProps {
     trackedTokenStateByAddress: TokenStateByAddress;
+    blockchain: Blockchain;
+    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
 }
 
 interface ConnectedState {
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index b9d962b75..9c564ebc5 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -21,6 +21,7 @@ import {
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
+import { Container } from '../components/ui/container';
 
 const LG_MIN_EM = 64;
 const MD_MIN_EM = 52;
@@ -322,8 +323,14 @@ export const utils = {
         return this.isDevelopment() || this.isStaging() || this.isDogfood();
     },
     getEthToken(tokenByAddress: TokenByAddress): Token {
+        return utils.getTokenBySymbol(constants.ETHER_TOKEN_SYMBOL, tokenByAddress);
+    },
+    getZrxToken(tokenByAddress: TokenByAddress): Token {
+        return utils.getTokenBySymbol(constants.ZRX_TOKEN_SYMBOL, tokenByAddress);
+    },
+    getTokenBySymbol(symbol: string, tokenByAddress: TokenByAddress): Token {
         const tokens = _.values(tokenByAddress);
-        const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL });
-        return etherToken;
+        const token = _.find(tokens, { symbol });
+        return token;
     },
 };
-- 
cgit v1.2.3


From cbe5438a31a54a92a198b2cc5ad8a5d5feb033b4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 6 Jun 2018 18:06:03 -0700
Subject: Render TokenAllowance

---
 .../onboarding/portal_onboarding_flow.tsx           | 21 ++++++++++++++++++---
 .../ts/containers/inputs/allowance_toggle.ts        |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 55d89d61e..78592c67f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
-import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
@@ -83,7 +83,8 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                content: 'Unlock your tokens for trading. You only need to do this once for each token.',
+                // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>,
+                content: 'blah',
                 placement: 'right',
                 continueButtonDisplay: 'disabled',
             },
@@ -135,9 +136,23 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.updateIsRunning(true);
         }
     }
-    private _renderAllowanceToggle(): React.ReactNode {
+    private _renderZrxAllowanceToggle(): React.ReactNode {
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress)
+        return this._renderAllowanceToggle(zrxToken);
+    }
+    private _renderEthAllowanceToggle(): React.ReactNode {
+        const ethToken = utils.getEthToken(this.props.tokenByAddress);
+        return this._renderAllowanceToggle(ethToken);
+    }
+    private _renderAllowanceToggle(token: Token): React.ReactNode {
+        if (!token) {
+            return null;
+        }
+        const tokenState = this.props.trackedTokenStateByAddress[token.address];
         return (
             <AllowanceToggle
+                token={token}
+                tokenState={tokenState}
                 blockchain={this.props.blockchain}
                 refetchTokenStateAsync={this.props.refetchTokenStateAsync}
             />
diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts
index 1dd7b2101..6f50072ca 100644
--- a/packages/website/ts/containers/inputs/allowance_toggle.ts
+++ b/packages/website/ts/containers/inputs/allowance_toggle.ts
@@ -14,8 +14,8 @@ interface AllowanceToggleProps {
     onErrorOccurred?: (errType: BalanceErrs) => void;
     token: Token;
     tokenState: TokenState;
-    isDisabled: boolean;
-    refetchTokenStateAsync: () => Promise<void>;
+    isDisabled?: boolean;
+    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
 }
 
 interface ConnectedState {
-- 
cgit v1.2.3


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/components/redirecter.tsx     |  9 ---
 packages/website/ts/containers/jobs.ts            | 26 ++++++++
 packages/website/ts/index.tsx                     |  6 +-
 packages/website/ts/pages/jobs/benefits.tsx       | 22 +++++++
 packages/website/ts/pages/jobs/bulleted_item.tsx  | 22 +++++++
 packages/website/ts/pages/jobs/filled_image.tsx   | 18 ++++++
 packages/website/ts/pages/jobs/jobs.tsx           | 44 +++++++++++++
 packages/website/ts/pages/jobs/join_0x.tsx        | 35 ++++++++++
 packages/website/ts/pages/jobs/mission.tsx        | 43 +++++++++++++
 packages/website/ts/pages/jobs/open_positions.tsx | 76 ++++++++++++++++++++++
 packages/website/ts/pages/jobs/photo_rail.tsx     | 19 ++++++
 packages/website/ts/pages/jobs/teams.tsx          | 69 ++++++++++++++++++++
 packages/website/ts/pages/jobs/values.tsx         | 78 +++++++++++++++++++++++
 13 files changed, 455 insertions(+), 12 deletions(-)
 delete mode 100644 packages/website/ts/components/redirecter.tsx
 create mode 100644 packages/website/ts/containers/jobs.ts
 create mode 100644 packages/website/ts/pages/jobs/benefits.tsx
 create mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx
 create mode 100644 packages/website/ts/pages/jobs/filled_image.tsx
 create mode 100644 packages/website/ts/pages/jobs/jobs.tsx
 create mode 100644 packages/website/ts/pages/jobs/join_0x.tsx
 create mode 100644 packages/website/ts/pages/jobs/mission.tsx
 create mode 100644 packages/website/ts/pages/jobs/open_positions.tsx
 create mode 100644 packages/website/ts/pages/jobs/photo_rail.tsx
 create mode 100644 packages/website/ts/pages/jobs/teams.tsx
 create mode 100644 packages/website/ts/pages/jobs/values.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirecter.tsx
deleted file mode 100644
index 477aecb77..000000000
--- a/packages/website/ts/components/redirecter.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { constants } from 'ts/utils/constants';
-
-interface RedirecterProps {
-    location: string;
-}
-
-export function Redirecter(_props: RedirecterProps): void {
-    window.location.href = constants.URL_ANGELLIST;
-}
diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts
new file mode 100644
index 000000000..0f57c431d
--- /dev/null
+++ b/packages/website/ts/containers/jobs.ts
@@ -0,0 +1,26 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+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 { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const Jobs: React.ComponentClass<JobsProps> = connect(mapStateToProps, mapDispatchToProps)(JobsComponent);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 719604c02..a8749d8bf 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -4,9 +4,10 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
-import { Redirecter } from 'ts/components/redirecter';
+import { createStore, Store as ReduxStore } from 'redux';
 import { About } from 'ts/containers/about';
 import { FAQ } from 'ts/containers/faq';
+import { Jobs } from 'ts/containers/jobs';
 import { Landing } from 'ts/containers/landing';
 import { NotFound } from 'ts/containers/not_found';
 import { Wiki } from 'ts/containers/wiki';
@@ -86,8 +87,7 @@ render(
                         <Switch>
                             <Route exact={true} path="/" component={Landing as any} />
                             <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
-
-                            <Route path={WebsitePaths.Jobs} component={Redirecter as any} />
+                            <Route path={WebsitePaths.Jobs} component={Jobs as any} />
                             <Route path={WebsitePaths.Portal} component={LazyPortal} />
                             <Route path={WebsitePaths.FAQ} component={FAQ as any} />
                             <Route path={WebsitePaths.About} component={About as any} />
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
new file mode 100644
index 000000000..fa4edb240
--- /dev/null
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { FilledImage } from 'ts/pages/jobs/filled_image';
+
+export const Benefits = () => (
+    <div className="flex" style={{ height: 937 }}>
+        <div style={{ width: '43%', height: '100%' }}>
+            <div className="flex" style={{ height: '67%' }}>
+                <FilledImage src="/images/jobs/location1.png" />
+            </div>
+            <div className="clearfix" style={{ height: '33%' }}>
+                <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
+                    <FilledImage src="/images/jobs/location2.png" />
+                </div>
+                <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
+                    <FilledImage src="/images/jobs/location3.png" />
+                </div>
+            </div>
+        </div>
+        <div style={{ width: '57%', height: '100%' }} />
+    </div>
+);
diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx
new file mode 100644
index 000000000..ae7385b90
--- /dev/null
+++ b/packages/website/ts/pages/jobs/bulleted_item.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface BulletedItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+    height?: number;
+}
+export const BulletedItem = (props: BulletedItemProps) => {
+    const height = props.height || 150;
+    return (
+        <div className="flex" style={{ height }}>
+            <svg className="flex-none px2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
+            </svg>
+            <div className="flex-auto px2">
+                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
+                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx
new file mode 100644
index 000000000..7f58ee5b9
--- /dev/null
+++ b/packages/website/ts/pages/jobs/filled_image.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface FilledImageProps {
+    src: string;
+}
+export const FilledImage = (props: FilledImageProps) => (
+    <div
+        style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            backgroundImage: `url(${props.src})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+        }}
+    />
+);
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
new file mode 100644
index 000000000..e49b40a2f
--- /dev/null
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -0,0 +1,44 @@
+import { colors } from '@0xproject/react-shared';
+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 { 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 { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface JobsProps {
+    location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
+}
+
+export const Jobs: React.StatelessComponent<JobsProps> = props => {
+    return (
+        <div>
+            <DocumentTitle title="Jobs" />
+            <TopBar
+                blockchainIsLoaded={false}
+                location={props.location}
+                style={{ backgroundColor: colors.white, position: 'relative' }}
+                translate={props.translate}
+            />
+            <Join0x />
+            <Mission />
+            <PhotoRail />
+            <Values />
+            <Benefits />
+            <Teams />
+            <OpenPositions />
+            <Footer translate={props.translate} dispatcher={props.dispatcher} />
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
new file mode 100644
index 000000000..f4dbf31a3
--- /dev/null
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -0,0 +1,35 @@
+import { colors } from '@0xproject/react-shared';
+
+import FlatButton from 'material-ui/FlatButton';
+import * as React from 'react';
+
+export const Join0x = () => (
+    <div className="clearfix center 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
+            </div>
+            <div
+                className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center"
+                style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }}
+            >
+                0x is transforming the way that value is exchanged on a global scale. Come join us in San Francisco or
+                work remotely anywhere in the world to help create the infrastructure of a new tokenized economy.
+            </div>
+            <div className="py3">
+                <FlatButton
+                    label={'view open positions'}
+                    backgroundColor={colors.black}
+                    labelStyle={{
+                        fontSize: 18,
+                        fontFamily: 'Roboto Mono',
+                        fontWeight: 'lighter',
+                        color: colors.white,
+                        textTransform: 'lowercase',
+                    }}
+                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                />
+            </div>
+        </div>
+    </div>
+);
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>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
new file mode 100644
index 000000000..e79bc920b
--- /dev/null
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -0,0 +1,76 @@
+import * as _ from 'lodash';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
+import * as React from 'react';
+
+const POSITIONS = [
+    {
+        name: 'Community Director',
+        department: 'Marketing',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Data Scientist / Data Engineer',
+        department: 'Engineering',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Executive Assitant / Office Manager',
+        department: 'Operations',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Research Fellow - Economics / Governance',
+        department: 'Engineering',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Software Engineer - Blockchain',
+        department: 'Engineer',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Software Engineer - Full-stack',
+        department: 'Marketing',
+        office: 'Remote / San Francisco',
+    },
+];
+
+export const OpenPositions = () => {
+    const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
+    return (
+        <div className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
+            <Table selectable={false}>
+                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+                    <TableRow>
+                        <TableHeaderColumn colSpan={6} style={labelStyle}>
+                            Position
+                        </TableHeaderColumn>
+                        <TableHeaderColumn colSpan={3} style={labelStyle}>
+                            Department
+                        </TableHeaderColumn>
+                        <TableHeaderColumn colSpan={3} style={labelStyle}>
+                            Office
+                        </TableHeaderColumn>
+                    </TableRow>
+                </TableHeader>
+                <TableBody displayRowCheckbox={false} showRowHover={true}>
+                    {_.map(POSITIONS, position => {
+                        return (
+                            <TableRow hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
+                                <TableRowColumn colSpan={6} style={labelStyle}>
+                                    {position.name}
+                                </TableRowColumn>
+                                <TableRowColumn colSpan={3} style={labelStyle}>
+                                    {position.department}
+                                </TableRowColumn>
+                                <TableRowColumn colSpan={3} style={labelStyle}>
+                                    {position.office}
+                                </TableRowColumn>
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
new file mode 100644
index 000000000..a5ccfb25f
--- /dev/null
+++ b/packages/website/ts/pages/jobs/photo_rail.tsx
@@ -0,0 +1,19 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { FilledImage } from 'ts/pages/jobs/filled_image';
+
+export const PhotoRail = () => {
+    const images = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
+    return (
+        <div className="clearfix" style={{ height: 491 }}>
+            {_.map(images, (image: string) => {
+                return (
+                    <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}>
+                        <FilledImage src={image} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
new file mode 100644
index 000000000..b00170877
--- /dev/null
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -0,0 +1,69 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+
+const ITEMS_COLUMN1: BulletedItemProps[] = [
+    {
+        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 ITEMS_COLUMN2: BulletedItemProps[] = [
+    {
+        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',
+    },
+];
+
+export const Teams = () => {
+    const isSmallScreen = false;
+    const teamHeight = 220;
+    return (
+        <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
+            <div className="mx-auto max-width-4 clearfix">
+                <div className="col lg-col-6 md-col-6 col-12 p2">
+                    {_.map(ITEMS_COLUMN1, bulletedItemProps => {
+                        return (
+                            <BulletedItem
+                                bulletColor={bulletedItemProps.bulletColor}
+                                title={bulletedItemProps.title}
+                                description={bulletedItemProps.description}
+                                height={teamHeight}
+                            />
+                        );
+                    })}
+                </div>
+                <div className="col lg-col-6 md-col-6 col-12 p2">
+                    {_.map(ITEMS_COLUMN2, bulletedItemProps => {
+                        return (
+                            <BulletedItem
+                                bulletColor={bulletedItemProps.bulletColor}
+                                title={bulletedItemProps.title}
+                                description={bulletedItemProps.description}
+                                height={teamHeight}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
new file mode 100644
index 000000000..805400583
--- /dev/null
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -0,0 +1,78 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+
+const ITEMS_COLUMN1: BulletedItemProps[] = [
+    {
+        bulletColor: '#6FCF97',
+        title: 'Ethics/Doing the right thing',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+    {
+        bulletColor: '#56CCF2',
+        title: 'Clear communication',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+    {
+        bulletColor: '#EB5757',
+        title: 'Grow the whole pie',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+];
+const ITEMS_COLUMN2: BulletedItemProps[] = [
+    {
+        bulletColor: '#F2994A',
+        title: 'Crypto-Economic Technology',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+    {
+        bulletColor: '#E0E0E0',
+        title: 'Transparency',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+    {
+        bulletColor: '#F2C94C',
+        title: 'Positive Energy',
+        description:
+            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+    },
+];
+
+export const Values = () => {
+    const isSmallScreen = false;
+    return (
+        <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
+            <div className="mx-auto max-width-4 clearfix">
+                <div className="col lg-col-6 md-col-6 col-12 p2">
+                    {_.map(ITEMS_COLUMN1, bulletedItemProps => {
+                        return (
+                            <BulletedItem
+                                bulletColor={bulletedItemProps.bulletColor}
+                                title={bulletedItemProps.title}
+                                description={bulletedItemProps.description}
+                            />
+                        );
+                    })}
+                </div>
+                <div className="col lg-col-6 md-col-6 col-12 p2">
+                    {_.map(ITEMS_COLUMN2, bulletedItemProps => {
+                        return (
+                            <BulletedItem
+                                bulletColor={bulletedItemProps.bulletColor}
+                                title={bulletedItemProps.title}
+                                description={bulletedItemProps.description}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
-- 
cgit v1.2.3


From 0c2f002a7d854026f1710ab92255f73e17597e2d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 11:29:56 -0700
Subject: Add scroll to top for jobs page

---
 packages/website/ts/pages/jobs/jobs.tsx | 49 +++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 21 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index e49b40a2f..c7c667da1 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -21,24 +21,31 @@ export interface JobsProps {
     dispatcher: Dispatcher;
 }
 
-export const Jobs: React.StatelessComponent<JobsProps> = props => {
-    return (
-        <div>
-            <DocumentTitle title="Jobs" />
-            <TopBar
-                blockchainIsLoaded={false}
-                location={props.location}
-                style={{ backgroundColor: colors.white, position: 'relative' }}
-                translate={props.translate}
-            />
-            <Join0x />
-            <Mission />
-            <PhotoRail />
-            <Values />
-            <Benefits />
-            <Teams />
-            <OpenPositions />
-            <Footer translate={props.translate} dispatcher={props.dispatcher} />
-        </div>
-    );
-};
+export interface JobsState {}
+
+export class Jobs extends React.Component<JobsProps, JobsState> {
+    public componentDidMount(): void {
+        window.scrollTo(0, 0);
+    }
+    public render(): React.ReactNode {
+        return (
+            <div>
+                <DocumentTitle title="Jobs" />
+                <TopBar
+                    blockchainIsLoaded={false}
+                    location={this.props.location}
+                    style={{ backgroundColor: colors.white, position: 'relative' }}
+                    translate={this.props.translate}
+                />
+                <Join0x />
+                <Mission />
+                <PhotoRail />
+                <Values />
+                <Benefits />
+                <Teams />
+                <OpenPositions />
+                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
+            </div>
+        );
+    }
+}
-- 
cgit v1.2.3


From 474b93a22f9545fe9bcabe5a80e6a057e66ab286 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 8 Jun 2018 13:27:41 -0700
Subject: Add link to open positions section

---
 packages/website/ts/pages/jobs/jobs.tsx           | 11 ++++++++---
 packages/website/ts/pages/jobs/join_0x.tsx        |  7 ++++++-
 packages/website/ts/pages/jobs/open_positions.tsx |  8 ++++++--
 3 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index c7c667da1..466926af0 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, utils as sharedUtils } from '@0xproject/react-shared';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
@@ -23,6 +23,8 @@ export interface JobsProps {
 
 export interface JobsState {}
 
+const OPEN_POSITIONS_HASH = 'positions';
+
 export class Jobs extends React.Component<JobsProps, JobsState> {
     public componentDidMount(): void {
         window.scrollTo(0, 0);
@@ -37,15 +39,18 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     style={{ backgroundColor: colors.white, position: 'relative' }}
                     translate={this.props.translate}
                 />
-                <Join0x />
+                <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
                 <Mission />
                 <PhotoRail />
                 <Values />
                 <Benefits />
                 <Teams />
-                <OpenPositions />
+                <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
     }
+    private _onJoin0xCallToActionClick(): void {
+        sharedUtils.setUrlHash(OPEN_POSITIONS_HASH);
+    }
 }
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index f4dbf31a3..fb811cbc4 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -3,7 +3,11 @@ import { colors } from '@0xproject/react-shared';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
-export const Join0x = () => (
+export interface Join0xProps {
+    onCallToActionClick: () => void;
+}
+
+export const Join0x = (props: Join0xProps) => (
     <div className="clearfix center 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' }}>
@@ -28,6 +32,7 @@ export const Join0x = () => (
                         textTransform: 'lowercase',
                     }}
                     style={{ width: 280, height: 62, borderRadius: 5 }}
+                    onClick={props.onCallToActionClick}
                 />
             </div>
         </div>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index e79bc920b..f9c37d36f 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -35,10 +35,14 @@ const POSITIONS = [
     },
 ];
 
-export const OpenPositions = () => {
+export interface OpenPositionsProps {
+    hash: string;
+}
+
+export const OpenPositions = (props: OpenPositionsProps) => {
     const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
     return (
-        <div className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
+        <div id={props.hash} className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
             <Table selectable={false}>
                 <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                     <TableRow>
-- 
cgit v1.2.3


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/containers/jobs.ts            |  3 +
 packages/website/ts/pages/jobs/floating_image.tsx |  8 +++
 packages/website/ts/pages/jobs/jobs.tsx           | 34 +++++++++--
 packages/website/ts/pages/jobs/join_0x.tsx        |  2 +-
 packages/website/ts/pages/jobs/mission.tsx        | 73 +++++++++++++----------
 packages/website/ts/pages/jobs/photo_rail.tsx     | 14 +++--
 packages/website/ts/style/colors.ts               |  1 +
 7 files changed, 95 insertions(+), 40 deletions(-)
 create mode 100644 packages/website/ts/pages/jobs/floating_image.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts
index 0f57c431d..63ef59221 100644
--- a/packages/website/ts/containers/jobs.ts
+++ b/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 => ({
diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx
new file mode 100644
index 000000000..4719a9596
--- /dev/null
+++ b/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%' }} />;
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 466926af0..70a11c8a4 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/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;
+    }
 }
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index fb811cbc4..e7fdf3ce1 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/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
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>
     );
 };
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
index a5ccfb25f..bcc3444ec 100644
--- a/packages/website/ts/pages/jobs/photo_rail.tsx
+++ b/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} />
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 5ffdd6ba7..002318e14 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -11,6 +11,7 @@ const appColors = {
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
     drawerMenuBackground: '#4a4a4a',
     menuItemDefaultSelectedBackground: '#424242',
+    jobsPageGrey: '#fafafa',
 };
 
 export const colors = {
-- 
cgit v1.2.3


From b7bb27fa2135aa87a91667639920eb0c2db4cb85 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 19:35:30 -0700
Subject: Rework values section

---
 packages/website/ts/pages/jobs/bulleted_item.tsx |  4 +-
 packages/website/ts/pages/jobs/values.tsx        | 53 +++++-------------------
 2 files changed, 13 insertions(+), 44 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx
index ae7385b90..9dc4fe4a3 100644
--- a/packages/website/ts/pages/jobs/bulleted_item.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item.tsx
@@ -7,9 +7,9 @@ export interface BulletedItemProps {
     height?: number;
 }
 export const BulletedItem = (props: BulletedItemProps) => {
-    const height = props.height || 150;
+    const minHeight = props.height || 150;
     return (
-        <div className="flex" style={{ height }}>
+        <div className="flex" style={{ minHeight }}>
             <svg className="flex-none px2" height="26" width="26">
                 <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
             </svg>
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 805400583..9bb98d016 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -4,65 +4,34 @@ import * as React from 'react';
 
 import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
 
-const ITEMS_COLUMN1: BulletedItemProps[] = [
+const BULLETED_ITEMS: BulletedItemProps[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
     {
         bulletColor: '#56CCF2',
-        title: 'Clear communication',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+        title: 'Consistently ship',
+        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
     {
         bulletColor: '#EB5757',
-        title: 'Grow the whole pie',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
-    },
-];
-const ITEMS_COLUMN2: BulletedItemProps[] = [
-    {
-        bulletColor: '#F2994A',
-        title: 'Crypto-Economic Technology',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
-    },
-    {
-        bulletColor: '#E0E0E0',
-        title: 'Transparency',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
-    },
-    {
-        bulletColor: '#F2C94C',
-        title: 'Positive Energy',
-        description:
-            'orem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante vitae lacus condimentum auctor nec ut elit.',
+        title: 'Focus on long term impact',
+        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
 ];
 
 export const Values = () => {
     const isSmallScreen = false;
     return (
-        <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
+        <div className="clearfix" style={{ backgroundColor: colors.white }}>
             <div className="mx-auto max-width-4 clearfix">
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN1, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                            />
-                        );
-                    })}
+                <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
+                    Our Values
                 </div>
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN2, bulletedItemProps => {
+                <div className="col col-12 px2">
+                    {_.map(BULLETED_ITEMS, bulletedItemProps => {
                         return (
                             <BulletedItem
                                 bulletColor={bulletedItemProps.bulletColor}
-- 
cgit v1.2.3


From c52d5e108434f857f79926723732522ee38f6a91 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 19:49:40 -0700
Subject: Refactor into BulletedItemList component

---
 .../website/ts/pages/jobs/bulleted_item_list.tsx   | 30 ++++++++++++++++++++++
 packages/website/ts/pages/jobs/values.tsx          | 27 +++----------------
 2 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
new file mode 100644
index 000000000..108f31e00
--- /dev/null
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -0,0 +1,30 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+
+export interface BulletedItemListProps {
+    headerText: string;
+    bulletedItems: BulletedItemProps[];
+}
+export const BulletedItemList = (props: BulletedItemListProps) => {
+    return (
+        <div className="mx-auto max-width-4">
+            <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
+                {props.headerText}
+            </div>
+            <div className="px2">
+                {_.map(props.bulletedItems, bulletedItemProps => {
+                    return (
+                        <BulletedItem
+                            bulletColor={bulletedItemProps.bulletColor}
+                            title={bulletedItemProps.title}
+                            description={bulletedItemProps.description}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 9bb98d016..37e62d23b 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,7 +2,8 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 
 const BULLETED_ITEMS: BulletedItemProps[] = [
     {
@@ -22,26 +23,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [
     },
 ];
 
-export const Values = () => {
-    const isSmallScreen = false;
-    return (
-        <div className="clearfix" style={{ backgroundColor: colors.white }}>
-            <div className="mx-auto max-width-4 clearfix">
-                <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
-                    Our Values
-                </div>
-                <div className="col col-12 px2">
-                    {_.map(BULLETED_ITEMS, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-};
+export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />;
-- 
cgit v1.2.3


From 3c073bc360f88129bd59e7e3d0d7fbcf69828da4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 20:45:18 -0700
Subject: Benefits section

---
 packages/website/ts/pages/jobs/benefits.tsx        | 84 +++++++++++++++++++---
 .../website/ts/pages/jobs/bulleted_item_list.tsx   |  1 +
 packages/website/ts/pages/jobs/jobs.tsx            |  2 +-
 3 files changed, 75 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index fa4edb240..03a906a10 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,22 +1,84 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
+import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { FloatingImage } from 'ts/pages/jobs/floating_image';
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
 
-export const Benefits = () => (
+const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
+const BULLETED_ITEMS: BulletedItemProps[] = [
+    {
+        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.',
+    },
+    {
+        bulletColor: '#6FCF97',
+        title: 'Test test yo',
+        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+    },
+    {
+        bulletColor: '#56CCF2',
+        title: 'Waddle Waddle',
+        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+    },
+];
+
+export interface BenefitsProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Benefits = (props: BenefitsProps) => (
+    <div style={{ backgroundColor: colors.jobsPageGrey }}>
+        {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
+    </div>
+);
+
+const LargeLayout = () => (
     <div className="flex" style={{ height: 937 }}>
         <div style={{ width: '43%', height: '100%' }}>
-            <div className="flex" style={{ height: '67%' }}>
-                <FilledImage src="/images/jobs/location1.png" />
+            <ImageGrid />
+        </div>
+        <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}>
+            <BenefitsList />
+        </div>
+    </div>
+);
+
+const SmallLayout = () => (
+    <div>
+        <FloatingImage src={_.head(IMAGE_PATHS)} />
+        <BenefitsList />
+    </div>
+);
+
+const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />;
+
+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="clearfix" style={{ height: '33%' }}>
-                <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
-                    <FilledImage src="/images/jobs/location2.png" />
-                </div>
-                <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
-                    <FilledImage src="/images/jobs/location3.png" />
-                </div>
+            <div className="col lg-col-6 md-col-6 col-12" style={{ height: '100%' }}>
+                <FilledImage src={IMAGE_PATHS[2]} />
             </div>
         </div>
-        <div style={{ width: '57%', height: '100%' }} />
     </div>
 );
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
index 108f31e00..30dd126d1 100644
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -18,6 +18,7 @@ export const BulletedItemList = (props: BulletedItemListProps) => {
                 {_.map(props.bulletedItems, bulletedItemProps => {
                     return (
                         <BulletedItem
+                            key={bulletedItemProps.title}
                             bulletColor={bulletedItemProps.bulletColor}
                             title={bulletedItemProps.title}
                             description={bulletedItemProps.description}
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 70a11c8a4..9cce594fc 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -61,7 +61,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                     <PhotoRail images={PHOTO_RAIL_IMAGES} />
                 )}
                 <Values />
-                <Benefits />
+                <Benefits screenWidth={this.props.screenWidth} />
                 <Teams />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
-- 
cgit v1.2.3


From bc36c0faed11d61164027efad5b2ad9d07f0573f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 10 Jun 2018 21:29:15 -0700
Subject: Teams section

---
 packages/website/ts/pages/jobs/benefits.tsx        |  7 ++-
 packages/website/ts/pages/jobs/bulleted_item.tsx   | 22 --------
 .../website/ts/pages/jobs/bulleted_item_list.tsx   | 47 ++++++++++++++---
 packages/website/ts/pages/jobs/jobs.tsx            |  2 +-
 packages/website/ts/pages/jobs/teams.tsx           | 60 +++++++++-------------
 packages/website/ts/pages/jobs/values.tsx          |  7 ++-
 6 files changed, 70 insertions(+), 75 deletions(-)
 delete mode 100644 packages/website/ts/pages/jobs/bulleted_item.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 03a906a10..ce261592f 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,15 +1,14 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 import { FilledImage } from 'ts/pages/jobs/filled_image';
 import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 
 const IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -65,7 +64,7 @@ const SmallLayout = () => (
     </div>
 );
 
-const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItems={BULLETED_ITEMS} />;
+const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
 
 const ImageGrid = () => (
     <div style={{ width: '100%', height: '100%' }}>
diff --git a/packages/website/ts/pages/jobs/bulleted_item.tsx b/packages/website/ts/pages/jobs/bulleted_item.tsx
deleted file mode 100644
index 9dc4fe4a3..000000000
--- a/packages/website/ts/pages/jobs/bulleted_item.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-export interface BulletedItemProps {
-    bulletColor: string;
-    title: string;
-    description: string;
-    height?: number;
-}
-export const BulletedItem = (props: BulletedItemProps) => {
-    const minHeight = props.height || 150;
-    return (
-        <div className="flex" style={{ minHeight }}>
-            <svg className="flex-none px2" height="26" width="26">
-                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
-            </svg>
-            <div className="flex-auto px2">
-                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
-                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
index 30dd126d1..a00290418 100644
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
@@ -2,20 +2,30 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-
+export type BulletedItemInfo = BulletedItemProps;
 export interface BulletedItemListProps {
-    headerText: string;
-    bulletedItems: BulletedItemProps[];
+    headerText?: string;
+    bulletedItemInfos: BulletedItemInfo[];
 }
 export const BulletedItemList = (props: BulletedItemListProps) => {
     return (
         <div className="mx-auto max-width-4">
-            <div className="h2 lg-py4 md-py4 sm-py3" style={{ paddingLeft: 90, fontFamily: 'Roboto Mono' }}>
-                {props.headerText}
-            </div>
+            {!_.isUndefined(props.headerText) && (
+                <div
+                    className="h2 lg-py4 md-py4 sm-py3"
+                    style={{
+                        paddingLeft: 90,
+                        fontFamily: 'Roboto Mono',
+                        minHeight: '1.25em',
+                        lineHeight: 1.25,
+                    }}
+                >
+                    {props.headerText}
+                </div>
+            )}
+
             <div className="px2">
-                {_.map(props.bulletedItems, bulletedItemProps => {
+                {_.map(props.bulletedItemInfos, bulletedItemProps => {
                     return (
                         <BulletedItem
                             key={bulletedItemProps.title}
@@ -29,3 +39,24 @@ export const BulletedItemList = (props: BulletedItemListProps) => {
         </div>
     );
 };
+
+interface BulletedItemProps {
+    bulletColor: string;
+    title: string;
+    description: string;
+    height?: number;
+}
+const BulletedItem = (props: BulletedItemProps) => {
+    const minHeight = props.height || 150;
+    return (
+        <div className="flex" style={{ minHeight }}>
+            <svg className="flex-none px2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
+            </svg>
+            <div className="flex-auto px2">
+                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
+                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9cce594fc..f3b455379 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -62,7 +62,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 )}
                 <Values />
                 <Benefits screenWidth={this.props.screenWidth} />
-                <Teams />
+                <Teams screenWidth={this.props.screenWidth} />
                 <OpenPositions hash={OPEN_POSITIONS_HASH} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index b00170877..3d953c993 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItem, BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { ScreenWidths } from 'ts/types';
 
-const ITEMS_COLUMN1: BulletedItemProps[] = [
+const ITEMS_COLUMN1: BulletedItemInfo[] = [
     {
         bulletColor: '#EB5757',
         title: 'User Growth',
@@ -18,7 +19,7 @@ const ITEMS_COLUMN1: BulletedItemProps[] = [
             '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 ITEMS_COLUMN2: BulletedItemProps[] = [
+const ITEMS_COLUMN2: BulletedItemInfo[] = [
     {
         bulletColor: '#EB5757',
         title: 'Developer Tools',
@@ -32,38 +33,25 @@ const ITEMS_COLUMN2: BulletedItemProps[] = [
             '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';
 
-export const Teams = () => {
-    const isSmallScreen = false;
-    const teamHeight = 220;
-    return (
-        <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.white }}>
-            <div className="mx-auto max-width-4 clearfix">
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN1, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                                height={teamHeight}
-                            />
-                        );
-                    })}
-                </div>
-                <div className="col lg-col-6 md-col-6 col-12 p2">
-                    {_.map(ITEMS_COLUMN2, bulletedItemProps => {
-                        return (
-                            <BulletedItem
-                                bulletColor={bulletedItemProps.bulletColor}
-                                title={bulletedItemProps.title}
-                                description={bulletedItemProps.description}
-                                height={teamHeight}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
+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">
+        <div className="col lg-col-6 md-col-6 col-12">
+            <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
         </div>
-    );
-};
+        <div className="col lg-col-6 md-col-6 col-12">
+            <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} />
+        </div>
+    </div>
+);
+
+const SmallLayout = () => (
+    <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} />
+);
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 37e62d23b..45bbf950f 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,10 +2,9 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemProps } from 'ts/pages/jobs/bulleted_item';
-import { BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 
-const BULLETED_ITEMS: BulletedItemProps[] = [
+const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -23,4 +22,4 @@ const BULLETED_ITEMS: BulletedItemProps[] = [
     },
 ];
 
-export const Values = () => <BulletedItemList headerText="Our Values" bulletedItems={BULLETED_ITEMS} />;
+export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
-- 
cgit v1.2.3


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

---
 .../ts/components/relayer_index/relayer_index.tsx  |  32 +---
 packages/website/ts/components/ui/retry.tsx        |  33 ++++
 packages/website/ts/pages/jobs/benefits.tsx        |   2 +-
 packages/website/ts/pages/jobs/mission.tsx         |   2 +-
 packages/website/ts/pages/jobs/open_positions.tsx  | 196 +++++++++++++--------
 packages/website/ts/pages/jobs/teams.tsx           |   2 +-
 packages/website/ts/style/colors.ts                |   3 +-
 packages/website/ts/types.ts                       |   8 +
 packages/website/ts/utils/backend_client.ts        |  13 +-
 9 files changed, 187 insertions(+), 104 deletions(-)
 create mode 100644 packages/website/ts/components/ui/retry.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 683f7084b..69a7cada1 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -6,6 +6,7 @@ import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { Retry } from 'ts/components/ui/retry';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
@@ -63,7 +64,8 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
         if (!isReadyToRender) {
             return (
-                // TODO: consolidate this loading component with the one in portal
+                // TODO: consolidate this loading component with the one in portal and OpenPositions
+                // TODO: possibly refactor into a generic loading container with spinner and retry UI
                 <div className="center">
                     {_.isUndefined(this.state.error) ? (
                         <CircularProgress size={40} thickness={5} />
@@ -124,31 +126,3 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         }
     }
 }
-
-interface RetryProps {
-    onRetry: () => void;
-}
-const Retry = (props: RetryProps) => (
-    <div className="clearfix center" style={{ color: colors.black }}>
-        <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
-            <div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
-                Something went wrong.
-            </div>
-            <div className="py3">
-                <FlatButton
-                    label={'reload'}
-                    backgroundColor={colors.black}
-                    labelStyle={{
-                        fontSize: 18,
-                        fontFamily: 'Roboto Mono',
-                        fontWeight: 'lighter',
-                        color: colors.white,
-                        textTransform: 'lowercase',
-                    }}
-                    style={{ width: 280, height: 62, borderRadius: 5 }}
-                    onClick={props.onRetry}
-                />
-            </div>
-        </div>
-    </div>
-);
diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx
new file mode 100644
index 000000000..f18b5abac
--- /dev/null
+++ b/packages/website/ts/components/ui/retry.tsx
@@ -0,0 +1,33 @@
+import FlatButton from 'material-ui/FlatButton';
+import { GridList } from 'material-ui/GridList';
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+
+export interface RetryProps {
+    onRetry: () => void;
+}
+export const Retry = (props: RetryProps) => (
+    <div className="clearfix center" style={{ color: colors.black }}>
+        <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
+            <div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
+                Something went wrong.
+            </div>
+            <div className="py3">
+                <FlatButton
+                    label={'reload'}
+                    backgroundColor={colors.black}
+                    labelStyle={{
+                        fontSize: 18,
+                        fontFamily: 'Roboto Mono',
+                        fontWeight: 'lighter',
+                        color: colors.white,
+                        textTransform: 'lowercase',
+                    }}
+                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                    onClick={props.onRetry}
+                />
+            </div>
+        </div>
+    </div>
+);
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index ce261592f..a7cc23503 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -41,7 +41,7 @@ export interface BenefitsProps {
 }
 
 export const Benefits = (props: BenefitsProps) => (
-    <div style={{ backgroundColor: colors.jobsPageGrey }}>
+    <div style={{ backgroundColor: colors.jobsPageBackground }}>
         {props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />}
     </div>
 );
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>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f9c37d36f..5eb8e429d 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -1,80 +1,136 @@
 import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
 import * as React from 'react';
 
-const POSITIONS = [
-    {
-        name: 'Community Director',
-        department: 'Marketing',
-        office: 'Remote / San Francisco',
-    },
-    {
-        name: 'Data Scientist / Data Engineer',
-        department: 'Engineering',
-        office: 'Remote / San Francisco',
-    },
-    {
-        name: 'Executive Assitant / Office Manager',
-        department: 'Operations',
-        office: 'Remote / San Francisco',
-    },
-    {
-        name: 'Research Fellow - Economics / Governance',
-        department: 'Engineering',
-        office: 'Remote / San Francisco',
-    },
-    {
-        name: 'Software Engineer - Blockchain',
-        department: 'Engineer',
-        office: 'Remote / San Francisco',
-    },
-    {
-        name: 'Software Engineer - Full-stack',
-        department: 'Marketing',
-        office: 'Remote / San Francisco',
-    },
-];
+import { Retry } from 'ts/components/ui/retry';
+import { colors } from 'ts/style/colors';
+import { WebsiteBackendJobInfo } from 'ts/types';
+import { backendClient } from 'ts/utils/backend_client';
+
+const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
 
 export interface OpenPositionsProps {
     hash: string;
 }
+export interface OpenPositionsState {
+    jobInfos?: WebsiteBackendJobInfo[];
+    error?: Error;
+}
 
-export const OpenPositions = (props: OpenPositionsProps) => {
-    const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
-    return (
-        <div id={props.hash} className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
-            <Table selectable={false}>
-                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
-                    <TableRow>
-                        <TableHeaderColumn colSpan={6} style={labelStyle}>
-                            Position
-                        </TableHeaderColumn>
-                        <TableHeaderColumn colSpan={3} style={labelStyle}>
-                            Department
-                        </TableHeaderColumn>
-                        <TableHeaderColumn colSpan={3} style={labelStyle}>
-                            Office
-                        </TableHeaderColumn>
-                    </TableRow>
-                </TableHeader>
-                <TableBody displayRowCheckbox={false} showRowHover={true}>
-                    {_.map(POSITIONS, position => {
-                        return (
-                            <TableRow hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
-                                <TableRowColumn colSpan={6} style={labelStyle}>
-                                    {position.name}
-                                </TableRowColumn>
-                                <TableRowColumn colSpan={3} style={labelStyle}>
-                                    {position.department}
-                                </TableRowColumn>
-                                <TableRowColumn colSpan={3} style={labelStyle}>
-                                    {position.office}
-                                </TableRowColumn>
+export class OpenPositions extends React.Component<OpenPositionsProps, OpenPositionsState> {
+    private _isUnmounted: boolean;
+    constructor(props: OpenPositionsProps) {
+        super(props);
+        this._isUnmounted = false;
+        this.state = {
+            jobInfos: undefined,
+            error: undefined,
+        };
+    }
+    public componentWillMount(): void {
+        // tslint:disable-next-line:no-floating-promises
+        this._fetchJobInfosAsync();
+    }
+    public componentWillUnmount(): void {
+        this._isUnmounted = true;
+    }
+    public render(): React.ReactNode {
+        const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos);
+        if (!isReadyToRender) {
+            return (
+                // TODO: consolidate this loading component with the one in portal and RelayerIndex
+                // TODO: possibly refactor into a generic loading container with spinner and retry UI
+                <div className="center">
+                    {_.isUndefined(this.state.error) ? (
+                        <CircularProgress size={40} thickness={5} />
+                    ) : (
+                        <Retry onRetry={this._fetchJobInfosAsync.bind(this)} />
+                    )}
+                </div>
+            );
+        } else {
+            return (
+                <div id={this.props.hash} className="mx-auto max-width-4">
+                    <Title />
+                    <Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
+                        <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+                            <TableRow>
+                                <TableHeaderColumn colSpan={5} style={labelStyle}>
+                                    Position
+                                </TableHeaderColumn>
+                                <TableHeaderColumn colSpan={3} style={labelStyle}>
+                                    Department
+                                </TableHeaderColumn>
+                                <TableHeaderColumn colSpan={4} style={labelStyle}>
+                                    Office
+                                </TableHeaderColumn>
                             </TableRow>
-                        );
-                    })}
-                </TableBody>
-            </Table>
-        </div>
-    );
-};
+                        </TableHeader>
+                        <TableBody displayRowCheckbox={false} showRowHover={true}>
+                            {_.map(this.state.jobInfos, jobInfo => {
+                                return this._renderJobInfo(jobInfo);
+                            })}
+                        </TableBody>
+                    </Table>
+                </div>
+            );
+        }
+    }
+    private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode {
+        return (
+            <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
+                <TableRowColumn colSpan={5} style={labelStyle}>
+                    {jobInfo.title}
+                </TableRowColumn>
+                <TableRowColumn colSpan={3} style={labelStyle}>
+                    {jobInfo.department}
+                </TableRowColumn>
+                <TableRowColumn colSpan={4} style={labelStyle}>
+                    {jobInfo.office}
+                </TableRowColumn>
+            </TableRow>
+        );
+    }
+    private async _fetchJobInfosAsync(): Promise<void> {
+        try {
+            if (!this._isUnmounted) {
+                this.setState({
+                    jobInfos: undefined,
+                    error: undefined,
+                });
+            }
+            const jobInfos = await backendClient.getJobInfosAsync();
+            if (!this._isUnmounted) {
+                this.setState({
+                    jobInfos,
+                });
+            }
+        } catch (error) {
+            if (!this._isUnmounted) {
+                this.setState({
+                    error,
+                });
+            }
+        }
+    }
+    private _onCellClick(rowNumber: number): void {
+        if (_.isUndefined(this.state.jobInfos)) {
+            return;
+        }
+        const url = this.state.jobInfos[rowNumber].url;
+        window.open(url, '_blank');
+    }
+}
+
+const Title = () => (
+    <div
+        className="h2 lg-py4 md-py4 sm-py3"
+        style={{
+            paddingLeft: 90,
+            fontFamily: 'Roboto Mono',
+        }}
+    >
+        {'Open Positions'}
+    </div>
+);
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index 3d953c993..465bae7f4 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -42,7 +42,7 @@ export interface TeamsProps {
 export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.Sm ? <SmallLayout /> : <LargeLayout />);
 
 const LargeLayout = () => (
-    <div className="mx-auto max-width-4 clearfix">
+    <div className="mx-auto max-width-4 clearfix pb4">
         <div className="col lg-col-6 md-col-6 col-12">
             <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
         </div>
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 002318e14..539f3e125 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -11,7 +11,8 @@ const appColors = {
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
     drawerMenuBackground: '#4a4a4a',
     menuItemDefaultSelectedBackground: '#424242',
-    jobsPageGrey: '#fafafa',
+    jobsPageBackground: '#fafafa',
+    jobsPageOpenPositionRow: '#f5f5f5',
 };
 
 export const colors = {
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 15444e517..24e86a901 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -536,4 +536,12 @@ export interface WebsiteBackendTokenInfo {
 export interface WebsiteBackendGasInfo {
     average: number;
 }
+
+export interface WebsiteBackendJobInfo {
+    id: number;
+    title: string;
+    department: string;
+    office: string;
+    url: string;
+}
 // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index 6b16aea6b..835a6ef4d 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -1,10 +1,17 @@
 import * as _ from 'lodash';
 
-import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types';
+import {
+    ArticlesBySection,
+    WebsiteBackendGasInfo,
+    WebsiteBackendJobInfo,
+    WebsiteBackendPriceInfo,
+    WebsiteBackendRelayerInfo,
+} from 'ts/types';
 import { fetchUtils } from 'ts/utils/fetch_utils';
 import { utils } from 'ts/utils/utils';
 
 const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
+const JOBS_ENDPOINT = '/jobs';
 const PRICES_ENDPOINT = '/prices';
 const RELAYERS_ENDPOINT = '/relayers';
 const WIKI_ENDPOINT = '/wiki';
@@ -15,6 +22,10 @@ export const backendClient = {
         const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), ETH_GAS_STATION_ENDPOINT);
         return result;
     },
+    async getJobInfosAsync(): Promise<WebsiteBackendJobInfo[]> {
+        const result = await fetchUtils.requestAsync(utils.getBackendBaseUrl(), JOBS_ENDPOINT);
+        return result;
+    },
     async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> {
         if (_.isEmpty(tokenSymbols)) {
             return {};
-- 
cgit v1.2.3


From 7080f0c35a3e5c84fa2907c6feb0610c699c2823 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 10:38:41 -0700
Subject: Implement small open positions

---
 packages/website/ts/pages/jobs/benefits.tsx        |  57 ++++++++---
 .../website/ts/pages/jobs/bulleted_item_list.tsx   |  62 ------------
 packages/website/ts/pages/jobs/jobs.tsx            |   2 +-
 .../website/ts/pages/jobs/list/header_item.tsx     |  24 +++++
 packages/website/ts/pages/jobs/list/list_item.tsx  |  15 +++
 packages/website/ts/pages/jobs/open_positions.tsx  | 112 +++++++++++++++------
 packages/website/ts/pages/jobs/teams.tsx           |  42 ++++++--
 packages/website/ts/pages/jobs/values.tsx          |  38 ++++++-
 8 files changed, 232 insertions(+), 120 deletions(-)
 delete mode 100644 packages/website/ts/pages/jobs/bulleted_item_list.tsx
 create mode 100644 packages/website/ts/pages/jobs/list/header_item.tsx
 create mode 100644 packages/website/ts/pages/jobs/list/list_item.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index a7cc23503..b27c68a5b 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,40 +1,45 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
 import { FilledImage } from 'ts/pages/jobs/filled_image';
 import { FloatingImage } from 'ts/pages/jobs/floating_image';
+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 IMAGE_PATHS = ['/images/jobs/location1.png', '/images/jobs/location2.png', '/images/jobs/location3.png'];
-const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
+const BENEFIT_ITEM_PROPS_LIST: BenefitItemProps[] = [
     {
         bulletColor: '#6FCF97',
-        title: 'Ethics/Doing the right thing',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+        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',
-        title: 'Consistently ship',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+        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: 'Focus on long term impact',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+        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: '#6FCF97',
-        title: 'Test test yo',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+        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',
-        title: 'Waddle Waddle',
-        description: 'orem ipsum dolor sit amet, consectetur adipiscing elit.',
+        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 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;
@@ -47,11 +52,14 @@ export const Benefits = (props: BenefitsProps) => (
 );
 
 const LargeLayout = () => (
-    <div className="flex" style={{ height: 937 }}>
+    <div className="flex" style={{ height: LARGE_LAYOUT_HEIGHT }}>
         <div style={{ width: '43%', height: '100%' }}>
             <ImageGrid />
         </div>
-        <div style={{ paddingLeft: 205, width: '57%', height: '100%' }}>
+        <div
+            className="pr4"
+            style={{ paddingLeft: LARGE_LAYOUT_BENEFITS_LIST_PADDING_LEFT, width: '57%', height: '100%' }}
+        >
             <BenefitsList />
         </div>
     </div>
@@ -64,7 +72,26 @@ const SmallLayout = () => (
     </div>
 );
 
-const BenefitsList = () => <BulletedItemList headerText="Benefits" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
+export const BenefitsList = () => {
+    return (
+        <div>
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))}
+        </div>
+    );
+};
+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%' }}>
diff --git a/packages/website/ts/pages/jobs/bulleted_item_list.tsx b/packages/website/ts/pages/jobs/bulleted_item_list.tsx
deleted file mode 100644
index a00290418..000000000
--- a/packages/website/ts/pages/jobs/bulleted_item_list.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-export type BulletedItemInfo = BulletedItemProps;
-export interface BulletedItemListProps {
-    headerText?: string;
-    bulletedItemInfos: BulletedItemInfo[];
-}
-export const BulletedItemList = (props: BulletedItemListProps) => {
-    return (
-        <div className="mx-auto max-width-4">
-            {!_.isUndefined(props.headerText) && (
-                <div
-                    className="h2 lg-py4 md-py4 sm-py3"
-                    style={{
-                        paddingLeft: 90,
-                        fontFamily: 'Roboto Mono',
-                        minHeight: '1.25em',
-                        lineHeight: 1.25,
-                    }}
-                >
-                    {props.headerText}
-                </div>
-            )}
-
-            <div className="px2">
-                {_.map(props.bulletedItemInfos, bulletedItemProps => {
-                    return (
-                        <BulletedItem
-                            key={bulletedItemProps.title}
-                            bulletColor={bulletedItemProps.bulletColor}
-                            title={bulletedItemProps.title}
-                            description={bulletedItemProps.description}
-                        />
-                    );
-                })}
-            </div>
-        </div>
-    );
-};
-
-interface BulletedItemProps {
-    bulletColor: string;
-    title: string;
-    description: string;
-    height?: number;
-}
-const BulletedItem = (props: BulletedItemProps) => {
-    const minHeight = props.height || 150;
-    return (
-        <div className="flex" style={{ minHeight }}>
-            <svg className="flex-none px2" height="26" width="26">
-                <circle cx="13" cy="13" r="13" fill={props.bulletColor} />
-            </svg>
-            <div className="flex-auto px2">
-                <div style={{ paddingTop: 3, fontWeight: 'bold', fontSize: 16 }}>{props.title}</div>
-                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 2 }}>{props.description}</div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index f3b455379..9fd305972 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -63,7 +63,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 <Values />
                 <Benefits screenWidth={this.props.screenWidth} />
                 <Teams screenWidth={this.props.screenWidth} />
-                <OpenPositions hash={OPEN_POSITIONS_HASH} />
+                <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
             </div>
         );
diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
new file mode 100644
index 000000000..b130cb0c4
--- /dev/null
+++ b/packages/website/ts/pages/jobs/list/header_item.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { ListItem } from 'ts/pages/jobs/list/list_item';
+
+export interface HeaderItemProps {
+    headerText?: string;
+}
+export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerText }) => {
+    return (
+        <div className="h2 lg-py4 md-py4 sm-py3">
+            <ListItem>
+                <div
+                    style={{
+                        fontFamily: 'Roboto Mono',
+                        minHeight: '1.25em',
+                        lineHeight: 1.25,
+                    }}
+                >
+                    {headerText}
+                </div>
+            </ListItem>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx
new file mode 100644
index 000000000..d7838bc01
--- /dev/null
+++ b/packages/website/ts/pages/jobs/list/list_item.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface ListItemProps {
+    bulletColor?: string;
+}
+export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => {
+    return (
+        <div className="flex items-center">
+            <svg className="flex-none lg-px2 md-px2 sm-pl2" height="26" width="26">
+                <circle cx="13" cy="13" r="13" fill={bulletColor || 'transparent'} />
+            </svg>
+            <div className="flex-auto px2">{children}</div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index 5eb8e429d..f6dbc38a0 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -4,14 +4,20 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol
 import * as React from 'react';
 
 import { Retry } from 'ts/components/ui/retry';
+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 { WebsiteBackendJobInfo } from 'ts/types';
+import { styled } from 'ts/style/theme';
+import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 
 const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
+const HEADER_TEXT = 'Open Positions';
+const LIST_ITEM_MIN_HEIGHT = 80;
 
 export interface OpenPositionsProps {
     hash: string;
+    screenWidth: ScreenWidths;
 }
 export interface OpenPositionsState {
     jobInfos?: WebsiteBackendJobInfo[];
@@ -37,6 +43,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
     }
     public render(): React.ReactNode {
         const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos);
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         if (!isReadyToRender) {
             return (
                 // TODO: consolidate this loading component with the one in portal and RelayerIndex
@@ -52,32 +59,54 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
         } else {
             return (
                 <div id={this.props.hash} className="mx-auto max-width-4">
-                    <Title />
-                    <Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
-                        <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
-                            <TableRow>
-                                <TableHeaderColumn colSpan={5} style={labelStyle}>
-                                    Position
-                                </TableHeaderColumn>
-                                <TableHeaderColumn colSpan={3} style={labelStyle}>
-                                    Department
-                                </TableHeaderColumn>
-                                <TableHeaderColumn colSpan={4} style={labelStyle}>
-                                    Office
-                                </TableHeaderColumn>
-                            </TableRow>
-                        </TableHeader>
-                        <TableBody displayRowCheckbox={false} showRowHover={true}>
-                            {_.map(this.state.jobInfos, jobInfo => {
-                                return this._renderJobInfo(jobInfo);
-                            })}
-                        </TableBody>
-                    </Table>
+                    {isSmallScreen ? this._renderList() : this._renderTable()}
                 </div>
             );
         }
     }
-    private _renderJobInfo(jobInfo: WebsiteBackendJobInfo): React.ReactNode {
+    private _renderList(): React.ReactNode {
+        return (
+            <div style={{ backgroundColor: colors.jobsPageBackground }}>
+                <HeaderItem headerText={HEADER_TEXT} />
+                {_.map(this.state.jobInfos, jobInfo => (
+                    <JobInfoListItem
+                        key={jobInfo.id}
+                        title={jobInfo.title}
+                        description={jobInfo.department}
+                        onClick={this._openJobInfoUrl.bind(this, jobInfo)}
+                    />
+                ))}
+            </div>
+        );
+    }
+    private _renderTable(): React.ReactNode {
+        return (
+            <div>
+                <HeaderItem headerText={HEADER_TEXT} />
+                <Table selectable={false} onCellClick={this._onCellClick.bind(this)}>
+                    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+                        <TableRow>
+                            <TableHeaderColumn colSpan={5} style={labelStyle}>
+                                Position
+                            </TableHeaderColumn>
+                            <TableHeaderColumn colSpan={3} style={labelStyle}>
+                                Department
+                            </TableHeaderColumn>
+                            <TableHeaderColumn colSpan={4} style={labelStyle}>
+                                Office
+                            </TableHeaderColumn>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody displayRowCheckbox={false} showRowHover={true}>
+                        {_.map(this.state.jobInfos, jobInfo => {
+                            return this._renderJobInfoTableRow(jobInfo);
+                        })}
+                    </TableBody>
+                </Table>
+            </div>
+        );
+    }
+    private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode {
         return (
             <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
                 <TableRowColumn colSpan={5} style={labelStyle}>
@@ -118,19 +147,36 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
         if (_.isUndefined(this.state.jobInfos)) {
             return;
         }
-        const url = this.state.jobInfos[rowNumber].url;
+        const jobInfo = this.state.jobInfos[rowNumber];
+        this._openJobInfoUrl(jobInfo);
+    }
+
+    private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
+        const url = jobInfo.url;
         window.open(url, '_blank');
     }
 }
 
-const Title = () => (
-    <div
-        className="h2 lg-py4 md-py4 sm-py3"
-        style={{
-            paddingLeft: 90,
-            fontFamily: 'Roboto Mono',
-        }}
-    >
-        {'Open Positions'}
+export interface JobInfoListItemProps {
+    title?: string;
+    description?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => (
+    <div className="mb3" onClick={onClick}>
+        <ListItem>
+            <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div>
+            <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}>
+                {description}
+            </div>
+        </ListItem>
     </div>
 );
+
+export const JobInfoListItem = styled(PlainJobInfoListItem)`
+    cursor: pointer;
+    &:hover {
+        opacity: 0.5;
+    }
+`;
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index 465bae7f4..dcb457d06 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -2,10 +2,11 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
 import { ScreenWidths } from 'ts/types';
 
-const ITEMS_COLUMN1: BulletedItemInfo[] = [
+const TEAM_ITEM_PROPS_COLUMN1: TeamItemProps[] = [
     {
         bulletColor: '#EB5757',
         title: 'User Growth',
@@ -19,7 +20,7 @@ const ITEMS_COLUMN1: BulletedItemInfo[] = [
             '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 ITEMS_COLUMN2: BulletedItemInfo[] = [
+const TEAM_ITEM_PROPS_COLUMN2: TeamItemProps[] = [
     {
         bulletColor: '#EB5757',
         title: 'Developer Tools',
@@ -34,6 +35,7 @@ const ITEMS_COLUMN2: BulletedItemInfo[] = [
     },
 ];
 const HEADER_TEXT = 'Our Teams';
+const MINIMUM_ITEM_HEIGHT = 240;
 
 export interface TeamsProps {
     screenWidth: ScreenWidths;
@@ -44,14 +46,42 @@ export const Teams = (props: TeamsProps) => (props.screenWidth === ScreenWidths.
 const LargeLayout = () => (
     <div className="mx-auto max-width-4 clearfix pb4">
         <div className="col lg-col-6 md-col-6 col-12">
-            <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={ITEMS_COLUMN1} />
+            <HeaderItem headerText={HEADER_TEXT} />
+            {_.map(TEAM_ITEM_PROPS_COLUMN1, teamItemProps => React.createElement(TeamItem, teamItemProps))}
         </div>
         <div className="col lg-col-6 md-col-6 col-12">
-            <BulletedItemList headerText=" " bulletedItemInfos={ITEMS_COLUMN2} />
+            <HeaderItem headerText=" " />
+            {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => React.createElement(TeamItem, teamItemProps))}
         </div>
     </div>
 );
 
 const SmallLayout = () => (
-    <BulletedItemList headerText={HEADER_TEXT} bulletedItemInfos={_.concat(ITEMS_COLUMN1, ITEMS_COLUMN2)} />
+    <div>
+        <HeaderItem headerText={HEADER_TEXT} />
+        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps =>
+            React.createElement(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}>
+                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+            </ListItem>
+            <ListItem>
+                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                    {description}
+                </div>
+            </ListItem>
+        </div>
+    );
+};
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 45bbf950f..abacafdba 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -2,9 +2,10 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { BulletedItemInfo, BulletedItemList } from 'ts/pages/jobs/bulleted_item_list';
+import { HeaderItem } from 'ts/pages/jobs/list/header_item';
+import { ListItem } from 'ts/pages/jobs/list/list_item';
 
-const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
+const VALUE_ITEM_PROPS_LIST: ValueItemProps[] = [
     {
         bulletColor: '#6FCF97',
         title: 'Ethics/Doing the right thing',
@@ -22,4 +23,35 @@ const BULLETED_ITEM_INFOS: BulletedItemInfo[] = [
     },
 ];
 
-export const Values = () => <BulletedItemList headerText="Our Values" bulletedItemInfos={BULLETED_ITEM_INFOS} />;
+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 => React.createElement(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}>
+                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+            </ListItem>
+            <ListItem>
+                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                    {description}
+                </div>
+            </ListItem>
+        </div>
+    );
+};
-- 
cgit v1.2.3


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/components/relayer_index/relayer_index.tsx | 1 -
 packages/website/ts/components/ui/retry.tsx                    | 1 -
 packages/website/ts/containers/jobs.ts                         | 3 +--
 packages/website/ts/index.tsx                                  | 1 -
 packages/website/ts/pages/jobs/jobs.tsx                        | 1 -
 packages/website/ts/pages/jobs/mission.tsx                     | 6 ++++--
 packages/website/ts/pages/jobs/open_positions.tsx              | 9 +++++++--
 packages/website/ts/pages/jobs/photo_rail.tsx                  | 3 ---
 packages/website/ts/pages/jobs/teams.tsx                       | 1 -
 packages/website/ts/pages/jobs/values.tsx                      | 1 -
 10 files changed, 12 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 69a7cada1..3c5761bcd 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,7 +1,6 @@
 import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import FlatButton from 'material-ui/FlatButton';
 import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx
index f18b5abac..accdbfe9c 100644
--- a/packages/website/ts/components/ui/retry.tsx
+++ b/packages/website/ts/components/ui/retry.tsx
@@ -1,5 +1,4 @@
 import FlatButton from 'material-ui/FlatButton';
-import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts
index 63ef59221..b18485882 100644
--- a/packages/website/ts/containers/jobs.ts
+++ b/packages/website/ts/containers/jobs.ts
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -17,7 +16,7 @@ interface ConnectedDispatch {
     dispatcher: Dispatcher;
 }
 
-const mapStateToProps = (state: State, ownProps: JobsProps): ConnectedState => ({
+const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({
     translate: state.translate,
     screenWidth: state.screenWidth,
 });
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index a8749d8bf..5501f5972 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -4,7 +4,6 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
-import { createStore, Store as ReduxStore } from 'redux';
 import { About } from 'ts/containers/about';
 import { FAQ } from 'ts/containers/faq';
 import { Jobs } from 'ts/containers/jobs';
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 9fd305972..c23b4a976 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -15,7 +15,6 @@ 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';
 
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>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f6dbc38a0..c43cc43fe 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -13,7 +13,7 @@ import { backendClient } from 'ts/utils/backend_client';
 
 const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
 const HEADER_TEXT = 'Open Positions';
-const LIST_ITEM_MIN_HEIGHT = 80;
+const TABLE_ROW_MIN_HEIGHT = 100;
 
 export interface OpenPositionsProps {
     hash: string;
@@ -108,7 +108,12 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
     }
     private _renderJobInfoTableRow(jobInfo: WebsiteBackendJobInfo): React.ReactNode {
         return (
-            <TableRow key={jobInfo.id} hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
+            <TableRow
+                key={jobInfo.id}
+                hoverable={true}
+                displayBorder={false}
+                style={{ height: TABLE_ROW_MIN_HEIGHT, border: 2 }}
+            >
                 <TableRowColumn colSpan={5} style={labelStyle}>
                     {jobInfo.title}
                 </TableRowColumn>
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
index bcc3444ec..4db4bc31b 100644
--- a/packages/website/ts/pages/jobs/photo_rail.tsx
+++ b/packages/website/ts/pages/jobs/photo_rail.tsx
@@ -2,9 +2,6 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { FilledImage } from 'ts/pages/jobs/filled_image';
-import { ScreenWidths } from 'ts/types';
-
-const IMAGE_PATHS = ['/images/jobs/office1.png', '/images/jobs/office2.png', '/images/jobs/office3.png'];
 
 export interface PhotoRailProps {
     images: string[];
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index dcb457d06..d5960949a 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -1,4 +1,3 @@
-import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index abacafdba..799db3d67 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -1,4 +1,3 @@
-import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-- 
cgit v1.2.3


From eba8b4bf00f6e1794a8642a8972585f062c58d3b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 13:45:56 -0700
Subject: Consolidate jobs page grey colors with shared colors

---
 packages/website/ts/style/colors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index 539f3e125..bfec3ea41 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -11,8 +11,8 @@ const appColors = {
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
     drawerMenuBackground: '#4a4a4a',
     menuItemDefaultSelectedBackground: '#424242',
-    jobsPageBackground: '#fafafa',
-    jobsPageOpenPositionRow: '#f5f5f5',
+    jobsPageBackground: sharedColors.green50,
+    jobsPageOpenPositionRow: sharedColors.green100,
 };
 
 export const colors = {
-- 
cgit v1.2.3


From d206d0a3aea86612a274427bcf2eaa590f46c6e7 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 14:23:03 -0700
Subject: Add font family to Button component and use in Join0x component

---
 packages/website/ts/components/ui/button.tsx |  4 +++-
 packages/website/ts/pages/jobs/join_0x.tsx   | 25 +++++++++++++------------
 2 files changed, 16 insertions(+), 13 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 4c7d59839..1f88297de 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -7,6 +7,7 @@ export interface ButtonProps {
     className?: string;
     fontSize?: string;
     fontColor?: string;
+    fontFamily?: string;
     backgroundColor?: string;
     borderColor?: string;
     width?: string;
@@ -28,7 +29,7 @@ export const Button = styled(PlainButton)`
     border-radius: 6px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
-    font-family: 'Roboto';
+    font-family: ${props => props.fontFamily};
     width: ${props => props.width};
     background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
@@ -44,6 +45,7 @@ Button.defaultProps = {
     fontSize: '12px',
     backgroundColor: colors.white,
     width: 'auto',
+    fontFamily: 'Roboto',
 };
 
 Button.displayName = 'Button';
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index e7fdf3ce1..72cce3b89 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -1,8 +1,11 @@
 import { colors } from '@0xproject/react-shared';
 
-import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
+import { Button } from 'ts/components/ui/button';
+
+const BUTTON_TEXT = 'view open positions';
+
 export interface Join0xProps {
     onCallToActionClick: () => void;
 }
@@ -21,19 +24,17 @@ export const Join0x = (props: Join0xProps) => (
                 work remotely anywhere in the world to help create the infrastructure of a new tokenized economy.
             </div>
             <div className="py3">
-                <FlatButton
-                    label={'view open positions'}
+                <Button
+                    type="button"
                     backgroundColor={colors.black}
-                    labelStyle={{
-                        fontSize: 18,
-                        fontFamily: 'Roboto Mono',
-                        fontWeight: 'lighter',
-                        color: colors.white,
-                        textTransform: 'lowercase',
-                    }}
-                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                    width="290px"
+                    fontColor={colors.white}
+                    fontSize="18px"
+                    fontFamily="Roboto Mono"
                     onClick={props.onCallToActionClick}
-                />
+                >
+                    {BUTTON_TEXT}
+                </Button>
             </div>
         </div>
     </div>
-- 
cgit v1.2.3


From 982391cd7cc9fbcd5da26cd671a2b656fc48772d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 14:23:47 -0700
Subject: Fix incorrect colors

---
 packages/website/ts/style/colors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index bfec3ea41..b15000d7a 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -11,8 +11,8 @@ const appColors = {
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
     drawerMenuBackground: '#4a4a4a',
     menuItemDefaultSelectedBackground: '#424242',
-    jobsPageBackground: sharedColors.green50,
-    jobsPageOpenPositionRow: sharedColors.green100,
+    jobsPageBackground: sharedColors.grey50,
+    jobsPageOpenPositionRow: sharedColors.grey100,
 };
 
 export const colors = {
-- 
cgit v1.2.3


From 084285a76002bc1659797ee9a1aabc5bfae9e7d2 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 14:26:48 -0700
Subject: Replace FlatButton with Button in Retry

---
 packages/website/ts/components/ui/retry.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx
index accdbfe9c..543b7df4b 100644
--- a/packages/website/ts/components/ui/retry.tsx
+++ b/packages/website/ts/components/ui/retry.tsx
@@ -1,8 +1,10 @@
-import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 
+import { Button } from 'ts/components/ui/button';
 import { colors } from 'ts/style/colors';
 
+const BUTTON_TEXT = 'reload';
+
 export interface RetryProps {
     onRetry: () => void;
 }
@@ -13,19 +15,17 @@ export const Retry = (props: RetryProps) => (
                 Something went wrong.
             </div>
             <div className="py3">
-                <FlatButton
-                    label={'reload'}
+                <Button
+                    type="button"
                     backgroundColor={colors.black}
-                    labelStyle={{
-                        fontSize: 18,
-                        fontFamily: 'Roboto Mono',
-                        fontWeight: 'lighter',
-                        color: colors.white,
-                        textTransform: 'lowercase',
-                    }}
-                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                    width="290px"
+                    fontColor={colors.white}
+                    fontSize="18px"
+                    fontFamily="Roboto Mono"
                     onClick={props.onRetry}
-                />
+                >
+                    {BUTTON_TEXT}
+                </Button>
             </div>
         </div>
     </div>
-- 
cgit v1.2.3


From ca41f100ab9187b32b61ef83f8affed5ae3670b8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 14:49:42 -0700
Subject: Move FilledImage into components/ui

---
 packages/website/ts/components/ui/filled_image.tsx | 18 ++++++++++++++++++
 packages/website/ts/pages/jobs/benefits.tsx        |  2 +-
 packages/website/ts/pages/jobs/filled_image.tsx    | 18 ------------------
 packages/website/ts/pages/jobs/photo_rail.tsx      |  2 +-
 4 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 packages/website/ts/components/ui/filled_image.tsx
 delete mode 100644 packages/website/ts/pages/jobs/filled_image.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx
new file mode 100644
index 000000000..7f58ee5b9
--- /dev/null
+++ b/packages/website/ts/components/ui/filled_image.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface FilledImageProps {
+    src: string;
+}
+export const FilledImage = (props: FilledImageProps) => (
+    <div
+        style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            backgroundImage: `url(${props.src})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+        }}
+    />
+);
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index b27c68a5b..4ec09b129 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { FilledImage } from 'ts/components/ui/filled_image';
 import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { HeaderItem } from 'ts/pages/jobs/list/header_item';
 import { ListItem } from 'ts/pages/jobs/list/list_item';
diff --git a/packages/website/ts/pages/jobs/filled_image.tsx b/packages/website/ts/pages/jobs/filled_image.tsx
deleted file mode 100644
index 7f58ee5b9..000000000
--- a/packages/website/ts/pages/jobs/filled_image.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-export interface FilledImageProps {
-    src: string;
-}
-export const FilledImage = (props: FilledImageProps) => (
-    <div
-        style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            backgroundImage: `url(${props.src})`,
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-            backgroundSize: 'cover',
-        }}
-    />
-);
diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx
index 4db4bc31b..acc9dcb91 100644
--- a/packages/website/ts/pages/jobs/photo_rail.tsx
+++ b/packages/website/ts/pages/jobs/photo_rail.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { FilledImage } from 'ts/pages/jobs/filled_image';
+import { FilledImage } from 'ts/components/ui/filled_image';
 
 export interface PhotoRailProps {
     images: string[];
-- 
cgit v1.2.3


From 155e3d225d3255d6728e1c986de46416f5685e7f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 15:03:16 -0700
Subject: Remove FloatingImage

---
 packages/website/ts/pages/jobs/benefits.tsx       | 3 +--
 packages/website/ts/pages/jobs/floating_image.tsx | 8 --------
 packages/website/ts/pages/jobs/jobs.tsx           | 4 ++--
 3 files changed, 3 insertions(+), 12 deletions(-)
 delete mode 100644 packages/website/ts/pages/jobs/floating_image.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 4ec09b129..8a44eb596 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -2,7 +2,6 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { FilledImage } from 'ts/components/ui/filled_image';
-import { FloatingImage } from 'ts/pages/jobs/floating_image';
 import { HeaderItem } from 'ts/pages/jobs/list/header_item';
 import { ListItem } from 'ts/pages/jobs/list/list_item';
 import { colors } from 'ts/style/colors';
@@ -67,7 +66,7 @@ const LargeLayout = () => (
 
 const SmallLayout = () => (
     <div>
-        <FloatingImage src={_.head(IMAGE_PATHS)} />
+        <FilledImage src={_.head(IMAGE_PATHS)} />
         <BenefitsList />
     </div>
 );
diff --git a/packages/website/ts/pages/jobs/floating_image.tsx b/packages/website/ts/pages/jobs/floating_image.tsx
deleted file mode 100644
index 4719a9596..000000000
--- a/packages/website/ts/pages/jobs/floating_image.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-export interface FloatingImageProps {
-    src: string;
-}
-export const FloatingImage = (props: FloatingImageProps) => {
-    return <img src={props.src} style={{ width: '100%' }} />;
-};
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index c23b4a976..314669ee9 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -5,8 +5,8 @@ import * as DocumentTitle from 'react-document-title';
 
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
+import { FilledImage } from 'ts/components/ui/filled_image';
 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';
@@ -55,7 +55,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
                 <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} />
                 <Mission screenWidth={this.props.screenWidth} />
                 {this._isSmallScreen() ? (
-                    <FloatingImage src={_.head(PHOTO_RAIL_IMAGES)} />
+                    <FilledImage src={_.head(PHOTO_RAIL_IMAGES)} />
                 ) : (
                     <PhotoRail images={PHOTO_RAIL_IMAGES} />
                 )}
-- 
cgit v1.2.3


From 9d9341901f2b5b14e3a29a6bdc18a505d9b361aa Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 15:25:47 -0700
Subject: Use Text component for HeaderItem

---
 packages/website/ts/components/ui/text.tsx          |  2 ++
 packages/website/ts/pages/jobs/list/header_item.tsx | 16 +++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index e90c1707d..2b80869d1 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -11,6 +11,7 @@ export interface TextProps {
     fontFamily?: string;
     fontColor?: string;
     lineHeight?: string;
+    minHeight?: string;
     center?: boolean;
     fontWeight?: number;
 }
@@ -26,6 +27,7 @@ export const Text = styled(PlainText)`
     ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
+    min-height: ${props => props.minHeight};
 `;
 
 Text.defaultProps = {
diff --git a/packages/website/ts/pages/jobs/list/header_item.tsx b/packages/website/ts/pages/jobs/list/header_item.tsx
index b130cb0c4..ac214904c 100644
--- a/packages/website/ts/pages/jobs/list/header_item.tsx
+++ b/packages/website/ts/pages/jobs/list/header_item.tsx
@@ -1,6 +1,8 @@
 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;
@@ -9,15 +11,15 @@ export const HeaderItem: React.StatelessComponent<HeaderItemProps> = ({ headerTe
     return (
         <div className="h2 lg-py4 md-py4 sm-py3">
             <ListItem>
-                <div
-                    style={{
-                        fontFamily: 'Roboto Mono',
-                        minHeight: '1.25em',
-                        lineHeight: 1.25,
-                    }}
+                <Text
+                    fontFamily="Roboto Mono"
+                    fontSize="24px"
+                    lineHeight="1.25"
+                    minHeight="1.25em"
+                    fontColor={colors.black}
                 >
                     {headerText}
-                </div>
+                </Text>
             </ListItem>
         </div>
     );
-- 
cgit v1.2.3


From 2794d64d3e920cd30ed0603becffc74b17c22218 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 15:54:27 -0700
Subject: Use Text in OpenPositions

---
 packages/website/ts/components/ui/text.tsx        | 2 +-
 packages/website/ts/pages/jobs/open_positions.tsx | 9 ++++++---
 packages/website/ts/utils/configs.ts              | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 2b80869d1..0fa79bc7c 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -13,7 +13,7 @@ export interface TextProps {
     lineHeight?: string;
     minHeight?: string;
     center?: boolean;
-    fontWeight?: number;
+    fontWeight?: number | string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => (
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index c43cc43fe..79b51c0d1 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -4,6 +4,7 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol
 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';
@@ -171,10 +172,12 @@ export interface JobInfoListItemProps {
 const PlainJobInfoListItem: React.StatelessComponent<JobInfoListItemProps> = ({ title, description, onClick }) => (
     <div className="mb3" onClick={onClick}>
         <ListItem>
-            <div style={{ fontWeight: 'bold', fontSize: 16, color: colors.mediumBlue }}>{title + ' ›'}</div>
-            <div className="pt1" style={{ fontSize: 16, color: colors.darkGrey }}>
+            <Text fontWeight="bold" fontSize="16px" fontColor={colors.mediumBlue}>
+                {title + ' ›'}
+            </Text>
+            <Text className="pt1" fontSize="16px" fontColor={colors.darkGrey}>
                 {description}
-            </div>
+            </Text>
         </ListItem>
     </div>
 );
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index ace8a5ba0..2fdc7f031 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
 
 export const configs = {
     AMOUNT_DISPLAY_PRECSION: 5,
-    BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com',
+    BACKEND_BASE_PROD_URL: 'http://localhost:3000',
     BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com',
     BASE_URL,
     BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
-- 
cgit v1.2.3


From f1a98693d0c9b7855838b8c4aaaca243839614b4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 15:58:24 -0700
Subject: Use Text in Teams

---
 packages/website/ts/pages/jobs/teams.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index d5960949a..8112351db 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -1,8 +1,10 @@
 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[] = [
@@ -74,12 +76,14 @@ export const TeamItem: React.StatelessComponent<TeamItemProps> = ({ bulletColor,
     return (
         <div style={{ minHeight: MINIMUM_ITEM_HEIGHT }}>
             <ListItem bulletColor={bulletColor}>
-                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+                <Text fontWeight="bold" fontSize="16px" fontColor={colors.black}>
+                    {title}
+                </Text>
             </ListItem>
             <ListItem>
-                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                <Text className="pt1" fontSize="16px" lineHeight="2em" fontColor={colors.black}>
                     {description}
-                </div>
+                </Text>
             </ListItem>
         </div>
     );
-- 
cgit v1.2.3


From 76405639913b28c86f8cf9db65905215288e6032 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 16:09:23 -0700
Subject: Revert localhost config

---
 packages/website/ts/utils/configs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 2fdc7f031..ace8a5ba0 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -10,7 +10,7 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
 
 export const configs = {
     AMOUNT_DISPLAY_PRECSION: 5,
-    BACKEND_BASE_PROD_URL: 'http://localhost:3000',
+    BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com',
     BACKEND_BASE_STAGING_URL: 'http://ec2-52-91-181-85.compute-1.amazonaws.com',
     BASE_URL,
     BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
-- 
cgit v1.2.3


From d0bbee7e8c3eaac1f727a9f40a2213d041938c3b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 12 Jun 2018 16:11:31 -0700
Subject: Fix issue with positions hash

---
 packages/website/ts/pages/jobs/open_positions.tsx | 40 ++++++++++++-----------
 1 file changed, 21 insertions(+), 19 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index 79b51c0d1..f3d980315 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -44,26 +44,28 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
     }
     public render(): React.ReactNode {
         const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos);
+        return (
+            <div id={this.props.hash} className="mx-auto max-width-4">
+                {isReadyToRender ? this._renderBody() : this._renderLoading()}
+            </div>
+        );
+    }
+    private _renderBody(): React.ReactNode {
         const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
-        if (!isReadyToRender) {
-            return (
-                // TODO: consolidate this loading component with the one in portal and RelayerIndex
-                // TODO: possibly refactor into a generic loading container with spinner and retry UI
-                <div className="center">
-                    {_.isUndefined(this.state.error) ? (
-                        <CircularProgress size={40} thickness={5} />
-                    ) : (
-                        <Retry onRetry={this._fetchJobInfosAsync.bind(this)} />
-                    )}
-                </div>
-            );
-        } else {
-            return (
-                <div id={this.props.hash} className="mx-auto max-width-4">
-                    {isSmallScreen ? this._renderList() : this._renderTable()}
-                </div>
-            );
-        }
+        return isSmallScreen ? this._renderList() : this._renderTable();
+    }
+    private _renderLoading(): React.ReactNode {
+        return (
+            // TODO: consolidate this loading component with the one in portal and RelayerIndex
+            // TODO: possibly refactor into a generic loading container with spinner and retry UI
+            <div className="center">
+                {_.isUndefined(this.state.error) ? (
+                    <CircularProgress size={40} thickness={5} />
+                ) : (
+                    <Retry onRetry={this._fetchJobInfosAsync.bind(this)} />
+                )}
+            </div>
+        );
     }
     private _renderList(): React.ReactNode {
         return (
-- 
cgit v1.2.3


From 421e5682329d6047703be926d20a906f6fe2529e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 12 Jun 2018 16:54:37 -0700
Subject: Implement allowance and final flow step

---
 .../ts/components/inputs/allowance_toggle.tsx      |  1 +
 .../onboarding/portal_onboarding_flow.tsx          | 50 ++++++++++++++++------
 packages/website/ts/components/token_balances.tsx  |  2 +-
 packages/website/ts/components/wallet/wallet.tsx   |  2 +-
 .../ts/containers/inputs/allowance_toggle.ts       |  7 ++-
 packages/website/ts/utils/utils.ts                 |  1 -
 6 files changed, 42 insertions(+), 21 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 3e61e1b8b..0dd2a5aa5 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,5 +1,6 @@
 import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 78592c67f..0809f5e9c 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,9 +4,9 @@ import * as React from 'react';
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
     blockchain: Blockchain;
@@ -43,7 +43,6 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             />
         );
     }
-
     private _getSteps(): Step[] {
         const steps: Step[] = [
             {
@@ -83,23 +82,30 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>,
-                content: 'blah',
+                content: <div>
+                    Unlock your tokens for trading. You only need to do this once for each token.
+                    <div> ETH: {this._renderEthAllowanceToggle()}</div>
+                    <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
+                </div>,
                 placement: 'right',
-                continueButtonDisplay: 'disabled',
+                continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+            },
+            {
+                target: '.wallet',
+                content:
+                    'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
+                placement: 'right',
+                continueButtonDisplay: 'enabled',
             },
         ];
         return steps;
     }
-
     private _isAddressAvailable(): boolean {
         return !_.isEmpty(this.props.userAddress);
     }
-
     private _userHasVisibleEth(): boolean {
         return this.props.userEtherBalanceInWei > new BigNumber(0);
     }
-
     private _userHasVisibleWeth(): boolean {
         const ethToken = utils.getEthToken(this.props.tokenByAddress);
         if (!ethToken) {
@@ -108,15 +114,25 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
         return wethTokenState.balance > new BigNumber(0);
     }
-
+    private _userHasAllowancesForWethAndZrx(): boolean {
+        const ethToken = utils.getEthToken(this.props.tokenByAddress);
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
+        if (ethToken && zrxToken) {
+            const ethTokenAllowance = this.props.trackedTokenStateByAddress[ethToken.address].allowance;
+            const zrxTokenAllowance = this.props.trackedTokenStateByAddress[zrxToken.address].allowance;
+            return ethTokenAllowance > new BigNumber(0) && zrxTokenAllowance > new BigNumber(0);
+        }
+        return false;
+    }
     private _overrideOnboardingStateIfShould(): void {
         this._autoStartOnboardingIfShould();
         this._adjustStepIfShould();
     }
 
     private _adjustStepIfShould(): void {
+        const stepIndex = this.props.stepIndex;
         if (this._isAddressAvailable()) {
-            if (this.props.stepIndex < 2) {
+            if (stepIndex < 2) {
                 this.props.updateOnboardingStep(2);
             }
             return;
@@ -126,10 +142,14 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.injectedProviderName,
         );
         if (isExternallyInjected) {
-            this.props.updateOnboardingStep(1);
+            if (stepIndex !== 1) {
+                this.props.updateOnboardingStep(1);
+            }
             return;
         }
-        this.props.updateOnboardingStep(0);
+        if (stepIndex !== 0) {
+            this.props.updateOnboardingStep(0);
+        }
     }
     private _autoStartOnboardingIfShould(): void {
         if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
@@ -137,7 +157,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         }
     }
     private _renderZrxAllowanceToggle(): React.ReactNode {
-        const zrxToken = utils.getZrxToken(this.props.tokenByAddress)
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
         return this._renderAllowanceToggle(zrxToken);
     }
     private _renderEthAllowanceToggle(): React.ReactNode {
@@ -153,8 +173,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             <AllowanceToggle
                 token={token}
                 tokenState={tokenState}
+                isDisabled={!tokenState.isLoaded}
                 blockchain={this.props.blockchain}
-                refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+                // tslint:disable-next-line:jsx-no-lambda
+                refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(token.address)}
             />
         );
     }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 5edd8377a..7af80745c 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -20,11 +20,11 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 import { Blockchain } from 'ts/blockchain';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { SendButton } from 'ts/components/send_button';
 import { HelpTooltip } from 'ts/components/ui/help_tooltip';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { TokenIcon } from 'ts/components/ui/token_icon';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 819f75ac4..4523b0ac9 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -13,7 +13,6 @@ import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
@@ -21,6 +20,7 @@ import { Island } from 'ts/components/ui/island';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { zIndex } from 'ts/style/z_index';
diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts
index 6f50072ca..545708f92 100644
--- a/packages/website/ts/containers/inputs/allowance_toggle.ts
+++ b/packages/website/ts/containers/inputs/allowance_toggle.ts
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { BalanceErrs, Token, TokenState } from 'ts/types';
-import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { Blockchain } from 'ts/blockchain';
 import { State } from 'ts/redux/reducer';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
 
 import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
@@ -15,7 +14,7 @@ interface AllowanceToggleProps {
     token: Token;
     tokenState: TokenState;
     isDisabled?: boolean;
-    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
+    refetchTokenStateAsync: () => Promise<void>;
 }
 
 interface ConnectedState {
@@ -27,7 +26,7 @@ interface ConnectedDispatch {
     dispatcher: Dispatcher;
 }
 
-const mapStateToProps = (state: State, ownProps: AllowanceToggleProps): ConnectedState => ({
+const mapStateToProps = (state: State, _ownProps: AllowanceToggleProps): ConnectedState => ({
     networkId: state.networkId,
     userAddress: state.userAddress,
 });
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index b2153321d..aaf7cf2a7 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -21,7 +21,6 @@ import {
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
-import { Container } from '../components/ui/container';
 
 const LG_MIN_EM = 64;
 const MD_MIN_EM = 52;
-- 
cgit v1.2.3


From 14071ea11917c8a50f6817866cecdb0d41915fb8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 13 Jun 2018 12:01:08 -0700
Subject: Use spread operator instead of React.createElement

---
 packages/website/ts/pages/jobs/benefits.tsx |  2 +-
 packages/website/ts/pages/jobs/teams.tsx    | 10 +++++-----
 packages/website/ts/pages/jobs/values.tsx   |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 8a44eb596..006facc83 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -75,7 +75,7 @@ export const BenefitsList = () => {
     return (
         <div>
             <HeaderItem headerText={HEADER_TEXT} />
-            {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => React.createElement(BenefitItem, valueItemProps))}
+            {_.map(BENEFIT_ITEM_PROPS_LIST, valueItemProps => <BenefitItem {...valueItemProps} />)}
         </div>
     );
 };
diff --git a/packages/website/ts/pages/jobs/teams.tsx b/packages/website/ts/pages/jobs/teams.tsx
index 8112351db..80b036396 100644
--- a/packages/website/ts/pages/jobs/teams.tsx
+++ b/packages/website/ts/pages/jobs/teams.tsx
@@ -48,11 +48,11 @@ 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 => React.createElement(TeamItem, teamItemProps))}
+            {_.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 => React.createElement(TeamItem, teamItemProps))}
+            {_.map(TEAM_ITEM_PROPS_COLUMN2, teamItemProps => <TeamItem {...teamItemProps} />)}
         </div>
     </div>
 );
@@ -60,9 +60,9 @@ const LargeLayout = () => (
 const SmallLayout = () => (
     <div>
         <HeaderItem headerText={HEADER_TEXT} />
-        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps =>
-            React.createElement(TeamItem, teamItemProps),
-        )}
+        {_.map(_.concat(TEAM_ITEM_PROPS_COLUMN1, TEAM_ITEM_PROPS_COLUMN2), teamItemProps => (
+            <TeamItem {...teamItemProps} />
+        ))}
     </div>
 );
 
diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index 799db3d67..ad62754ce 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -29,7 +29,7 @@ export const Values = () => {
     return (
         <div className="mx-auto max-width-4">
             <HeaderItem headerText={HEADER_TEXT} />
-            {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => React.createElement(ValueItem, valueItemProps))}
+            {_.map(VALUE_ITEM_PROPS_LIST, valueItemProps => <ValueItem {...valueItemProps} />)}
         </div>
     );
 };
-- 
cgit v1.2.3


From eafcbabaa28fc4176bae4351231fd295ebdcddff Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 13 Jun 2018 12:10:21 -0700
Subject: Use Text components in Values

---
 packages/website/ts/pages/jobs/values.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/jobs/values.tsx b/packages/website/ts/pages/jobs/values.tsx
index ad62754ce..c7c4d5726 100644
--- a/packages/website/ts/pages/jobs/values.tsx
+++ b/packages/website/ts/pages/jobs/values.tsx
@@ -1,8 +1,10 @@
 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[] = [
     {
@@ -44,12 +46,14 @@ export const ValueItem: React.StatelessComponent<ValueItemProps> = ({ bulletColo
     return (
         <div style={{ minHeight: VALUE_ITEM_MIN_HEIGHT }}>
             <ListItem bulletColor={bulletColor}>
-                <div style={{ fontWeight: 'bold', fontSize: 16 }}>{title}</div>
+                <Text fontWeight="bold" fontSize="16x" fontColor={colors.black}>
+                    {title}
+                </Text>
             </ListItem>
             <ListItem>
-                <div className="pt1" style={{ fontSize: 16, lineHeight: 2 }}>
+                <Text className="pt1" fontSize="16x" lineHeight="2em" fontColor={colors.black}>
                     {description}
-                </div>
+                </Text>
             </ListItem>
         </div>
     );
-- 
cgit v1.2.3


From 8a3df7e434c98d75e0a8ccaec8c16122d5a2952b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 13 Jun 2018 12:19:14 -0700
Subject: Update minHeight in Text

---
 packages/website/ts/components/ui/text.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 0fa79bc7c..7e47f1d09 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -27,7 +27,7 @@ export const Text = styled(PlainText)`
     ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
-    min-height: ${props => props.minHeight};
+    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
 `;
 
 Text.defaultProps = {
-- 
cgit v1.2.3


From d172a97247f133a5340c5df263fe0f23019db956 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 13 Jun 2018 12:29:36 -0700
Subject: Add back redirector behind feature flag

---
 packages/website/ts/components/redirector.tsx | 9 +++++++++
 packages/website/ts/index.tsx                 | 8 +++++++-
 packages/website/ts/utils/utils.ts            | 3 +++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/ts/components/redirector.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/redirector.tsx b/packages/website/ts/components/redirector.tsx
new file mode 100644
index 000000000..a02693003
--- /dev/null
+++ b/packages/website/ts/components/redirector.tsx
@@ -0,0 +1,9 @@
+import { constants } from 'ts/utils/constants';
+
+interface RedirectorProps {
+    location: string;
+}
+
+export function Redirector(_props: RedirectorProps): void {
+    window.location.href = constants.URL_ANGELLIST;
+}
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 5501f5972..249b4fdc9 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -4,6 +4,7 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
+import { Redirector } from 'ts/components/redirector';
 import { About } from 'ts/containers/about';
 import { FAQ } from 'ts/containers/faq';
 import { Jobs } from 'ts/containers/jobs';
@@ -86,7 +87,12 @@ render(
                         <Switch>
                             <Route exact={true} path="/" component={Landing as any} />
                             <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
-                            <Route path={WebsitePaths.Jobs} component={Jobs as any} />
+                            {/* TODO: Remove this once we ship the jobs page*/}
+                            {utils.shouldShowJobsPage() ? (
+                                <Route path={WebsitePaths.Jobs} component={Jobs as any} />
+                            ) : (
+                                <Route path={WebsitePaths.Jobs} component={Redirector as any} />
+                            )}
                             <Route path={WebsitePaths.Portal} component={LazyPortal} />
                             <Route path={WebsitePaths.FAQ} component={FAQ as any} />
                             <Route path={WebsitePaths.About} component={About as any} />
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 651a4212a..eb384fbb4 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -318,6 +318,9 @@ export const utils = {
     shouldShowPortalV2(): boolean {
         return this.isDevelopment() || this.isStaging() || this.isDogfood();
     },
+    shouldShowJobsPage(): boolean {
+        return this.isDevelopment() || this.isStaging() || this.isDogfood();
+    },
     getEthToken(tokenByAddress: TokenByAddress): Token {
         const tokens = _.values(tokenByAddress);
         const etherToken = _.find(tokens, { symbol: constants.ETHER_TOKEN_SYMBOL });
-- 
cgit v1.2.3


From 7d6700582006d201f8757107b4cf286bb0ee5661 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 14 Jun 2018 14:26:17 -0700
Subject: Run prettify

---
 .../ts/components/onboarding/portal_onboarding_flow.tsx   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 0809f5e9c..efb844cb5 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -82,18 +82,19 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                content: <div>
-                    Unlock your tokens for trading. You only need to do this once for each token.
-                    <div> ETH: {this._renderEthAllowanceToggle()}</div>
-                    <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
-                </div>,
+                content: (
+                    <div>
+                        Unlock your tokens for trading. You only need to do this once for each token.
+                        <div> ETH: {this._renderEthAllowanceToggle()}</div>
+                        <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
+                    </div>
+                ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
-                content:
-                    'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
+                content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
             },
-- 
cgit v1.2.3