Add updated asset for unlock metamask portal onboarding step

5 files changed, 25 insertions, 21 deletions

diff --git a/packages/website/public/images/unlock-mm.png b/packages/website/public/images/unlock-mm.png
new file mode 100644
index 000000000..531c95dd2
--- /dev/null
+++ b/packages/website/public/images/unlock-mm.png
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 46dc897bd..8aebdf1d3 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -2,11 +2,14 @@ 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 {
+    ContinueButtonDisplay,
+    OnboardingTooltip,
+    TooltipPointerDisplay,
+} 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';
-import { PointerDirection } from 'ts/components/ui/pointer';
 import { zIndex } from 'ts/style/z_index';
 
 export interface FixedPositionSettings {
@@ -15,7 +18,7 @@ export interface FixedPositionSettings {
     bottom?: string;
     left?: string;
     right?: string;
-    pointerDirection?: PointerDirection;
+    tooltipPointerDisplay?: TooltipPointerDisplay;
 }
 
 export interface TargetPositionSettings {
@@ -69,7 +72,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                 </Popper>
             );
         } else if (currentStep.position.type === 'fixed') {
-            const { top, right, bottom, left, pointerDirection } = currentStep.position;
+            const { top, right, bottom, left, tooltipPointerDisplay } = currentStep.position;
             onboardingElement = (
                 <Container
                     position="fixed"
@@ -79,7 +82,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     bottom={bottom}
                     left={left}
                 >
-                    {this._renderToolTip(pointerDirection)}
+                    {this._renderToolTip(tooltipPointerDisplay)}
                 </Container>
             );
         }
@@ -103,7 +106,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
+    private _renderToolTip(tooltipPointerDisplay?: TooltipPointerDisplay): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
@@ -121,7 +124,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
-                    pointerDirection={pointerDirection}
+                    pointerDisplay={tooltipPointerDisplay}
                 />
             </Container>
         );
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index d8065625d..15d47908d 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -4,22 +4,27 @@ import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/on
 import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
+export type TooltipPointerDisplay = PointerDirection | 'none';
 
 export interface OnboardingTooltipProps extends OnboardingCardProps {
     className?: string;
-    pointerDirection?: PointerDirection;
+    pointerDisplay?: TooltipPointerDisplay;
 }
 
 export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
-    const { pointerDirection, className, ...cardProps } = props;
+    const { pointerDisplay, className, ...cardProps } = props;
+    const card = <OnboardingCard {...cardProps} />;
+    if (pointerDisplay === 'none') {
+        return card;
+    }
     return (
-        <Pointer className={className} direction={pointerDirection}>
+        <Pointer className={className} direction={pointerDisplay}>
             <OnboardingCard {...cardProps} />
         </Pointer>
     );
 };
 OnboardingTooltip.defaultProps = {
-    pointerDirection: 'left',
+    pointerDisplay: 'left',
 };
 
 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 a79cf1ee1..3dec8a444 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -91,9 +91,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         };
         const underMetamaskExtension: FixedPositionSettings = {
             type: 'fixed',
-            top: '30px',
-            right: '10px',
-            pointerDirection: 'top',
+            top: '5px',
+            right: '5px',
+            tooltipPointerDisplay: 'none',
         };
         const steps: Step[] = [
             {
@@ -105,7 +105,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 position: underMetamaskExtension,
-                title: '0x Ecosystem Setup',
+                title: 'Please Unlock Metamask...',
                 content: <UnlockWalletOnboardingStep />,
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
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 4ed7137d4..a1de469ad 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
+import { Image } from 'ts/components/ui/image';
 
 export interface UnlockWalletOnboardingStepProps {}
 
 export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
     <div className="flex items-center flex-column">
         <div className="flex items-center flex-column">
-            <Container marginTop="15px" marginBottom="15px">
-                <img src="/images/metamask_icon.png" height="50px" width="50px" />
-            </Container>
-            <Text center={true}>Unlock your MetaMask extension to get started.</Text>
+            <Image src="/images/unlock-mm.png" />
         </div>
     </div>
 );