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>
MetaMask · Jul 29, 2022 · a0549ac · a0549ac
1 parent 04f03b9
commit a0549ac
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>