From a0549ac35cdc11a436ab0e0db0facba00f240f1f Mon Sep 17 00:00:00 2001
From: Cal Leung <cleun007@gmail.com>
Date: Fri, 29 Jul 2022 13:14:12 -0700
Subject: [PATCH] Use default QR code colors (#4639)

* Use default QR code colors

* Add padding to QR codes

Co-authored-by: Gustavo Antunes <17601467+gantunesr@users.noreply.github.com>
---
 .../UI/PaymentRequestSuccess/index.js         | 11 ++++-----
 app/components/UI/ReceiveRequest/index.js     |  8 +++----
 app/components/Views/AddressQRCode/index.js   | 24 +++++++++++--------
 .../Views/RevealPrivateCredential/index.js    | 18 ++++++++------
 4 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/app/components/UI/PaymentRequestSuccess/index.js b/app/components/UI/PaymentRequestSuccess/index.js
index a712b5ef90a..86d71275f7a 100644
--- a/app/components/UI/PaymentRequestSuccess/index.js
+++ b/app/components/UI/PaymentRequestSuccess/index.js
@@ -10,7 +10,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import { connect } from 'react-redux';
-import { fontStyles } from '../../../styles/common';
+import { fontStyles, colors as importedColors } from '../../../styles/common';
 import { getPaymentRequestSuccessOptionsTitle } from '../../UI/Navbar';
 import PropTypes from 'prop-types';
 import EvilIcons from 'react-native-vector-icons/EvilIcons';
@@ -149,10 +149,9 @@ const createStyles = (colors) =>
       borderRadius: 8,
     },
     qrCodeWrapper: {
-      borderColor: colors.border.default,
-      borderRadius: 8,
-      borderWidth: 1,
-      padding: 15,
+      marginVertical: 8,
+      padding: 8,
+      backgroundColor: importedColors.white,
     },
   });
 
@@ -389,8 +388,6 @@ class PaymentRequestSuccess extends PureComponent {
                 <QRCode
                   value={this.state.qrLink}
                   size={Dimensions.get('window').width - 160}
-                  color={colors.text.default}
-                  backgroundColor={colors.background.default}
                 />
               </View>
             </View>
diff --git a/app/components/UI/ReceiveRequest/index.js b/app/components/UI/ReceiveRequest/index.js
index 9f12b02b2b6..5eab3152b68 100644
--- a/app/components/UI/ReceiveRequest/index.js
+++ b/app/components/UI/ReceiveRequest/index.js
@@ -28,7 +28,7 @@ import { showAlert } from '../../../actions/alert';
 import { toggleReceiveModal } from '../../../actions/modals';
 import { protectWalletModalVisible } from '../../../actions/user';
 
-import { fontStyles } from '../../../styles/common';
+import { fontStyles, colors as importedColors } from '../../../styles/common';
 import Text from '../../Base/Text';
 import ModalHandler from '../../Base/ModalHandler';
 import ModalDragger from '../../Base/ModalDragger';
@@ -52,7 +52,9 @@ const createStyles = (colors) =>
       paddingHorizontal: 15,
     },
     qrWrapper: {
-      margin: 15,
+      margin: 8,
+      padding: 8,
+      backgroundColor: importedColors.white,
     },
     addressWrapper: {
       flexDirection: 'row',
@@ -274,8 +276,6 @@ class ReceiveRequest extends PureComponent {
                   <QRCode
                     value={`ethereum:${this.props.selectedAddress}@${this.props.chainId}`}
                     size={Dimensions.get('window').width / 2}
-                    color={colors.text.default}
-                    backgroundColor={colors.background.default}
                   />
                 </TouchableOpacity>
                 <Modal
diff --git a/app/components/Views/AddressQRCode/index.js b/app/components/Views/AddressQRCode/index.js
index 378892448e9..8aceb95f4f6 100644
--- a/app/components/Views/AddressQRCode/index.js
+++ b/app/components/Views/AddressQRCode/index.js
@@ -7,7 +7,7 @@ import {
   View,
   Text,
 } from 'react-native';
-import { fontStyles } from '../../../styles/common';
+import { fontStyles, colors as importedColors } from '../../../styles/common';
 import { connect } from 'react-redux';
 import QRCode from 'react-native-qrcode-svg';
 import { strings } from '../../../../locales/i18n';
@@ -33,14 +33,18 @@ const createStyles = (colors) =>
       flex: 1,
       alignItems: 'center',
     },
-    qrCode: {
+    qrCodeContainer: {
       marginBottom: 16,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 36,
+      padding: 28,
       backgroundColor: colors.background.default,
       borderRadius: 8,
     },
+    qrCode: {
+      padding: 8,
+      backgroundColor: importedColors.white,
+    },
     addressWrapper: {
       alignItems: 'center',
       justifyContent: 'center',
@@ -146,13 +150,13 @@ class AddressQRCode extends PureComponent {
               color={colors.overlay.inverse}
             />
           </TouchableOpacity>
-          <View style={styles.qrCode}>
-            <QRCode
-              value={`ethereum:${this.props.selectedAddress}`}
-              size={Dimensions.get('window').width - 160}
-              color={colors.text.default}
-              backgroundColor={colors.background.default}
-            />
+          <View style={styles.qrCodeContainer}>
+            <View style={styles.qrCode}>
+              <QRCode
+                value={`ethereum:${this.props.selectedAddress}`}
+                size={Dimensions.get('window').width - 160}
+              />
+            </View>
           </View>
           <View style={styles.addressWrapper}>
             <Text style={styles.addressTitle}>
diff --git a/app/components/Views/RevealPrivateCredential/index.js b/app/components/Views/RevealPrivateCredential/index.js
index cb1b4b8ce00..cf22ff738b8 100644
--- a/app/components/Views/RevealPrivateCredential/index.js
+++ b/app/components/Views/RevealPrivateCredential/index.js
@@ -37,7 +37,7 @@ import { ThemeContext, mockTheme } from '../../../util/theme';
 import Engine from '../../../core/Engine';
 import PreventScreenshot from '../../../core/PreventScreenshot';
 import SecureKeychain from '../../../core/SecureKeychain';
-import { fontStyles } from '../../../styles/common';
+import { fontStyles, colors as importedColors } from '../../../styles/common';
 import AnalyticsV2 from '../../../util/analyticsV2';
 import Device from '../../../util/device';
 import { strings } from '../../../../locales/i18n';
@@ -145,6 +145,10 @@ const createStyles = (colors) =>
       alignItems: 'center',
       justifyContent: 'center',
     },
+    qrCode: {
+      padding: 8,
+      backgroundColor: importedColors.white,
+    },
     tabUnderlineStyle: {
       height: 2,
       backgroundColor: colors.primary.default,
@@ -487,12 +491,12 @@ class RevealPrivateCredential extends PureComponent {
           style={styles.tabContent}
         >
           <View style={styles.qrCodeWrapper}>
-            <QRCode
-              value={clipboardPrivateCredential}
-              size={Dimensions.get('window').width - 160}
-              color={colors.text.default}
-              backgroundColor={colors.background.default}
-            />
+            <View style={styles.qrCode}>
+              <QRCode
+                value={clipboardPrivateCredential}
+                size={Dimensions.get('window').width - 176}
+              />
+            </View>
           </View>
         </View>
       </ScrollableTabView>