diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index c18b706e1acf..68d529c4a78d 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/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'); diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx index 577ccf9f3794..2909f1ffbe9f 100644 --- a/src/components/ColorSchemeWrapper/index.tsx +++ b/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 {children}; + return {children}; } export default ColorSchemeWrapper; diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 49ff4a64446b..5e4c0192ca86 100644 --- a/src/components/Icon/BankIcons.ts +++ b/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; diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js index c3898a4fe983..d92457238675 100644 --- a/src/components/Tooltip/TooltipRenderedOnPageBody.js +++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js @@ -115,7 +115,7 @@ function TooltipRenderedOnPageBody({ tooltipContentWidth: contentMeasuredWidth, tooltipWrapperHeight: wrapperMeasuredHeight, theme, - themeStyles: styles, + styles, shiftHorizontal, shiftVertical, }), diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 488041d2061f..ee7a293f6ad1 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco /** * Get the PaymentMethods list */ -function formatPaymentMethods(bankAccountList: Record, fundList: Record, themeStyles: ThemeStyles): PaymentMethod[] { +function formatPaymentMethods(bankAccountList: Record, fundList: Record, styles: ThemeStyles): PaymentMethod[] { const combinedPaymentMethods: PaymentMethod[] = []; Object.values(bankAccountList).forEach((bankAccount) => { @@ -52,7 +52,7 @@ function formatPaymentMethods(bankAccountList: Record, 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, 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), diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 13ab2794ea09..e7bdcf4082d2 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/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; diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js index 5af4129aefbc..60605311b1ab 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.js +++ b/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'); diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts index 60b25acec0cb..376fb8d46d7c 100644 --- a/src/styles/getContextMenuItemStyles/types.ts +++ b/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; diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts index fa2b5ee308e2..1adfa1969ab9 100644 --- a/src/styles/getTooltipStyles.ts +++ b/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, diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts index 8dc5d5cc9419..3425d7812be2 100644 --- a/src/styles/optionRowStyles/types.ts +++ b/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;