diff options
| -rw-r--r-- | packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 33 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 1 | ||||
| -rw-r--r-- | 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 7e6ce6d02..11f1becfe 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 3b55a18ce..d5665ec5d 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 2bc4a1974..1e2a123b7 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', }; |