aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/payment_method.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-15 08:15:29 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-16 04:41:49 +0800
commit29747a04874579d194f7f039b77bfcbcf33ed0c6 (patch)
tree302934ecbd4bf3070dab73863982c98b6ce5d3da /packages/instant/src/components/payment_method.tsx
parentb01db9141b90ed98c48c62823b6553873f940d0b (diff)
downloaddexon-0x-contracts-29747a04874579d194f7f039b77bfcbcf33ed0c6.tar.gz
dexon-0x-contracts-29747a04874579d194f7f039b77bfcbcf33ed0c6.tar.zst
dexon-0x-contracts-29747a04874579d194f7f039b77bfcbcf33ed0c6.zip
feat: use blue for wallet prompt on mobile
Diffstat (limited to 'packages/instant/src/components/payment_method.tsx')
-rw-r--r--packages/instant/src/components/payment_method.tsx6
1 files changed, 5 insertions, 1 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index f9d02ec5b..662dd9d22 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -78,6 +78,9 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
const { account, network } = this.props;
const isMobile = envUtil.isMobileOperatingSystem();
const logo = isMobile ? <CoinbaseWalletAppLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+ const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange;
+ const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
+ const colors = { primaryColor, secondaryColor };
switch (account.state) {
case AccountState.Loading:
// Just take up the same amount of space as the other states.
@@ -87,13 +90,14 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
<WalletPrompt
onClick={this.props.onUnlockWalletClick}
image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+ {...colors}
>
Please Unlock {this.props.walletName}
</WalletPrompt>
);
case AccountState.None:
return (
- <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}>
+ <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
{isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
</WalletPrompt>
);