aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/install_wallet_panel_content.tsx7
-rw-r--r--packages/instant/src/components/payment_method.tsx6
-rw-r--r--packages/instant/src/components/wallet_prompt.tsx21
-rw-r--r--packages/instant/src/style/theme.ts6
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)';