diff --git a/assets/images/icon-white.png b/assets/images/icon-white.png new file mode 100755 index 000000000..9fc016d6e Binary files /dev/null and b/assets/images/icon-white.png differ diff --git a/assets/images/lightning-white.png b/assets/images/lightning-white.png new file mode 100755 index 000000000..41384e02b Binary files /dev/null and b/assets/images/lightning-white.png differ diff --git a/assets/images/onchain-white.png b/assets/images/onchain-white.png new file mode 100644 index 000000000..8fb6dc423 Binary files /dev/null and b/assets/images/onchain-white.png differ diff --git a/assets/images/pay-z-white.png b/assets/images/pay-z-white.png new file mode 100755 index 000000000..e30352efa Binary files /dev/null and b/assets/images/pay-z-white.png differ diff --git a/components/CollapsedQR.tsx b/components/CollapsedQR.tsx index 67903511a..e41e87a44 100644 --- a/components/CollapsedQR.tsx +++ b/components/CollapsedQR.tsx @@ -20,6 +20,7 @@ import { themeColor } from './../utils/ThemeUtils'; import Touchable from './Touchable'; const defaultLogo = require('../assets/images/icon-black.png'); +const defaultLogoWhite = require('../assets/images/icon-white.png'); let simulation: any; @@ -186,9 +187,21 @@ export default class CollapsedQR extends React.Component< @@ -200,9 +213,20 @@ export default class CollapsedQR extends React.Component< width ? width * 0.75 : height * 0.6} - logo={logo || defaultLogo} - backgroundColor={themeColor('qr') || 'white'} - logoBackgroundColor={themeColor('qr') || 'white'} + logo={ + logo + ? logo + : themeColor('invertQrIcons') + ? defaultLogoWhite + : defaultLogo + } + color={themeColor('qr') || 'black'} + backgroundColor={ + themeColor('qrBackground') || 'white' + } + logoBackgroundColor={ + themeColor('qrLogoBackground') || 'white' + } logoMargin={10} quietZone={width / 40} /> diff --git a/utils/ThemeUtils.ts b/utils/ThemeUtils.ts index 5864a45ae..25d9d86f0 100644 --- a/utils/ThemeUtils.ts +++ b/utils/ThemeUtils.ts @@ -26,7 +26,8 @@ export function themeColor(themeString: string): any { buttonBackground: '#FFA900', buttonGradient: ['#FF9000', '#FFA900'], buttonText: '#000000', - qr: '#FFA900', + qrBackground: '#FFA900', + qrLogoBackground: '#FFA900', action: '#FFF' }; @@ -71,7 +72,8 @@ export function themeColor(themeString: string): any { qrFrame: '#FFD93F', bolt: '#FFD93F', chain: '#FFD93F', - disabled: '#767577' + disabled: '#767577', + invertQrIcons: false }; const Junkie: { [key: string]: any } = { @@ -218,13 +220,16 @@ export function themeColor(themeString: string): any { warning: '#E14C4C', bitcoin: '#FFB040', delete: '#992600', + qr: '#4C09F4', + qrBackground: '#FFF', + qrLogoBackground: '#4C09F4', + invertQrIcons: true, qrFrame: '#FFD93F', bolt: '#FFF', chain: '#FFF', disabled: '#767577', buttonBackground: '#4C09F4', - buttonText: '#000000', - qr: '#dccfff', + buttonText: '#FFF', action: '#FFF' }; diff --git a/views/Receive.tsx b/views/Receive.tsx index ac102139b..a1661b3cc 100644 --- a/views/Receive.tsx +++ b/views/Receive.tsx @@ -29,6 +29,11 @@ import LightningIcon from '../assets/images/lightning-black.png'; import OnChainIcon from '../assets/images/onchain-black.png'; import ZPayIcon from '../assets/images/pay-z-black.png'; +import ZIconWhite from '../assets/images/icon-white.png'; +import LightningIconWhite from '../assets/images/lightning-white.png'; +import OnChainIconWhite from '../assets/images/onchain-white.png'; +import ZPayIconWhite from '../assets/images/pay-z-white.png'; + import Amount from '../components/Amount'; import AmountInput, { getSatAmount } from '../components/AmountInput'; import Button from '../components/Button'; @@ -1543,7 +1548,13 @@ export default class Receive extends React.Component< expanded textBottom truncateLongValue - logo={ZIcon} + logo={ + themeColor( + 'invertQrIcons' + ) + ? ZIconWhite + : ZIcon + } /> )} {selectedIndex == 1 && @@ -1560,7 +1571,13 @@ export default class Receive extends React.Component< expanded textBottom truncateLongValue - logo={LightningIcon} + logo={ + themeColor( + 'invertQrIcons' + ) + ? LightningIconWhite + : LightningIcon + } /> )} {selectedIndex == 2 && @@ -1577,7 +1594,13 @@ export default class Receive extends React.Component< expanded textBottom truncateLongValue - logo={OnChainIcon} + logo={ + themeColor( + 'invertQrIcons' + ) + ? OnChainIconWhite + : OnChainIcon + } /> )} @@ -1639,7 +1662,13 @@ export default class Receive extends React.Component< expanded textBottom hideText - logo={ZPayIcon} + logo={ + themeColor( + 'invertQrIcons' + ) + ? ZPayIconWhite + : ZPayIcon + } /> )}