diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-16 05:49:01 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-16 05:49:01 +0800 |
commit | 0c3430913332c9f082c4278d8d999dd749d13513 (patch) | |
tree | 35c0fb6ef1c73f755e734bc615d70d44e5fab4b2 /packages/website/ts/components | |
parent | 3d6ce0fb7618ff7531f234929ead39fafecb1d11 (diff) | |
download | dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar.gz dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar.bz2 dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar.lz dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar.xz dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.tar.zst dexon-0x-contracts-0c3430913332c9f082c4278d8d999dd749d13513.zip |
Make metamask part of the fow pretty
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 29 | ||||
-rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 11 | ||||
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 2 |
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', }; |