From 3d6ce0fb7618ff7531f234929ead39fafecb1d11 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 15 Jun 2018 13:55:37 -0700
Subject: Make start onboarding button pretty

---
 packages/website/ts/components/portal/portal.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/portal')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 48486939b..aca04969d 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 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';
@@ -22,6 +23,7 @@ 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 { Wallet } from 'ts/components/wallet/wallet';
@@ -353,8 +355,21 @@ 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" onClick={this._startOnboarding.bind(this)}>
+                                Learn how to set up your account
+                            </Text>
+                        </Container>
                     </Island>
                 </Container>
             </div>
-- 
cgit v1.2.3


From 0c3430913332c9f082c4278d8d999dd749d13513 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 15 Jun 2018 14:49:01 -0700
Subject: Make metamask part of the fow pretty

---
 packages/website/ts/components/portal/portal.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/components/portal')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index aca04969d..d1d499314 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/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>
-- 
cgit v1.2.3


From 888086010579566aca57e63daa5bacc9c6802830 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 14 Jun 2018 13:51:02 -0700
Subject: Set max-width for LargeLayout

---
 packages/website/ts/components/portal/portal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components/portal')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 48486939b..d51e40216 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -100,6 +100,7 @@ const THROTTLE_TIMEOUT = 100;
 const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
 const LEFT_COLUMN_WIDTH = 346;
 const MENU_PADDING_LEFT = 185;
+const LARGE_LAYOUT_MAX_WIDTH = 1200;
 
 const styles: Styles = {
     root: {
@@ -660,11 +661,11 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <div className="sm-flex flex-center">
-            <div className="flex-last px3">
+        <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
+            <div className="flex-last px2">
                 <div style={styles.leftColumn}>{props.left}</div>
             </div>
-            <div className="flex-auto px3" style={styles.scrollContainer}>
+            <div className="flex-auto px2" style={styles.scrollContainer}>
                 {props.right}
             </div>
         </div>
@@ -676,7 +677,7 @@ interface SmallLayoutProps {
 }
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
-        <div className="sm-flex flex-center">
+        <div className="flex flex-center">
             <div className="flex-auto px3" style={styles.scrollContainer}>
                 {props.content}
             </div>
-- 
cgit v1.2.3


From 55cbcd728d9b0611e604a389443f94de58726d92 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 14 Jun 2018 14:12:05 -0700
Subject: Add max width to top bar

---
 packages/website/ts/components/portal/portal.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/website/ts/components/portal')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d51e40216..ee8c90c2f 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -255,6 +255,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
                     style={{ backgroundColor: colors.lightestGrey }}
+                    maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <div id="portal" style={styles.body}>
                     <Switch>
-- 
cgit v1.2.3