Merge pull request #32250 from rezkiy37/feature/31677-theme-switching…

…-migration-master-file-tracking

[Theme Switching Migration] Missed imports

src/components/Modal/BaseModal.tsx

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

src/components/PopoverWithoutOverlay/index.js

@@ -6,10 +6,12 @@ import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {onOpen, close} = React.useContext(PopoverContext);
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
@@ -19,6 +21,7 @@ function Popover(props) {
             windowHeight: props.windowHeight,
             isSmallScreenWidth: false,
         },
+        theme,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,

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

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

src/styles/getModalStyles.ts

@@ -3,7 +3,7 @@ import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeColors} from './themes/types';
 import variables from './variables';
 
 function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
@@ -39,6 +39,7 @@ type GetModalStyles = {
 export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
+    theme: ThemeColors,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
@@ -196,7 +197,7 @@ export default function getModalStyles(
             modalContainerStyle = {
                 borderRadius: 12,
                 borderWidth: 1,
-                borderColor: themeColors.border,
+                borderColor: theme.border,
                 justifyContent: 'center',
                 overflow: 'hidden',
                 boxShadow: variables.popoverMenuShadow,

src/styles/getReportActionContextMenuStyles.ts

@@ -1,42 +1,40 @@
 import {ViewStyle} from 'react-native';
 import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-const defaultWrapperStyle: ViewStyle = {
-    backgroundColor: themeColors.componentBG,
-};
+const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
+    backgroundColor: theme.componentBG,
+});
 
-const miniWrapperStyle: ViewStyle[] = [
+const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [
     styles.flexRow,
-    defaultWrapperStyle,
+    getDefaultWrapperStyle(theme),
     {
         borderRadius: variables.buttonBorderRadius,
         borderWidth: 1,
-        borderColor: themeColors.border,
+        borderColor: theme.border,
         // In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
         // NOTE: asserting "transform" to a valid type, because it isn't possible to augment "transform".
         transform: 'translateZ(0)' as unknown as ViewStyle['transform'],
     },
 ];
 
-const bigWrapperStyle: ViewStyle[] = [styles.flexColumn, defaultWrapperStyle];
-
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
  * @param isMini
  * @param isSmallScreenWidth
+ * @param theme
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] {
+function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
     if (isMini) {
-        return miniWrapperStyle;
+        return getMiniWrapperStyle(theme);
     }
 
-    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return [
-        ...bigWrapperStyle,
+        styles.flexColumn,
+        getDefaultWrapperStyle(theme),
 
         // Small screens use a bottom-docked modal that already has vertical padding.
         isSmallScreenWidth ? {} : styles.pv3,