feat: use blue for wallet prompt on mobile

4 files changed, 32 insertions, 8 deletions

diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 5cba8d996..3cc5ccc6b 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -104,7 +104,12 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
                 text: 'What is Coinbase Wallet?',
             },
             action: (
-                <Button href={actionUrl} width="100%" fontColor={ColorOption.white} backgroundColor={ColorOption.blue}>
+                <Button
+                    href={actionUrl}
+                    width="100%"
+                    fontColor={ColorOption.white}
+                    backgroundColor={ColorOption.darkBlue}
+                >
                     {actionText}
                 </Button>
             ),
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>
                 );
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
index bcf66ee81..a0b3ae457 100644
--- a/packages/instant/src/components/wallet_prompt.tsx
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -9,13 +9,21 @@ import { Text } from './ui/text';
 export interface WalletPromptProps {
     image: React.ReactNode;
     onClick?: () => void;
+    primaryColor: ColorOption;
+    secondaryColor: ColorOption;
 }
 
-export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
+export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
+    onClick,
+    image,
+    children,
+    secondaryColor,
+    primaryColor,
+}) => (
     <Container
         padding="14.5px"
-        border={`1px solid ${ColorOption.darkOrange}`}
-        backgroundColor={ColorOption.lightOrange}
+        border={`1px solid ${primaryColor}`}
+        backgroundColor={secondaryColor}
         width="100%"
         borderRadius="4px"
         onClick={onClick}
@@ -25,10 +33,15 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onCl
         <Flex>
             {image}
             <Container marginLeft="10px">
-                <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                <Text fontSize="16px" fontColor={primaryColor}>
                     {children}
                 </Text>
             </Container>
         </Flex>
     </Container>
 );
+
+WalletPrompt.defaultProps = {
+    primaryColor: ColorOption.darkOrange,
+    secondaryColor: ColorOption.lightOrange,
+};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 489f11dc3..a0751286b 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -17,7 +17,8 @@ export enum ColorOption {
     darkOrange = 'darkOrange',
     green = 'green',
     red = 'red',
-    blue = 'blue',
+    darkBlue = 'darkBlue',
+    lightBlue = 'lightBlue',
 }
 
 export const theme: Theme = {
@@ -33,7 +34,8 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
     green: '#3CB34F',
     red: '#D00000',
-    blue: '#135df6',
+    darkBlue: '#135df6',
+    lightBlue: '#F2F7FF',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';