Make metamask part of the fow pretty

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -1,9 +1,13 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { BigNumber } from '@0xproject/utils';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -48,8 +52,20 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Setup',
-                content:
+                content: (
-                    'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+                    <div className="flex items-center flex-column">
+                        <Container marginTop="15px" marginBottom="15px">
+                            <ActionAccountBalanceWallet
+                                style={{ width: '30px', height: '30px' }}
+                                color={colors.orange}
+                            />
+                        </Container>
+                        <Text>
+                            Before you begin, you need to connect to a wallet. This will be used across all 0x relayers
+                            and dApps.
+                        </Text>
+                    </div>
+                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
@@ -57,7 +73,14 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             {
                 target: '.wallet',
                 title: '0x Ecosystem Setup',
-                content: 'Unlock your metamask extension to begin',
+                content: (
+                    <div className="flex items-center flex-column">
+                        <Container marginTop="15px" marginBottom="15px">
+                            <img src="/images/metamask_icon.png" height="50px" width="50px" />
+                        </Container>
+                        <Text>Unlock your metamask extension to begin.</Text>
+                    </div>
+                ),
                 placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,

packages/website/ts/components/portal/portal.tsx

@@ -1,10 +1,10 @@
 import { colors, Styles } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
+import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 
 import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -23,9 +23,9 @@ import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
 import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Island } from 'ts/components/ui/island';
+import { Text } from 'ts/components/ui/text';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
 import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
@@ -366,7 +366,12 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 style={{ width: '30px', height: '30px' }}
                                 color={colors.orange}
                             />
-                            <Text fontColor={colors.grey} fontSize="16px" onClick={this._startOnboarding.bind(this)}>
+                            <Text
+                                fontColor={colors.grey}
+                                fontSize="16px"
+                                center={true}
+                                onClick={this._startOnboarding.bind(this)}
+                            >
                                 Learn how to set up your account
                             </Text>
                         </Container>

packages/website/ts/components/ui/text.tsx

@@ -43,7 +43,7 @@ Text.defaultProps = {
     fontFamily: 'Roboto',
     fontWeight: 400,
     fontColor: colors.black,
-    fontSize: '14px',
+    fontSize: '15px',
     Tag: 'div',
 };