Support mobile friendly onboarding flows

4 files changed, 131 insertions, 78 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
new file mode 100644
index 000000000..795a017e9
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -0,0 +1,82 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
+import { Island } from 'ts/components/ui/island';
+import { Text, Title } from 'ts/components/ui/text';
+
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
+export interface OnboardingCardProps {
+    title?: string;
+    content: React.ReactNode;
+    isLastStep: boolean;
+    onClose: () => void;
+    onClickNext: () => void;
+    onClickBack: () => void;
+    continueButtonDisplay?: ContinueButtonDisplay;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
+    continueButtonText?: string;
+}
+
+export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+}) => (
+    <Island>
+        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+            <div className="flex flex-column">
+                <div className="flex justify-between">
+                    <Title>{title}</Title>
+                    <Container position="relative" bottom="20px" left="15px">
+                        <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+                            Close
+                        </IconButton>
+                    </Container>
+                </div>
+                <Container marginBottom="15px">
+                    <Text>{content}</Text>
+                </Container>
+                {continueButtonDisplay && (
+                    <Button
+                        isDisabled={continueButtonDisplay === 'disabled'}
+                        onClick={onClickNext}
+                        fontColor={colors.white}
+                        fontSize="15px"
+                        backgroundColor={colors.mediumBlue}
+                    >
+                        {continueButtonText}
+                    </Button>
+                )}
+                <Container className="flex justify-between" marginTop="15px">
+                    {!shouldHideBackButton && (
+                        <Text fontColor={colors.grey} onClick={onClickBack}>
+                            Back
+                        </Text>
+                    )}
+                    {!shouldHideNextButton && (
+                        <Text fontColor={colors.grey} onClick={onClickNext}>
+                            Skip
+                        </Text>
+                    )}
+                </Container>
+            </div>
+        </Container>
+    </Island>
+);
+
+OnboardingCard.defaultProps = {
+    continueButtonText: 'Continue',
+};
+
+OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 34aeace82..7360d26ae 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
+import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
 
@@ -22,26 +24,37 @@ export interface OnboardingFlowProps {
     isRunning: boolean;
     onClose: () => void;
     updateOnboardingStep: (stepIndex: number) => void;
+    disableOverlay?: boolean;
+    isMobile: boolean;
 }
 
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+    public static defaultProps = {
+        disableOverlay: false,
+        isMobile: false,
+    };
     public render(): React.ReactNode {
         if (!this.props.isRunning) {
             return null;
         }
-        return (
-            <Overlay>
+        let onboardingEl = null;
+        if (this.props.isMobile) {
+            onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
+        } else {
+            onboardingEl = (
                 <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
-            </Overlay>
-        );
+            );
+        }
+        if (this.props.disableOverlay) {
+            return onboardingEl;
+        }
+        return <Overlay>{onboardingEl}</Overlay>;
     }
-
     private _getElementForStep(): Element {
         return document.querySelector(this._getCurrentStep().target);
     }
-
     private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         return (
             <div ref={props.ref} style={props.style} data-placement={props.placement}>
@@ -49,7 +62,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-
     private _renderToolTip(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
@@ -72,10 +84,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
+    private _renderOnboardignCard(): React.ReactNode {
+        const { steps, stepIndex } = this.props;
+        const step = steps[stepIndex];
+        const isLastStep = steps.length - 1 === stepIndex;
+        return (
+            <Container position="relative" zIndex={1} maxWidth="100vw">
+                <OnboardingCard
+                    title={step.title}
+                    content={step.content}
+                    isLastStep={isLastStep}
+                    shouldHideBackButton={step.shouldHideBackButton}
+                    shouldHideNextButton={step.shouldHideNextButton}
+                    onClose={this.props.onClose}
+                    onClickNext={this._goToNextStep.bind(this)}
+                    onClickBack={this._goToPrevStep.bind(this)}
+                    continueButtonDisplay={step.continueButtonDisplay}
+                    continueButtonText={step.continueButtonText}
+                />
+            </Container>
+        );
+    }
     private _getCurrentStep(): Step {
         return this.props.steps[this.props.stepIndex];
     }
-
     private _goToNextStep(): void {
         const nextStep = this.props.stepIndex + 1;
         if (nextStep < this.props.steps.length) {
@@ -84,7 +116,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             this.props.onClose();
         }
     }
-
     private _goToPrevStep(): void {
         const nextStep = this.props.stepIndex - 1;
         if (nextStep >= 0) {
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 45851b4de..74fc6f715 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,90 +1,27 @@
-import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { IconButton } from 'ts/components/ui/icon_button';
-import { Island } from 'ts/components/ui/island';
+import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card';
 import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
-import { Text, Title } from 'ts/components/ui/text';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
-export interface OnboardingTooltipProps {
-    title?: string;
-    content: React.ReactNode;
-    isLastStep: boolean;
-    onClose: () => void;
-    onClickNext: () => void;
-    onClickBack: () => void;
-    continueButtonDisplay?: ContinueButtonDisplay;
-    shouldHideBackButton?: boolean;
-    shouldHideNextButton?: boolean;
-    pointerDirection?: PointerDirection;
-    continueButtonText?: string;
+export interface OnboardingTooltipProps extends OnboardingCardProps {
     className?: string;
+    pointerDirection?: PointerDirection;
 }
 
 export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
-    title,
-    content,
-    continueButtonDisplay,
-    continueButtonText,
-    onClickNext,
-    onClickBack,
-    onClose,
-    shouldHideBackButton,
-    shouldHideNextButton,
     pointerDirection,
     className,
+    ...cardProps,
 }) => (
     <Pointer className={className} direction={pointerDirection}>
-        <Island>
-            <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
-                <div className="flex flex-column">
-                    <div className="flex justify-between">
-                        <Title>{title}</Title>
-                        <Container position="relative" bottom="20px" left="15px">
-                            <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
-                                Close
-                            </IconButton>
-                        </Container>
-                    </div>
-                    <Container marginBottom="15px">
-                        <Text>{content}</Text>
-                    </Container>
-                    {continueButtonDisplay && (
-                        <Button
-                            isDisabled={continueButtonDisplay === 'disabled'}
-                            onClick={onClickNext}
-                            fontColor={colors.white}
-                            fontSize="15px"
-                            backgroundColor={colors.mediumBlue}
-                        >
-                            {continueButtonText}
-                        </Button>
-                    )}
-                    <Container className="flex justify-between" marginTop="15px">
-                        {!shouldHideBackButton && (
-                            <Text fontColor={colors.grey} onClick={onClickBack}>
-                                Back
-                            </Text>
-                        )}
-                        {!shouldHideNextButton && (
-                            <Text fontColor={colors.grey} onClick={onClickNext}>
-                                Skip
-                            </Text>
-                        )}
-                    </Container>
-                </div>
-            </Container>
-        </Island>
+        <OnboardingCard {...cardProps} />
     </Pointer>
 );
 
 OnboardingTooltip.defaultProps = {
     pointerDirection: 'left',
-    continueButtonText: 'Continue',
 };
 
 OnboardingTooltip.displayName = 'OnboardingTooltip';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 7e40192f6..10d4af30e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,7 @@ import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowa
 import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
 import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
-import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { utils } from 'ts/utils/utils';
 
@@ -34,6 +34,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
     updateIsRunning: (isRunning: boolean) => void;
     updateOnboardingStep: (stepIndex: number) => void;
     refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
+    screenWidth: ScreenWidths;
 }
 
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
@@ -57,6 +58,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 isRunning={this.props.isRunning}
                 onClose={this._closeOnboarding.bind(this)}
                 updateOnboardingStep={this._updateOnboardingStep.bind(this)}
+                disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
+                isMobile={this.props.screenWidth === ScreenWidths.Sm}
             />
         );
     }