From 1e51af1d4b68bad9363411167fd4eb959e7a32dd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 20 Jun 2018 15:51:17 -0700
Subject: Support mobile friendly onboarding flows

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

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

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b1860954c..11b3b43f4 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -246,11 +246,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
-                <PortalOnboardingFlow
-                    blockchain={this._blockchain}
-                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -307,6 +302,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenVisibility={tokenVisibility}
                     />
                 </div>
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
             </div>
         );
     }
@@ -342,12 +342,18 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderWallet(): React.ReactNode {
         const startOnboarding = this._renderStartOnboarding();
         const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+        // We need room to scroll down for mobile onboarding
+        const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
                 {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Container marginBottom="15px">
+                <Container marginBottom={marginBottom}>
                     <Wallet
-                        style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
+                        style={
+                            !isMobile && this.props.isPortalOnboardingShowing
+                                ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+                                : undefined
+                        }
                         userAddress={this.props.userAddress}
                         networkId={this.props.networkId}
                         blockchain={this._blockchain}
-- 
cgit v1.2.3