From bd03151c2a10c680bb8a12e0bdd73590381aa4ca Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 20 Jun 2018 14:03:56 -0700
Subject: Various relayer grid ui polish items

---
 packages/website/ts/components/portal/portal.tsx   |  2 +-
 .../website/ts/components/portal/text_header.tsx   | 15 ++----
 .../components/relayer_index/relayer_grid_tile.tsx | 54 +++++++++++-----------
 .../relayer_index/relayer_top_tokens.tsx           |  7 ++-
 packages/website/ts/pages/jobs/open_positions.tsx  |  3 +-
 packages/website/ts/utils/utils.ts                 |  3 ++
 6 files changed, 42 insertions(+), 42 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 11b3b43f4..cd88a3f95 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -551,7 +551,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderRelayerIndexSection(): React.ReactNode {
         return (
             <Section
-                header={<TextHeader labelText="Explore 0x Relayers" />}
+                header={<TextHeader labelText="0x Relayers" />}
                 body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />}
             />
         );
diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx
index 4aabd47d0..853da3a29 100644
--- a/packages/website/ts/components/portal/text_header.tsx
+++ b/packages/website/ts/components/portal/text_header.tsx
@@ -1,21 +1,16 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import { Text } from 'ts/components/ui/text';
+
 export interface TextHeaderProps {
     labelText: string;
 }
 
-const styles: Styles = {
-    title: {
-        fontWeight: 'bold',
-        fontSize: 20,
-    },
-};
-
 export const TextHeader = (props: TextHeaderProps) => {
     return (
-        <div className="py3" style={styles.title}>
+        <Text className="pt3 pb2" fontWeight="bold" fontSize="16px" fontColor={colors.darkestGrey}>
             {props.labelText}
-        </div>
+        </Text>
     );
 };
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 23860856b..7f2df325e 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -1,6 +1,6 @@
 import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
-import { GridTile } from 'material-ui/GridList';
+import { GridTile as PlainGridTile } from 'material-ui/GridList';
 import * as React from 'react';
 import { analytics } from 'ts/utils/analytics';
 
@@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
@@ -21,24 +23,14 @@ const styles: Styles = {
         boxSizing: 'border-box',
     },
     innerDiv: {
-        padding: 6,
         height: '100%',
         boxSizing: 'border-box',
     },
     header: {
         height: '50%',
         width: '100%',
-        borderBottomRightRadius: 4,
-        borderBottomLeftRadius: 4,
-        borderTopRightRadius: 4,
-        borderTopLeftRadius: 4,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: colors.walletBorder,
     },
     body: {
-        paddingLeft: 6,
-        paddingRight: 6,
         height: '50%',
         width: '100%',
         boxSizing: 'border-box',
@@ -69,7 +61,10 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
     const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
     const eventLabel = `${props.relayerInfo.name}-${networkName}`;
-    const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+    const onClick = () => {
+        analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+        utils.openUrl(link);
+    };
     const headerImageUrl = props.relayerInfo.logoImgUrl;
     const headerBackgroundColor =
         !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
@@ -77,22 +72,17 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
             : FALLBACK_PRIMARY_COLOR;
     return (
         <Island style={styles.root} Component={GridTile}>
-            <div style={styles.innerDiv}>
-                <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
-                    <div
-                        className="flex items-center"
-                        style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
-                    >
-                        <Image
-                            className="mx-auto"
-                            src={props.relayerInfo.logoImgUrl}
-                            fallbackSrc={FALLBACK_IMG_SRC}
-                            height={RELAYER_ICON_HEIGHT}
-                        />
-                    </div>
-                </a>
-                <div style={styles.body}>
-                    <div className="py1" style={styles.relayerNameLabel}>
+            <div style={styles.innerDiv} onClick={onClick}>
+                <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                    <Image
+                        className="mx-auto"
+                        src={props.relayerInfo.logoImgUrl}
+                        fallbackSrc={FALLBACK_IMG_SRC}
+                        height={RELAYER_ICON_HEIGHT}
+                    />
+                </div>
+                <div className="p2" style={styles.body}>
+                    <div className="pb1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}
                     </div>
                     <Section titleText="Weekly Trade Volume">
@@ -111,6 +101,14 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     );
 };
 
+export const GridTile = styled(PlainGridTile)`
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    &:hover {
+        transform: translate(0px, -3px);
+    }
+`;
+
 interface SectionProps {
     titleText: string;
     children?: React.ReactNode;
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index b599e7123..f544fc924 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -70,7 +70,10 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
         };
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`;
-        const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel);
+        const onClick = (event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            analytics.logEvent('Portal', 'Token Click', eventLabel);
+        };
         return (
             <a
                 href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)}
@@ -78,7 +81,7 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
                 style={style}
                 onMouseEnter={this._onToggleHover.bind(this, true)}
                 onMouseLeave={this._onToggleHover.bind(this, false)}
-                onClick={trackTokenClick}
+                onClick={onClick}
             >
                 {this.props.tokenInfo.symbol}
             </a>
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f3d980315..e789795c1 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -11,6 +11,7 @@ import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { utils } from 'ts/utils/utils';
 
 const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
 const HEADER_TEXT = 'Open Positions';
@@ -161,7 +162,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
 
     private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
         const url = jobInfo.url;
-        window.open(url, '_blank');
+        utils.openUrl(url);
     }
 }
 
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 0bd3dbcfa..6363d1d2e 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -362,4 +362,7 @@ export const utils = {
         const formattedAmount = unitAmount.toFixed(precision);
         return `${formattedAmount} ${symbol}`;
     },
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    },
 };
-- 
cgit v1.2.3


From 79edc12c764097bb46f6dd40fe1f10fd8944f583 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 10:34:45 -0700
Subject: Add Background component

---
 packages/website/ts/components/portal/portal.tsx | 24 ++++++++++--------------
 packages/website/ts/components/ui/background.tsx | 24 ++++++++++++++++++++++++
 packages/website/ts/style/z_index.ts             |  1 +
 3 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 packages/website/ts/components/ui/background.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index cd88a3f95..4f1dfea6f 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -22,6 +22,7 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
+import { Background } from 'ts/components/ui/background';
 import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Island } from 'ts/components/ui/island';
@@ -109,22 +110,16 @@ const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
 
 const styles: Styles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: colors.lightestGrey,
-    },
     body: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+        marginTop: TOP_BAR_HEIGHT,
     },
     leftColumn: {
         width: LEFT_COLUMN_WIDTH,
-        height: '100%',
+        position: 'fixed',
     },
     scrollContainer: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-        overflow: 'auto',
+        marginLeft: LEFT_COLUMN_WIDTH + 30,
+        marginRight: 30,
     },
 };
 
@@ -245,7 +240,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <div style={styles.root}>
+            <div>
+                <Background />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -259,7 +255,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     blockchain={this._blockchain}
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
-                    style={{ backgroundColor: colors.lightestGrey }}
+                    style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <div id="portal" style={styles.body}>
@@ -709,10 +705,10 @@ interface LargeLayoutProps {
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
         <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
-            <div className="flex-last px2">
+            <div className="flex-last">
                 <div style={styles.leftColumn}>{props.left}</div>
             </div>
-            <div className="flex-auto px2" style={styles.scrollContainer}>
+            <div className="flex-auto" style={styles.scrollContainer}>
                 {props.right}
             </div>
         </div>
diff --git a/packages/website/ts/components/ui/background.tsx b/packages/website/ts/components/ui/background.tsx
new file mode 100644
index 000000000..808792a41
--- /dev/null
+++ b/packages/website/ts/components/ui/background.tsx
@@ -0,0 +1,24 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
+
+export interface BackgroundProps {
+    color?: string;
+}
+
+const PlainBackground: React.StatelessComponent<BackgroundProps> = props => <div {...props} />;
+
+export const Background = styled(PlainBackground)`
+    background-color: ${props => props.color};
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    z-index: ${zIndex.background};
+`;
+
+Background.defaultProps = {
+    color: colors.lightestGrey,
+};
+
+Background.displayName = 'Background';
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index 0411cdd91..6e3aebaa1 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,4 +1,5 @@
 export const zIndex = {
+    background: -1,
     topBar: 1100,
     overlay: 1105,
     aboveOverlay: 1106,
-- 
cgit v1.2.3


From df94e5f164a2ce92dceb680d6835cbc700632da7 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 12:55:00 -0700
Subject: Remove styles from Portal component

---
 packages/website/ts/components/portal/portal.tsx | 37 +++++++++---------------
 1 file changed, 13 insertions(+), 24 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 4f1dfea6f..c82bfbe6a 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -108,20 +108,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
 const LEFT_COLUMN_WIDTH = 346;
 const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
-
-const styles: Styles = {
-    body: {
-        marginTop: TOP_BAR_HEIGHT,
-    },
-    leftColumn: {
-        width: LEFT_COLUMN_WIDTH,
-        position: 'fixed',
-    },
-    scrollContainer: {
-        marginLeft: LEFT_COLUMN_WIDTH + 30,
-        marginRight: 30,
-    },
-};
+const LARGE_LAYOUT_MARGIN = 30;
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -258,7 +245,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
-                <div id="portal" style={styles.body}>
+                <Container marginTop={TOP_BAR_HEIGHT}>
                     <Switch>
                         <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
                         <Route
@@ -297,7 +284,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenByAddress={this.props.tokenByAddress}
                         tokenVisibility={tokenVisibility}
                     />
-                </div>
+                </Container>
                 <PortalOnboardingFlow
                     blockchain={this._blockchain}
                     trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
@@ -706,11 +693,15 @@ const LargeLayout = (props: LargeLayoutProps) => {
     return (
         <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
             <div className="flex-last">
-                <div style={styles.leftColumn}>{props.left}</div>
-            </div>
-            <div className="flex-auto" style={styles.scrollContainer}>
-                {props.right}
+                <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+                    {props.left}
+                </Container>
             </div>
+            <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
+                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+                    {props.right}
+                </Container>
+            </Container>
         </div>
     );
 };
@@ -721,9 +712,7 @@ interface SmallLayoutProps {
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
         <div className="flex flex-center">
-            <div className="flex-auto px3" style={styles.scrollContainer}>
-                {props.content}
-            </div>
+            <div className="flex-auto px3">{props.content}</div>
         </div>
     );
 }; // tslint:disable:max-file-line-count
-- 
cgit v1.2.3


From b6765b849cec691418bd0ccb38c584a146d97b19 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 12:59:11 -0700
Subject: Padding adjustment

---
 packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 7f2df325e..ba3579926 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -34,6 +34,7 @@ const styles: Styles = {
         height: '50%',
         width: '100%',
         boxSizing: 'border-box',
+        padding: 12,
     },
     weeklyTradeVolumeLabel: {
         fontSize: 14,
@@ -81,7 +82,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
                         height={RELAYER_ICON_HEIGHT}
                     />
                 </div>
-                <div className="p2" style={styles.body}>
+                <div style={styles.body}>
                     <div className="pb1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}
                     </div>
-- 
cgit v1.2.3


From 3df58827119b2dd70a1a41ceccd304b6055500b8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 13:50:58 -0700
Subject: Remove Background component

---
 packages/website/ts/components/portal/portal.tsx   |  4 +--
 .../ts/components/relayer_index/relayer_index.tsx  | 39 ++++++----------------
 packages/website/ts/components/ui/background.tsx   | 24 -------------
 packages/website/ts/components/ui/container.tsx    |  1 +
 packages/website/ts/style/z_index.ts               |  1 -
 5 files changed, 12 insertions(+), 57 deletions(-)
 delete mode 100644 packages/website/ts/components/ui/background.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index c82bfbe6a..ec46fd4cd 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -22,7 +22,6 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
-import { Background } from 'ts/components/ui/background';
 import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Island } from 'ts/components/ui/island';
@@ -228,7 +227,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div>
-                <Background />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -245,7 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
-                <Container marginTop={TOP_BAR_HEIGHT}>
+                <Container marginTop={TOP_BAR_HEIGHT} minHeight="110vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
                         <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
                         <Route
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d565eb608..5a6dc1ae9 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,4 +1,3 @@
-import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import { GridList } from 'material-ui/GridList';
@@ -20,22 +19,6 @@ interface RelayerIndexState {
     error?: Error;
 }
 
-const styles: Styles = {
-    root: {
-        width: '100%',
-    },
-    item: {
-        backgroundColor: colors.white,
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        overflow: 'hidden',
-        padding: 4,
-    },
-};
-
 const CELL_HEIGHT = 290;
 const NUMBER_OF_COLUMNS_LARGE = 3;
 const NUMBER_OF_COLUMNS_MEDIUM = 2;
@@ -76,18 +59,16 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         } else {
             const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
             return (
-                <div style={styles.root}>
-                    <GridList
-                        cellHeight={CELL_HEIGHT}
-                        cols={numberOfColumns}
-                        padding={GRID_PADDING}
-                        style={styles.gridList}
-                    >
-                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
-                            <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
-                        ))}
-                    </GridList>
-                </div>
+                <GridList
+                    cellHeight={CELL_HEIGHT}
+                    cols={numberOfColumns}
+                    padding={GRID_PADDING}
+                    style={{ marginTop: -10, marginBottom: 0 }}
+                >
+                    {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
+                        <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+                    ))}
+                </GridList>
             );
         }
     }
diff --git a/packages/website/ts/components/ui/background.tsx b/packages/website/ts/components/ui/background.tsx
deleted file mode 100644
index 808792a41..000000000
--- a/packages/website/ts/components/ui/background.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as React from 'react';
-import { styled } from 'ts/style/theme';
-import { zIndex } from 'ts/style/z_index';
-
-export interface BackgroundProps {
-    color?: string;
-}
-
-const PlainBackground: React.StatelessComponent<BackgroundProps> = props => <div {...props} />;
-
-export const Background = styled(PlainBackground)`
-    background-color: ${props => props.color};
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
-    z-index: ${zIndex.background};
-`;
-
-Background.defaultProps = {
-    color: colors.lightestGrey,
-};
-
-Background.displayName = 'Background';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 90aec0e7c..a747ef01f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     width?: StringOrNum;
+    minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index 6e3aebaa1..0411cdd91 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,5 +1,4 @@
 export const zIndex = {
-    background: -1,
     topBar: 1100,
     overlay: 1105,
     aboveOverlay: 1106,
-- 
cgit v1.2.3


From 82789d53155772e339c1c500bb538638dfc20376 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 15:39:00 -0700
Subject: Fix issues that arose from merge

---
 packages/website/ts/components/onboarding/onboarding_flow.tsx | 6 +++++-
 packages/website/ts/components/portal/portal.tsx              | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 331899469..ec8d96191 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -42,7 +42,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
         } else {
             onboardingElement = (
-                <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+                <Popper
+                    referenceElement={this._getElementForStep()}
+                    placement={this._getCurrentStep().placement}
+                    positionFixed={true}
+                >
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index ec46fd4cd..8606eed1b 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -226,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <div>
+            <Container position="relative">
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -243,7 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
-                <Container marginTop={TOP_BAR_HEIGHT} minHeight="110vh" backgroundColor={colors.lightestGrey}>
+                <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
                         <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
                         <Route
@@ -288,7 +288,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
                     refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
                 />
-            </div>
+            </Container>
         );
     }
     private _renderMainRoute(): React.ReactNode {
-- 
cgit v1.2.3


From b0000bb276df7609bea8a48252063693f0553222 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 17:40:17 -0700
Subject: Fix z-index issues

---
 packages/website/ts/components/portal/portal.tsx   | 79 ++++++++++++----------
 .../components/relayer_index/relayer_grid_tile.tsx |  3 +-
 .../ts/components/relayer_index/relayer_index.tsx  |  1 -
 packages/website/ts/components/ui/animation.tsx    |  6 +-
 packages/website/ts/components/wallet/wallet.tsx   | 20 +++---
 packages/website/ts/utils/utils.ts                 |  3 +
 6 files changed, 63 insertions(+), 49 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 8606eed1b..e31404559 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -240,7 +240,12 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     blockchain={this._blockchain}
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
-                    style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
+                    style={{
+                        backgroundColor: colors.lightestGrey,
+                        position: 'fixed',
+                        // Hack: used to make onboarding z-index logi work for both mobile and desktop
+                        zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
+                    }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
@@ -283,11 +288,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenVisibility={tokenVisibility}
                     />
                 </Container>
-                <PortalOnboardingFlow
-                    blockchain={this._blockchain}
-                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                />
             </Container>
         );
     }
@@ -322,41 +322,48 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
     private _renderWallet(): React.ReactNode {
         const startOnboarding = this._renderStartOnboarding();
-        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+        const isMobile = utils.isMobile(this.props.screenWidth);
         // We need room to scroll down for mobile onboarding
         const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
-                {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Container marginBottom={marginBottom}>
-                    <Wallet
-                        style={
-                            !isMobile && this.props.isPortalOnboardingShowing
-                                ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
-                                : undefined
-                        }
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this._blockchain}
-                        blockchainIsLoaded={this.props.blockchainIsLoaded}
-                        blockchainErr={this.props.blockchainErr}
-                        dispatcher={this.props.dispatcher}
-                        tokenByAddress={this.props.tokenByAddress}
-                        trackedTokens={this._getCurrentTrackedTokens()}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        injectedProviderName={this.props.injectedProviderName}
-                        providerType={this.props.providerType}
-                        screenWidth={this.props.screenWidth}
-                        location={this.props.location}
-                        trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                        onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
-                        onAddToken={this._onAddToken.bind(this)}
-                        onRemoveToken={this._onRemoveToken.bind(this)}
-                        refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                    />
+                <Container position="relative">
+                    {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
+                    <Container marginBottom={marginBottom}>
+                        <Wallet
+                            style={
+                                !isMobile && this.props.isPortalOnboardingShowing
+                                    ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+                                    : undefined
+                            }
+                            userAddress={this.props.userAddress}
+                            networkId={this.props.networkId}
+                            blockchain={this._blockchain}
+                            blockchainIsLoaded={this.props.blockchainIsLoaded}
+                            blockchainErr={this.props.blockchainErr}
+                            dispatcher={this.props.dispatcher}
+                            tokenByAddress={this.props.tokenByAddress}
+                            trackedTokens={this._getCurrentTrackedTokens()}
+                            userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                            lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                            injectedProviderName={this.props.injectedProviderName}
+                            providerType={this.props.providerType}
+                            screenWidth={this.props.screenWidth}
+                            location={this.props.location}
+                            trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                            onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                            onAddToken={this._onAddToken.bind(this)}
+                            onRemoveToken={this._onRemoveToken.bind(this)}
+                            refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                        />
+                    </Container>
+                    {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
                 </Container>
-                {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
             </div>
         );
     }
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index ba3579926..5f4c6998c 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -21,6 +21,7 @@ export interface RelayerGridTileProps {
 const styles: Styles = {
     root: {
         boxSizing: 'border-box',
+        position: 'static',
     },
     innerDiv: {
         height: '100%',
@@ -102,7 +103,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     );
 };
 
-export const GridTile = styled(PlainGridTile)`
+const GridTile = styled(PlainGridTile)`
     cursor: pointer;
     transition: transform 0.2s ease;
     &:hover {
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 5a6dc1ae9..4aea1bbbb 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -5,7 +5,6 @@ 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';
 
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index cbda2993d..136f3d005 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -11,13 +11,15 @@ const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {
 
 const appearFromBottomFrames = keyframes`
     from {
-        position: absolute;
+        position: fixed;
         bottom: -500px;
+        left: 0px;
     }
 
     to {
-        position: absolute;
+        position: fixed;
         bottom: 0px;
+        left: 0px;
     }
 `;
 
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f88fd6c24..0f9e011b4 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -43,6 +43,7 @@ import {
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
+import { styled } from 'ts/style/theme';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
 export interface WalletProps {
@@ -138,6 +139,12 @@ const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
 const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 
+const ActionButton = styled(FloatingActionButton)`
+    button {
+        position: static !important;
+    }
+`;
+
 export class Wallet extends React.Component<WalletProps, WalletState> {
     public static defaultProps = {
         style: {},
@@ -244,17 +251,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <ListItem
                     primaryText={
                         <div className="flex">
-                            <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+                            <ActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
                                 <ContentAdd />
-                            </FloatingActionButton>
-                            <FloatingActionButton
-                                mini={true}
-                                zDepth={0}
-                                className="px1"
-                                onClick={this.props.onRemoveToken}
-                            >
+                            </ActionButton>
+                            <ActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
                                 <ContentRemove />
-                            </FloatingActionButton>
+                            </ActionButton>
                             <div
                                 style={{
                                     paddingLeft: 10,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 6363d1d2e..0cb965f05 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -365,4 +365,7 @@ export const utils = {
     openUrl(url: string): void {
         window.open(url, '_blank');
     },
+    isMobile(screenWidth: ScreenWidths): boolean {
+        return screenWidth === ScreenWidths.Sm;
+    },
 };
-- 
cgit v1.2.3


From de2dcbae5a78d2b1103c171416e4af5794d0b183 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 21 Jun 2018 17:42:37 -0700
Subject: Lint and fix typo

---
 packages/website/ts/components/portal/portal.tsx | 2 +-
 packages/website/ts/components/wallet/wallet.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index e31404559..9a725c742 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -243,7 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{
                         backgroundColor: colors.lightestGrey,
                         position: 'fixed',
-                        // Hack: used to make onboarding z-index logi work for both mobile and desktop
+                        // Hack: used to make onboarding z-index logic work for both mobile and desktop
                         zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
                     }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 0f9e011b4..4cc70badd 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -29,6 +29,7 @@ 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 { styled } from 'ts/style/theme';
 import {
     BlockchainErrs,
     ProviderType,
@@ -43,7 +44,6 @@ import {
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
-import { styled } from 'ts/style/theme';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
 export interface WalletProps {
-- 
cgit v1.2.3


From a07cfb7abc3649f29ab5020ff5d2bea37c26cefd Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 16:53:57 -0700
Subject: Do not add empty token to local storage

---
 packages/website/ts/components/generate_order/asset_picker.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index b43ac1f2e..738692264 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -246,6 +246,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         });
         const tokenAddress = this.state.chosenTrackTokenAddress;
         const token = this.props.tokenByAddress[tokenAddress];
+        if (_.isUndefined(tokenAddress)) {
+            this.setState({
+                isAddingTokenToTracked: false,
+                assetView: AssetViews.ASSET_PICKER,
+                chosenTrackTokenAddress: undefined,
+            });
+            return;
+        }
         const newTokenEntry = {
             ...token,
         };
-- 
cgit v1.2.3


From 4375a0e07e2646d053a42aa5c852e9b2c3d8c110 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 21 Jun 2018 17:57:22 -0700
Subject: Fix state mutation in reducer

---
 packages/website/ts/redux/reducer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index 9d3d8f7d9..ed6a4868e 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -156,7 +156,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.AddTokenToTokenByAddress: {
-            const newTokenByAddress = state.tokenByAddress;
+            const newTokenByAddress = { ...state.tokenByAddress };
             newTokenByAddress[action.data.address] = action.data;
             return {
                 ...state,
@@ -165,7 +165,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.RemoveTokenFromTokenByAddress: {
-            const newTokenByAddress = state.tokenByAddress;
+            const newTokenByAddress = { ...state.tokenByAddress };
             delete newTokenByAddress[action.data.address];
             return {
                 ...state,
@@ -174,7 +174,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.UpdateTokenByAddress: {
-            const tokenByAddress = state.tokenByAddress;
+            const tokenByAddress = { ...state.tokenByAddress };
             const tokens = action.data;
             _.each(tokens, token => {
                 const updatedToken = {
@@ -253,7 +253,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
         }
 
         case ActionTypes.UpdateChosenAssetTokenAddress: {
-            const newAssetToken = state.sideToAssetToken[action.data.side];
+            const newAssetToken = { ...state.sideToAssetToken[action.data.side] };
             newAssetToken.address = action.data.address;
             const newSideToAssetToken = {
                 ...state.sideToAssetToken,
-- 
cgit v1.2.3


From 05c008844532a9386341f60e51270756341d00db Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 11:22:33 -0700
Subject: Comment out Chris, and move Mel up in about page

---
 packages/website/ts/pages/about/about.tsx   | 23 +++++++++++------------
 packages/website/ts/pages/about/profile.tsx |  1 +
 2 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 6830b64ab..62a2519a4 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -156,17 +156,6 @@ const teamRow5: ProfileInfo[] = [
         linkedIn: 'https://www.linkedin.com/in/fragosti/',
         github: 'http://github.com/fragosti',
     },
-    {
-        name: 'Chris Kalani',
-        title: 'Director of Design',
-        description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
-        image: 'images/team/chris.png',
-        linkedIn: 'https://www.linkedin.com/in/chriskalani/',
-        github: 'https://github.com/chriskalani',
-    },
-];
-
-const teamRow6: ProfileInfo[] = [
     {
         name: 'Mel Oberto',
         title: 'Office Operations / Executive Assistant',
@@ -176,6 +165,17 @@ const teamRow6: ProfileInfo[] = [
     },
 ];
 
+const teamRow6: ProfileInfo[] = [
+    // {
+    //     name: 'Chris Kalani',
+    //     title: 'Director of Design',
+    //     description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
+    //     image: 'images/team/chris.png',
+    //     linkedIn: 'https://www.linkedin.com/in/chriskalani/',
+    //     github: 'https://github.com/chriskalani',
+    // },
+];
+
 const advisors: ProfileInfo[] = [
     {
         name: 'Fred Ehrsam',
@@ -270,7 +270,6 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
-                        <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index e73b1f193..bcbeb0272 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -39,6 +39,7 @@ export const Profile = (props: ProfileProps) => {
                             fontSize: 14,
                             fontFamily: 'Roboto Mono',
                             color: colors.darkGrey,
+                            whiteSpace: 'nowrap',
                         }}
                     >
                         {props.profileInfo.title.toUpperCase()}
-- 
cgit v1.2.3


From 543f2c91fe3d00be33b2193eb88529a53622506a Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 22 Jun 2018 11:37:57 -0700
Subject: Pulled out reset AssetPicker state into a common variable

---
 .../ts/components/generate_order/asset_picker.tsx  | 24 ++++++++--------------
 1 file changed, 9 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 738692264..87618f1e0 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -232,12 +232,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         this.props.onTokenChosen(newToken.address);
     }
     private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean): Promise<void> {
+        const resetState: AssetPickerState = {
+            ...this.state,
+            isAddingTokenToTracked: false,
+            assetView: AssetViews.ASSET_PICKER,
+            chosenTrackTokenAddress: undefined,
+        };
         if (!didUserAcceptTracking) {
-            this.setState({
-                isAddingTokenToTracked: false,
-                assetView: AssetViews.ASSET_PICKER,
-                chosenTrackTokenAddress: undefined,
-            });
+            this.setState(resetState);
             this._onCloseDialog();
             return;
         }
@@ -247,11 +249,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         const tokenAddress = this.state.chosenTrackTokenAddress;
         const token = this.props.tokenByAddress[tokenAddress];
         if (_.isUndefined(tokenAddress)) {
-            this.setState({
-                isAddingTokenToTracked: false,
-                assetView: AssetViews.ASSET_PICKER,
-                chosenTrackTokenAddress: undefined,
-            });
+            this.setState(resetState);
             return;
         }
         const newTokenEntry = {
@@ -262,11 +260,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
 
         this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
-        this.setState({
-            isAddingTokenToTracked: false,
-            assetView: AssetViews.ASSET_PICKER,
-            chosenTrackTokenAddress: undefined,
-        });
+        this.setState(resetState);
         this.props.onTokenChosen(tokenAddress);
     }
 }
-- 
cgit v1.2.3


From 2b408e71ac4139f7f1ae9c51a655081322248553 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 11:47:57 -0700
Subject: Use Ops instead of Operations in Mels description

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

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 62a2519a4..dc7ce265e 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -158,7 +158,7 @@ const teamRow5: ProfileInfo[] = [
     },
     {
         name: 'Mel Oberto',
-        title: 'Office Operations / Executive Assistant',
+        title: 'Office Ops / Executive Assistant',
         description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`,
         image: 'images/team/mel.png',
         linkedIn: 'https://www.linkedin.com/in/melanieoberto',
-- 
cgit v1.2.3


From 06705f9e88c5b8901e4edea08ffed92c8c6808f6 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 11:54:24 -0700
Subject: Remove diverse from about page

---
 packages/website/ts/pages/about/about.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index dc7ce265e..e427104aa 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -259,9 +259,9 @@ export class About extends React.Component<AboutProps, AboutState> {
                                 lineHeight: 1.5,
                             }}
                         >
-                            Our team is a diverse and globally distributed group with backgrounds in engineering,
-                            research, business and design. We are passionate about decentralized technology and its
-                            potential to act as an equalizing force in the world.
+                            Our team is a globally distributed group with backgrounds in engineering, research, business
+                            and design. We are passionate about decentralized technology and its potential to act as an
+                            equalizing force in the world.
                         </div>
                     </div>
                     <div className="pt3 md-px4 lg-px0">
-- 
cgit v1.2.3


From 80fe1938b8cc7ad2b72972133cf9594fa4ee04d9 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 12:04:45 -0700
Subject: Fix tslint error

---
 packages/website/ts/pages/about/about.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index e427104aa..0259af36f 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -165,16 +165,16 @@ const teamRow5: ProfileInfo[] = [
     },
 ];
 
-const teamRow6: ProfileInfo[] = [
-    // {
-    //     name: 'Chris Kalani',
-    //     title: 'Director of Design',
-    //     description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
-    //     image: 'images/team/chris.png',
-    //     linkedIn: 'https://www.linkedin.com/in/chriskalani/',
-    //     github: 'https://github.com/chriskalani',
-    // },
-];
+// const teamRow6: ProfileInfo[] = [
+//     {
+//         name: 'Chris Kalani',
+//         title: 'Director of Design',
+//         description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
+//         image: 'images/team/chris.png',
+//         linkedIn: 'https://www.linkedin.com/in/chriskalani/',
+//         github: 'https://github.com/chriskalani',
+//     },
+// ];
 
 const advisors: ProfileInfo[] = [
     {
-- 
cgit v1.2.3


From 7fb8b546f9b20719fcc9b10d77b9e07c0cef6025 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 12:22:31 -0700
Subject: Remove unecessary position relative rules

---
 packages/website/ts/components/portal/portal.tsx                   | 4 ++--
 packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 9a725c742..c9f2b2633 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -226,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <Container position="relative">
+            <Container>
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -327,7 +327,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
-                <Container position="relative">
+                <Container>
                     {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
                     <Container marginBottom={marginBottom}>
                         <Wallet
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 5f4c6998c..18b069ae2 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -21,6 +21,8 @@ export interface RelayerGridTileProps {
 const styles: Styles = {
     root: {
         boxSizing: 'border-box',
+        // All material UI components have position: relative
+        // which creates a new stacking context and makes z-index stuff impossible. So reset.
         position: 'static',
     },
     innerDiv: {
-- 
cgit v1.2.3


From 89d2bb7ecd7019ba36e7cff1429a2bdadea2a4c2 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 14:32:21 -0700
Subject: Fix issue where hovered tiles appear over top bar

---
 packages/website/ts/components/portal/portal.tsx | 14 +++++++++-----
 packages/website/ts/style/z_index.ts             |  1 +
 2 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index c9f2b2633..4166fde53 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -243,8 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{
                         backgroundColor: colors.lightestGrey,
                         position: 'fixed',
-                        // Hack: used to make onboarding z-index logic work for both mobile and desktop
-                        zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
+                        zIndex: zIndex.topBar,
                     }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
@@ -696,9 +695,14 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
+        <Container className="mx-auto flex flex-center" maxWidth={LARGE_LAYOUT_MAX_WIDTH}>
             <div className="flex-last">
-                <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+                <Container
+                    width={LEFT_COLUMN_WIDTH}
+                    position="fixed"
+                    zIndex={zIndex.aboveTopBar}
+                    marginLeft={LARGE_LAYOUT_MARGIN}
+                >
                     {props.left}
                 </Container>
             </div>
@@ -707,7 +711,7 @@ const LargeLayout = (props: LargeLayoutProps) => {
                     {props.right}
                 </Container>
             </Container>
-        </div>
+        </Container>
     );
 };
 
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index 0411cdd91..a3998f59b 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,5 +1,6 @@
 export const zIndex = {
     topBar: 1100,
+    aboveTopBar: 1101,
     overlay: 1105,
     aboveOverlay: 1106,
 };
-- 
cgit v1.2.3


From 66be42d1f839f99bc4d953fe4be401776573f23f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 22 Jun 2018 15:33:58 -0700
Subject: Center items in portal drawer header

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

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index 4bd07769f..205a60afc 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -65,7 +65,7 @@ interface HeaderProps {
 const Header = (props: HeaderProps) => {
     return (
         <div className="flex flex-center py4">
-            <div className="flex flex-column mx-auto">
+            <div className="flex flex-column mx-auto items-center">
                 <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} />
                 <Text className="pt2" fontColor={colors.white}>
                     {props.displayMessage}
-- 
cgit v1.2.3


From a1737a28d08798e4b58ff49cd116609ddafa5295 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 22 Jun 2018 15:56:24 -0700
Subject: Do not render ZRX or WETH as removable tracked tokens

---
 packages/website/ts/components/generate_order/asset_picker.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 87618f1e0..b0dcf5678 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -9,6 +9,7 @@ import { TokenIcon } from 'ts/components/ui/token_icon';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { DialogConfigs, Token, TokenByAddress, TokenVisibility } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 const TOKEN_ICON_DIMENSION = 100;
 const TILE_DIMENSION = 146;
@@ -134,7 +135,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
             if (
                 (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
-                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)
+                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked) ||
+                token.symbol === constants.ZRX_TOKEN_SYMBOL ||
+                token.symbol === constants.ETHER_TOKEN_SYMBOL
             ) {
                 return null; // Skip
             }
-- 
cgit v1.2.3


From 1f5848ba8265885ef4644a8103029552782965c8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 22 Jun 2018 16:07:07 -0700
Subject: Remove extra border from the bottom of the wallet

---
 packages/website/ts/components/wallet/wallet.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 4cc70badd..dc48d6619 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -311,7 +311,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             wrappedEtherDirection: Side.Deposit,
         };
         const key = ETHER_ITEM_KEY;
-        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row');
     }
     private _renderTokenRows(): React.ReactNode {
         const trackedTokens = this.props.trackedTokens;
@@ -322,7 +322,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
-    private _renderTokenRow(token: Token, _index: number): React.ReactNode {
+    private _renderTokenRow(token: Token, index: number): React.ReactNode {
         const tokenState = this.props.trackedTokenStateByAddress[token.address];
         if (_.isUndefined(tokenState)) {
             return null;
@@ -350,12 +350,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             },
         };
         const key = token.address;
+        const isLastRow = index === this.props.trackedTokens.length - 1;
         return this._renderBalanceRow(
             key,
             icon,
             primaryText,
             secondaryText,
             accessoryItemConfig,
+            isLastRow,
             isWeth ? 'weth-row' : undefined,
         );
     }
@@ -365,13 +367,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         primaryText: React.ReactNode,
         secondaryText: React.ReactNode,
         accessoryItemConfig: AccessoryItemConfig,
+        isLastRow: boolean,
         className?: string,
     ): React.ReactNode {
         const shouldShowWrapEtherItem =
             !_.isUndefined(this.state.wrappedEtherDirection) &&
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
-        const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem;
+        let additionalStyle;
+        if (shouldShowWrapEtherItem) {
+            additionalStyle = walletItemStyles.focusedItem;
+        } else if (!isLastRow) {
+            additionalStyle = styles.borderedItem;
+        }
         const style = { ...styles.tokenItem, ...additionalStyle };
         const etherToken = this._getEthToken();
         return (
-- 
cgit v1.2.3