aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/payment_method.tsx
diff options
context:
space:
mode:
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>
);