Merge pull request #816 from 0xProject/feature/website/portal-mobile-improvements

Make onboarding and wallet copy dynamic based on OS

1 files changed, 5 insertions, 6 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index b7c5a9f64..1c2c92fd1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -57,13 +57,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
-        this._adjustStepIfShould();
-        if (!prevProps.isRunning && this.props.isRunning) {
+        // Any one of steps 0-3 could be the starting step, and we only want to reset the scroll on the starting step.
+        if (this.props.isRunning && utils.isMobileWidth(this.props.screenWidth) && this.props.stepIndex < 3) {
             // On mobile, make sure the wallet is completely visible.
-            if (this.props.screenWidth === ScreenWidths.Sm) {
-                document.querySelector('.wallet').scrollIntoView();
-            }
+            document.querySelector('.wallet').scrollIntoView();
         }
+        this._adjustStepIfShould();
         if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
             this._autoStartOnboardingIfShould();
         }
@@ -275,7 +274,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         );
     }
     private _handleFinalStepContinueClick(): void {
-        if (utils.isMobile(this.props.screenWidth)) {
+        if (utils.isMobileWidth(this.props.screenWidth)) {
             window.scrollTo(0, 0);
             this.props.history.push('/portal');
         }