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 ++-
 4 files changed, 37 insertions(+), 41 deletions(-)

(limited to 'packages/website/ts/components')

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>
-- 
cgit 


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 ++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 packages/website/ts/components/ui/background.tsx

(limited to 'packages/website/ts/components')

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';
-- 
cgit 


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/components')

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 


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/components')

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 


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 +
 4 files changed, 12 insertions(+), 56 deletions(-)
 delete mode 100644 packages/website/ts/components/ui/background.tsx

(limited to 'packages/website/ts/components')

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';
-- 
cgit 


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/components')

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 


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 +++---
 5 files changed, 60 insertions(+), 49 deletions(-)

(limited to 'packages/website/ts/components')

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,
-- 
cgit 


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/components')

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 


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/components')

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