aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-16 05:49:01 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-16 05:49:01 +0800
commit0c3430913332c9f082c4278d8d999dd749d13513 (patch)
tree35c0fb6ef1c73f755e734bc615d70d44e5fab4b2
parent3d6ce0fb7618ff7531f234929ead39fafecb1d11 (diff)
downloaddexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar.gz
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar.bz2
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar.lz
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar.xz
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.tar.zst
dexon-sol-tools-0c3430913332c9f082c4278d8d999dd749d13513.zip
Make metamask part of the fow pretty
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx29
-rw-r--r--packages/website/ts/components/portal/portal.tsx11
-rw-r--r--packages/website/ts/components/ui/text.tsx2
3 files changed, 35 insertions, 7 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 3deefec3c..7e6ce6d02 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/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:
- 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+ content: (
+ <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,
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>
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 073bfc2d2..2bc4a1974 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/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',
};