Themes: Pub tweaks + QR options

ZeusLN · Apr 22, 2024 · ca766ca · ca766ca
1 parent 8e0a960
commit ca766ca
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 13 deletions.
diff --git a/assets/images/icon-white.png b/assets/images/icon-white.png
diff --git a/assets/images/lightning-white.png b/assets/images/lightning-white.png
diff --git a/assets/images/onchain-white.png b/assets/images/onchain-white.png
diff --git a/assets/images/pay-z-white.png b/assets/images/pay-z-white.png
diff --git 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<
                                             <QRCode
                                                 value={value}
                                                 size={width}
-                                                logo={logo || defaultLogo}
+                                                logo={
+                                                    logo
+                                                        ? logo
+                                                        : themeColor(
+                                                              'invertQrIcons'
+                                                          )
+                                                        ? defaultLogoWhite
+                                                        : defaultLogo
+                                                }
                                                 backgroundColor={'white'}
-                                                logoBackgroundColor={'white'}
+                                                logoBackgroundColor={
+                                                    themeColor('invertQrIcons')
+                                                        ? 'black'
+                                                        : 'white'
+                                                }
                                                 logoMargin={10}
                                                 quietZone={width / 20}
                                             />
@@ -200,9 +213,20 @@ export default class CollapsedQR extends React.Component<
                         <QRCode
                             value={value}
                             size={height > 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
@@ -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
@@ -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
+                                                    }
                                                 />
                                             )}