Theme switching: Consistent naming

src/components/AddPlaidBankAccount.js

@@ -168,7 +168,7 @@ function AddPlaidBankAccount({
         value: account.plaidAccountID,
         label: `${account.addressName} ${account.mask}`,
     }));
-    const {icon, iconSize, iconStyles} = getBankIcon({themeStyles: styles});
+    const {icon, iconSize, iconStyles} = getBankIcon({styles});
     const plaidErrors = lodashGet(plaidData, 'errors');
     const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
     const bankName = lodashGet(plaidData, 'bankName');

src/components/ColorSchemeWrapper/index.tsx

@@ -5,9 +5,9 @@ import useThemeStyles from '@styles/useThemeStyles';
 
 function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
     const theme = useTheme();
-    const themeStyles = useThemeStyles();
+    const styles = useThemeStyles();
 
-    return <View style={[themeStyles.flex1, themeStyles.colorSchemeStyle(theme.colorScheme)]}>{children}</View>;
+    return <View style={[styles.flex1, styles.colorSchemeStyle(theme.colorScheme)]}>{children}</View>;
 }
 
 export default ColorSchemeWrapper;

src/components/Icon/BankIcons.ts

@@ -7,7 +7,7 @@ import CONST from '@src/CONST';
 import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
 
 type BankIconParams = {
-    themeStyles: ThemeStyles;
+    styles: ThemeStyles;
     bankName?: BankName;
     isCard?: boolean;
 };
@@ -115,7 +115,8 @@ function getBankNameKey(bankName: string): BankNameKey {
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon {
+
+export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
@@ -130,11 +131,11 @@ export default function getBankIcon({themeStyles, bankName, isCard = false}: Ban
     // For default Credit Card icon the icon size should not be set.
     if (!isCard) {
         bankIcon.iconSize = variables.iconSizeExtraLarge;
-        bankIcon.iconStyles = [themeStyles.bankIconContainer];
+        bankIcon.iconStyles = [styles.bankIconContainer];
     } else {
         bankIcon.iconHeight = variables.bankCardHeight;
         bankIcon.iconWidth = variables.bankCardWidth;
-        bankIcon.iconStyles = [themeStyles.assignedCardsIconContainer];
+        bankIcon.iconStyles = [styles.assignedCardsIconContainer];
     }
 
     return bankIcon;

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -115,7 +115,7 @@ function TooltipRenderedOnPageBody({
                 tooltipContentWidth: contentMeasuredWidth,
                 tooltipWrapperHeight: wrapperMeasuredHeight,
                 theme,
-                themeStyles: styles,
+                styles,
                 shiftHorizontal,
                 shiftVertical,
             }),

src/libs/PaymentUtils.ts

@@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, styles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -52,7 +52,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
         const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({
             bankName: bankAccount?.accountData?.additionalData?.bankName,
             isCard: false,
-            themeStyles,
+            styles,
         });
         combinedPaymentMethods.push({
             ...bankAccount,
@@ -66,7 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
     });
 
     Object.values(fundList).forEach((card) => {
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, themeStyles});
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, styles});
         combinedPaymentMethods.push({
             ...card,
             description: getPaymentMethodDescription(card?.accountType, card.accountData),

src/pages/ReimbursementAccount/EnableStep.js

@@ -50,7 +50,7 @@ function EnableStep(props) {
     const styles = useThemeStyles();
     const isUsingExpensifyCard = props.user.isUsingExpensifyCard;
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
-    const {icon, iconSize} = getBankIcon({bankName: achData.bankName, themeStyles: styles});
+    const {icon, iconSize} = getBankIcon({bankName: achData.bankName, styles});
     const formattedBankAccountNumber = achData.accountNumber ? `${props.translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : '';
     const bankName = achData.addressName;
 

src/pages/settings/Wallet/PaymentMethodList.js

@@ -224,7 +224,7 @@ function PaymentMethodList({
 
             return _.map(assignedCards, (card) => {
                 const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID);
-                const icon = getBankIcon({bankName: card.bank, isCard: true, themeStyles: styles});
+                const icon = getBankIcon({bankName: card.bank, isCard: true, styles});
 
                 // In the case a user has been assigned multiple physical Expensify Cards under one domain, display the Card with PAN
                 const expensifyCardDescription = numberPhysicalExpensifyCards > 1 ? CardUtils.getCardDescription(card.cardID) : translate('walletPage.expensifyCard');

src/styles/getContextMenuItemStyles/types.ts

@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
 import {type ThemeStyles} from '@styles/styles';
 
-type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[];
+type GetContextMenuItemStyle = (styles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
 export default GetContextMenuItemStyle;

src/styles/getTooltipStyles.ts

@@ -113,7 +113,7 @@ type TooltipParams = {
     tooltipContentWidth: number;
     tooltipWrapperHeight: number;
     theme: ThemeColors;
-    themeStyles: ThemeStyles;
+    styles: ThemeStyles;
     manualShiftHorizontal?: number;
     manualShiftVertical?: number;
 };
@@ -151,7 +151,7 @@ export default function getTooltipStyles({
     tooltipContentWidth,
     tooltipWrapperHeight,
     theme,
-    themeStyles,
+    styles,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
 }: TooltipParams): TooltipStyles {
@@ -245,7 +245,7 @@ export default function getTooltipStyles({
         //      at the center of the hovered component.
         pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2);
 
-        pointerAdditionalStyle = shouldShowBelow ? themeStyles.flipUpsideDown : {};
+        pointerAdditionalStyle = shouldShowBelow ? styles.flipUpsideDown : {};
     }
 
     return {
@@ -268,8 +268,8 @@ export default function getTooltipStyles({
             left: rootWrapperLeft,
 
             // We are adding this to prevent the tooltip text from being selected and copied on CTRL + A.
-            ...themeStyles.userSelectNone,
-            ...themeStyles.pointerEventsNone,
+            ...styles.userSelectNone,
+            ...styles.pointerEventsNone,
         },
         textStyle: {
             color: theme.textReversed,

src/styles/optionRowStyles/types.ts

@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
 import {type ThemeStyles} from '@styles/styles';
 
-type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
+type CompactContentContainerStyles = (styles: ThemeStyles) => ViewStyle;
 
 export default CompactContentContainerStyles;