From 5993125cc7d5129aead37a06663741d42ff0189e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 15 Jun 2018 15:17:20 -0700
Subject: [PATCH] Prettify account setup and add eth steps of onboarding

---
 .../onboarding/portal_onboarding_flow.tsx     | 33 +++++++++++++++++--
 .../website/ts/components/ui/container.tsx    |  1 +
 packages/website/ts/components/ui/text.tsx    |  1 +
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 7e6ce6d025..11f1becfe2 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -88,8 +88,24 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Account Setup',
-                content:
-                    'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+                content: (
+                    <div className="flex items-center flex-column">
+                        <Text>
+                            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two
+                            simple steps.
+                        </Text>
+                        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
+                            <div className="flex flex-column items-center">
+                                <img src="/images/eth_token.svg" height="50px" width="50x" />
+                                <Text> Wrap ETH </Text>
+                            </div>
+                            <div className="flex flex-column items-center">
+                                <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+                                <Text> Unlock tokens </Text>
+                            </div>
+                        </Container>
+                    </div>
+                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 continueButtonDisplay: 'enabled',
@@ -97,7 +113,18 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.eth-row',
                 title: 'Add ETH',
-                content: 'Before you begin you will need to send some ETH to your metamask wallet',
+                content: (
+                    <div className="flex items-center flex-column">
+                        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
+                        <Container marginTop="15px" marginBottom="15px">
+                            <img src="/images/ether_alt.svg" height="50px" width="50px" />
+                        </Container>
+                        <Text>
+                            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask
+                            extension in your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+                        </Text>
+                    </div>
+                ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 3b55a18ce2..d5665ec5d9 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,6 +14,7 @@ export interface ContainerProps {
     backgroundColor?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
+    width?: StringOrNum;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 2bc4a19744..1e2a123b7e 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -44,6 +44,7 @@ Text.defaultProps = {
     fontWeight: 400,
     fontColor: colors.black,
     fontSize: '15px',
+    lineHeight: '1.5em',
     Tag: 'div',
 };