Merge pull request #19984 from alitoshmatov/qr-code-update

Qr code update
Expensify · Jun 5, 2023 · 5c7b3c2 · 5c7b3c2
2 parents 5269e2a + 538406c
commit 5c7b3c2
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 5 deletions.
diff --git a/assets/images/expensify-logo-round-transparent.png b/assets/images/expensify-logo-round-transparent.png
diff --git a/src/CONST.js b/src/CONST.js
@@ -2443,6 +2443,12 @@ const CONST = {
         FLAG_SEVERITY_HARASSMENT: 'harassment',
         FLAG_SEVERITY_ASSAULT: 'assault',
     },
+    QR: {
+        DEFAULT_LOGO_SIZE_RATIO: 0.25,
+        DEFAULT_LOGO_MARGIN_RATIO: 0.02,
+        EXPENSIFY_LOGO_SIZE_RATIO: 0.22,
+        EXPENSIFY_LOGO_MARGIN_RATIO: 0.03,
+    },
 };
 
 export default CONST;
diff --git a/src/components/QRCode/index.js b/src/components/QRCode/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import QRCodeLibrary from 'react-native-qrcode-svg';
 import PropTypes from 'prop-types';
 import defaultTheme from '../../styles/themes/default';
+import CONST from '../../CONST';
 
 const propTypes = {
     /**
@@ -13,6 +14,14 @@ const propTypes = {
      * Follows ImageProps href from react-native-svg that is used by react-native-qrcode-svg.
      */
     logo: PropTypes.oneOfType([PropTypes.shape({uri: PropTypes.string}), PropTypes.number, PropTypes.string]),
+    /**
+     * The size ratio of logo to QR code
+     */
+    logoRatio: PropTypes.number,
+    /**
+     * The size ratio of margin around logo to QR code
+     */
+    logoMarginRatio: PropTypes.number,
     /**
      * The QRCode size
      */
@@ -38,6 +47,8 @@ const defaultProps = {
     color: defaultTheme.text,
     backgroundColor: defaultTheme.highlightBG,
     getRef: undefined,
+    logoRatio: CONST.QR.DEFAULT_LOGO_SIZE_RATIO,
+    logoMarginRatio: CONST.QR.DEFAULT_LOGO_MARGIN_RATIO,
 };
 
 function QRCode(props) {
@@ -47,8 +58,9 @@ function QRCode(props) {
             value={props.url}
             size={props.size}
             logo={props.logo}
-            logoBackgroundColor="transparent"
-            logoSize={props.size * 0.3}
+            logoBackgroundColor={props.backgroundColor}
+            logoSize={props.size * props.logoRatio}
+            logoMargin={props.size * props.logoMarginRatio}
             logoBorderRadius={props.size}
             backgroundColor={props.backgroundColor}
             color={props.color}

diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
@@ -60,6 +60,8 @@ class QRShare extends Component {
                     url={this.props.url}
                     logo={this.props.logo}
                     size={this.state.qrCodeSize}
+                    logoRatio={this.props.logoRatio}
+                    logoMarginRatio={this.props.logoMarginRatio}
                 />
 
                 <Text

diff --git a/src/components/QRShare/propTypes.js b/src/components/QRShare/propTypes.js
@@ -17,6 +17,14 @@ const qrSharePropTypes = {
      * The logo which will be display in the middle of the QR code
      */
     logo: PropTypes.oneOfType([PropTypes.shape({uri: PropTypes.string}), PropTypes.number, PropTypes.string]),
+    /**
+     * The size ratio of logo to QR code
+     */
+    logoRatio: PropTypes.number,
+    /**
+     * The size ratio of margin around logo to QR code
+     */
+    logoMarginRatio: PropTypes.number,
 };
 
 const defaultProps = {

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
@@ -9,7 +9,7 @@ import compose from '../libs/compose';
 import reportPropTypes from './reportPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails';
 import styles from '../styles/styles';
-import roomAvatar from '../../assets/images/avatars/room.png';
+import expensifyLogo from '../../assets/images/expensify-logo-round-transparent.png';
 import * as ReportUtils from '../libs/ReportUtils';
 import MenuItem from '../components/MenuItem';
 import Clipboard from '../libs/Clipboard';
@@ -61,7 +61,9 @@ class ShareCodePage extends React.Component {
                             url={url}
                             title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
                             subtitle={isReport ? subtitle : this.props.session.email}
-                            logo={isReport ? roomAvatar : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.login)}
+                            logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.login)}
+                            logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
+                            logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                         />
                     </View>
 

diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
@@ -19,7 +19,8 @@ import Clipboard from '../../../../libs/Clipboard';
 import FixedFooter from '../../../../components/FixedFooter';
 import TwoFactorAuthForm from './TwoFactorAuthForm';
 import QRCode from '../../../../components/QRCode';
-import expensifyLogo from '../../../../../assets/images/expensify-logo-round-dark.png';
+import expensifyLogo from '../../../../../assets/images/expensify-logo-round-transparent.png';
+import CONST from '../../../../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -115,6 +116,8 @@ function VerifyPage(props) {
                             <QRCode
                                 url={buildAuthenticatorUrl()}
                                 logo={expensifyLogo}
+                                logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
+                                logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
                             />
                         </View>
                         <Text style={styles.mt5}>{props.translate('twoFactorAuth.addKey')}</Text>