fix: migrate other methods, change types

src/components/Icon/BankIcons.ts

@@ -41,7 +41,7 @@ import SunTrustCard from '@assets/images/cardicons/suntrust.svg';
 import TdBankCard from '@assets/images/cardicons/td-bank.svg';
 import USBankCard from '@assets/images/cardicons/us-bank.svg';
 import USAACard from '@assets/images/cardicons/usaa.svg';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
 
 type BankIcon = {
@@ -53,7 +53,7 @@ type BankIcon = {
 };
 
 type BankIconParams = {
-    themeStyles: typeof styles;
+    themeStyles: ThemeStyles;
     bankName?: string;
     isCard?: boolean;
 };

src/components/Modal/BaseModal.tsx

@@ -140,11 +140,12 @@ function BaseModal(
                     isSmallScreenWidth,
                 },
                 theme,
+                styles,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth],
+        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles],
     );
 
     const {

src/components/PopoverWithoutOverlay/index.js

@@ -22,6 +22,7 @@ function Popover(props) {
             isSmallScreenWidth: false,
         },
         theme,
+        styles,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,

src/libs/PaymentUtils.ts

@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
@@ -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: typeof styles): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

@@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork';
 import compose from '@libs/compose';
 import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles';
 import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,9 +52,10 @@ const defaultProps = {
 };
 function BaseReportActionContextMenu(props) {
     const theme = useTheme();
+    const styles = useThemeStyles();
     const menuItemRefs = useRef({});
     const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
-    const wrapperStyle = getReportActionContextMenuStyles(props.isMini, props.isSmallScreenWidth, theme);
+    const wrapperStyle = getReportActionContextMenuStyles(styles, props.isMini, props.isSmallScreenWidth, theme);
     const {isOffline} = useNetwork();
 
     const reportAction = useMemo(() => {

src/styles/getContextMenuItemStyles/types.ts

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

src/styles/getModalStyles.ts

@@ -2,11 +2,11 @@ import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
-import styles from './styles';
+import {ThemeStyles} from './styles';
 import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
+function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
 
     return {
@@ -40,6 +40,7 @@ export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
     theme: ThemeColors,
+    styles: ThemeStyles,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
@@ -102,7 +103,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
             };
 
             // Allow this modal to be dismissed with a swipe down or swipe right
@@ -129,7 +130,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true),
             };
             swipeDirection = undefined;
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';

src/styles/getReportActionContextMenuStyles.ts

@@ -1,13 +1,13 @@
 import {ViewStyle} from 'react-native';
-import styles from './styles';
+import {ThemeStyles} from './styles';
 import {ThemeColors} from './themes/types';
 import variables from './variables';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
     backgroundColor: theme.componentBG,
 });
 
-const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [
+const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle[] => [
     styles.flexRow,
     getDefaultWrapperStyle(theme),
     {
@@ -27,9 +27,9 @@ const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [
  * @param isSmallScreenWidth
  * @param theme
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
+function getReportActionContextMenuStyles(styles: ThemeStyles, isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
     if (isMini) {
-        return getMiniWrapperStyle(theme);
+        return getMiniWrapperStyle(theme, styles);
     }
 
     return [

src/styles/optionRowStyles/types.ts

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