diff options
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)'; |