Merge pull request #711 from 0xProject/website/feature/prettier-onboarding-components

Made onboarding look like the mocks

1 files changed, 22 insertions, 2 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 48486939b..d1d499314 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,6 +1,7 @@
 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';
@@ -24,6 +25,7 @@ import { TradeHistory } from 'ts/components/trade_history/trade_history';
 import { Container } from 'ts/components/ui/container';
 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';
@@ -353,8 +355,26 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 />
                 <Container marginTop="15px">
                     <Island>
-                        {/** TODO: Implement real styles. */}
-                        <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p>
+                        <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>
                 </Container>
             </div>