Merge pull request #739 from 0xProject/feature/website/mobile-friendly-onboarding

Add support for mobile-friendly onboarding flows

12 files changed, 267 insertions, 159 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..bc83b8034
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -0,0 +1,84 @@
+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;
+    borderRadius?: string;
+}
+
+export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+    borderRadius,
+}) => (
+    <Island borderRadius={borderRadius}>
+        <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..331899469 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 onboardingElement = null;
+        if (this.props.isMobile) {
+            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
+        } else {
+            onboardingElement = (
                 <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
-            </Overlay>
-        );
+            );
+        }
+        if (this.props.disableOverlay) {
+            return onboardingElement;
+        }
+        return <Overlay>{onboardingElement}</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,13 +62,12 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-
     private _renderToolTip(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container marginLeft="30px">
+            <Container marginLeft="30px" maxWidth={350}>
                 <OnboardingTooltip
                     title={step.title}
                     content={step.content}
@@ -72,10 +84,31 @@ 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}
+                    borderRadius="10px 10px 0px 0px"
+                />
+            </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 +117,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..d8065625d 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,90 +1,25 @@
-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,
-}) => (
-    <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>
-    </Pointer>
-);
-
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
+    const { pointerDirection, className, ...cardProps } = props;
+    return (
+        <Pointer className={className} direction={pointerDirection}>
+            <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}
             />
         );
     }
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 6e6a74a06..0039aa545 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/metamask_icon.png" height="50px" width="50px" />
             </Container>
-            <Text>Unlock your metamask extension to begin.</Text>
+            <Text center={true}>Unlock your metamask extension to get started.</Text>
         </div>
     </div>
 );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 67314678b..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>
         );
     }
@@ -340,62 +340,77 @@ 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>
-                <Wallet
-                    style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : 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 marginTop="15px">
-                    <Island>
-                        <Container
-                            marginTop="30px"
-                            marginBottom="30px"
-                            marginLeft="30px"
-                            marginRight="30px"
-                            className="flex justify-around items-center"
-                        >
-                            <ActionAccountBalanceWallet
-                                style={{ width: '30px', height: '30px' }}
-                                color={colors.orange}
-                            />
-                            <Text
-                                fontColor={colors.grey}
-                                fontSize="16px"
-                                center={true}
-                                onClick={this._startOnboarding.bind(this)}
-                            >
-                                Learn how to set up your account
-                            </Text>
-                        </Container>
-                    </Island>
+                {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>}
             </div>
         );
     }
+    private _renderStartOnboarding(): React.ReactNode {
+        return (
+            <Island>
+                <Container
+                    marginTop="30px"
+                    marginBottom="30px"
+                    marginLeft="30px"
+                    marginRight="30px"
+                    className="flex justify-around items-center"
+                >
+                    <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
+                    <Text
+                        fontColor={colors.grey}
+                        fontSize="16px"
+                        center={true}
+                        onClick={this._startOnboarding.bind(this)}
+                    >
+                        Learn how to set up your account
+                    </Text>
+                </Container>
+            </Island>
+        );
+    }
 
     private _startOnboarding(): void {
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep);
         this.props.dispatcher.updatePortalOnboardingShowing(true);
+        // On mobile, make sure the wallet is completely visible.
+        if (this.props.screenWidth === ScreenWidths.Sm) {
+            document.querySelector('.wallet').scrollIntoView();
+        }
     }
     private _renderWalletSection(): React.ReactNode {
         return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />;
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
new file mode 100644
index 000000000..cbda2993d
--- /dev/null
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { keyframes, styled } from 'ts/style/theme';
+
+export type AnimationType = 'easeUpFromBottom';
+
+export interface AnimationProps {
+    type: AnimationType;
+}
+
+const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />;
+
+const appearFromBottomFrames = keyframes`
+    from {
+        position: absolute;
+        bottom: -500px;
+    }
+
+    to {
+        position: absolute;
+        bottom: 0px;
+    }
+`;
+
+const animations: { [K in AnimationType]: string } = {
+    easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
+};
+
+export const Animation = styled(PlainAnimation)`
+    animation: ${props => animations[props.type]};
+`;
+
+Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index cb542a386..02fa47480 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,5 +1,5 @@
 import { colors } from '@0xproject/react-shared';
-import { darken, grayscale } from 'polished';
+import { darken, saturate } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
@@ -17,7 +17,7 @@ export interface ButtonProps {
 }
 
 const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
         {children}
     </button>
 );
@@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
     cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
-    transition: background-color 0.5s ease;
+    transition: background-color, opacity 0.5s ease;
     padding: 0.8em 2.2em;
     border-radius: 6px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
+    outline: none;
     font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
+    background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
         background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
@@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
     &:active {
         background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
     }
+    &:disabled {
+        opacity: 0.5;
+        box-shadow: none;
+    }
+    &:focus {
+        background-color: ${props => saturate(0.2, props.backgroundColor)};
+    }
 `;
 
 Button.defaultProps = {
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 1776345da..90aec0e7c 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -23,6 +23,7 @@ export interface ContainerProps {
     left?: string;
     right?: string;
     bottom?: string;
+    zIndex?: number;
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index fbb9989a4..4bb4741b3 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,31 +1,28 @@
 import * as React from 'react';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 
 export interface IslandProps {
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+    borderRadius?: string;
 }
 
-const defaultStyle: React.CSSProperties = {
-    backgroundColor: colors.white,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderTopLeftRadius: 10,
-    boxShadow: `0px 3px 4px ${colors.walletBoxShadow}`,
-    overflow: 'hidden',
-};
-
-export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
-    <props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
-        {props.children}
-    </props.Component>
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, style, className }) => (
+    <Component style={style} className={className} />
 );
 
+export const Island = styled(PlainIsland)`
+    background-color: ${colors.white};
+    border-radius: ${props => props.borderRadius};
+    box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
+    overflow: hidden;
+`;
+
 Island.defaultProps = {
     Component: 'div',
+    borderRadius: '10px',
     style: {},
 };
 
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 82fec4e48..f88fd6c24 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -86,7 +86,6 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     root: {
         width: '100%',
-        position: 'relative',
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index ba2b8f512..12daad021 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { Blockchain } from 'ts/blockchain';
-import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ActionTypes, ProviderType, ScreenWidths, TokenByAddress, TokenStateByAddress } from 'ts/types';
 
 import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
 import { State } from 'ts/redux/reducer';
@@ -25,6 +25,7 @@ interface ConnectedState {
     blockchainIsLoaded: boolean;
     userEtherBalanceInWei?: BigNumber;
     tokenByAddress: TokenByAddress;
+    screenWidth: ScreenWidths;
 }
 
 interface ConnectedDispatch {
@@ -43,6 +44,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
     userEtherBalanceInWei: state.userEtherBalanceInWei,
     tokenByAddress: state.tokenByAddress,
     hasBeenSeen: state.hasPortalOnboardingBeenSeen,
+    screenWidth: state.screenWidth,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({