Merge pull request #5861 from Expensify/nmurray-update-default-bank-icon

Expensify · Oct 16, 2021 · d8c5ee0 · d8c5ee0
2 parents cb81866 + 0919e68
commit d8c5ee0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/assets/images/bankicons/generic-bank-account.svg b/assets/images/bankicons/generic-bank-account.svg
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -26,7 +26,6 @@ import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
 import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';
 import getBankIcon from './Icon/BankIcons';
 import Icon from './Icon';
-import variables from '../styles/variables';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -151,6 +150,7 @@ class AddPlaidBankAccount extends React.Component {
         const options = _.map(accounts, (account, index) => ({
             value: index, label: `${account.addressName} ${account.accountNumber}`,
         }));
+        const {bankIcon, bankIconSize} = getBankIcon(this.state.institution.name);
         return (
             <>
                 {(!this.props.plaidLinkToken || this.props.plaidBankAccounts.loading)
@@ -185,9 +185,9 @@ class AddPlaidBankAccount extends React.Component {
                         )}
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
                             <Icon
-                                src={getBankIcon(this.state.institution.name).icon}
-                                height={variables.avatarSizeNormal}
-                                width={variables.avatarSizeNormal}
+                                src={bankIcon}
+                                height={bankIconSize}
+                                width={bankIconSize}
                             />
                             <Text style={[styles.ml3, styles.textStrong]}>{this.state.institution.name}</Text>
                         </View>

diff --git a/src/components/Icon/BankIcons.js b/src/components/Icon/BankIcons.js
@@ -1,4 +1,4 @@
-import {Bank, CreditCard} from './Expensicons';
+import CreditCard from './Expensicons';
 import AmericanExpress from '../../../assets/images/bankicons/american-express.svg';
 import BankOfAmerica from '../../../assets/images/bankicons/bank-of-america.svg';
 import BB_T from '../../../assets/images/bankicons/bb-t.svg';
@@ -10,6 +10,7 @@ import CitizensBank from '../../../assets/images/bankicons/citizens-bank.svg';
 import Discover from '../../../assets/images/bankicons/discover.svg';
 import Fidelity from '../../../assets/images/bankicons/fidelity.svg';
 import HuntingtonBank from '../../../assets/images/bankicons/huntington-bank.svg';
+import GenericBank from '../../../assets/images/bankicons/generic-bank-account.svg';
 import NavyFederalCreditUnion from '../../../assets/images/bankicons/navy-federal-credit-union.svg';
 import PNC from '../../../assets/images/bankicons/pnc.svg';
 import RegionsBank from '../../../assets/images/bankicons/regions-bank.svg';
@@ -99,7 +100,7 @@ function getAssetIcon(bankName, isCard) {
         return USAA;
     }
 
-    return isCard ? CreditCard : Bank;
+    return isCard ? CreditCard : GenericBank;
 }
 
 /**
@@ -111,15 +112,15 @@ function getAssetIcon(bankName, isCard) {
 
 export default function getBankIcon(bankName, isCard) {
     const bankIcon = {
-        icon: isCard ? CreditCard : Bank,
+        icon: isCard ? CreditCard : GenericBank,
     };
 
     if (bankName) {
         bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard);
     }
 
-    // For default icons the icon size should not be set.
-    if (![CreditCard, Bank].includes(bankIcon.icon)) {
+    // For default Credit Card icon the icon size should not be set.
+    if (![CreditCard].includes(bankIcon.icon)) {
         bankIcon.iconSize = variables.iconSizeExtraLarge;
     }