Fix icon color for saved search popup menu

src/components/MenuItem.tsx

@@ -416,7 +416,7 @@ function MenuItem(
         titleWithTooltips,
         displayInDefaultIconColor = false,
         contentFit = 'cover',
-        isPaneMenu = false,
+        isPaneMenu = true,
         shouldPutLeftPaddingWhenNoIcon = false,
         onFocus,
         onBlur,

src/components/MenuItemList.tsx

@@ -49,20 +49,9 @@ type MenuItemListProps = {
 
     /** Icon Height */
     iconHeight?: number;
-
-    /** Is this in the Pane */
-    isPaneMenu?: boolean;
 };
 
-function MenuItemList({
-    menuItems = [],
-    shouldUseSingleExecution = false,
-    wrapperStyle = {},
-    icon = undefined,
-    iconWidth = undefined,
-    iconHeight = undefined,
-    isPaneMenu = false,
-}: MenuItemListProps) {
+function MenuItemList({menuItems = [], shouldUseSingleExecution = false, wrapperStyle = {}, icon = undefined, iconWidth = undefined, iconHeight = undefined}: MenuItemListProps) {
     const popoverAnchor = useRef<View>(null);
     const {isExecuting, singleExecution} = useSingleExecution();
 
@@ -99,7 +88,6 @@ function MenuItemList({
                         icon={icon}
                         iconWidth={iconWidth}
                         iconHeight={iconHeight}
-                        isPaneMenu={isPaneMenu}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...menuItemProps}
                         disabled={!!menuItemProps.disabled || isExecuting}

src/components/ThreeDotsMenu/index.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
@@ -13,14 +12,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Modal} from '@src/types/onyx';
 import type ThreeDotsMenuProps from './types';
 
-type ThreeDotsMenuOnyxProps = {
-    /** Details about any modals being used */
-    modal: OnyxEntry<Modal>;
-};
-
 function ThreeDotsMenu({
     iconTooltip = 'common.more',
     icon = Expensicons.ThreeDots,
@@ -36,8 +29,9 @@ function ThreeDotsMenu({
     shouldOverlay = false,
     shouldSetModalVisibility = true,
     disabled = false,
-    modal = {},
 }: ThreeDotsMenuProps) {
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+
     const theme = useTheme();
     const styles = useThemeStyles();
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
@@ -114,8 +108,4 @@ function ThreeDotsMenu({
 
 ThreeDotsMenu.displayName = 'ThreeDotsMenu';
 
-export default withOnyx<ThreeDotsMenuProps, ThreeDotsMenuOnyxProps>({
-    modal: {
-        key: ONYXKEYS.MODAL,
-    },
-})(ThreeDotsMenu);
+export default ThreeDotsMenu;

src/components/ThreeDotsMenu/types.ts

@@ -1,18 +1,11 @@
 import type {StyleProp, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type {TranslationPaths} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
-import type {Modal} from '@src/types/onyx';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type ThreeDotsMenuOnyxProps = {
-    /** Details about any modals being used */
-    modal: OnyxEntry<Modal>;
-};
-
-type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & {
+type ThreeDotsMenuProps = {
     /** Tooltip for the popup icon */
     iconTooltip?: TranslationPaths;
 

src/pages/Search/SearchTypeMenu.tsx

@@ -191,7 +191,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                     iconWidth={variables.iconSizeNormal}
                     iconHeight={variables.iconSizeNormal}
                     shouldUseSingleExecution
-                    isPaneMenu
                 />
             </View>
         ),
@@ -236,7 +235,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                             wrapperStyle={styles.sectionMenuItem}
                             focused={index === activeItemIndex}
                             onPress={onPress}
-                            isPaneMenu
                         />
                     );
                 })}

src/pages/home/sidebar/AllSettingsScreen.tsx

@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
-import type {OnyxCollection} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Breadcrumbs from '@components/Breadcrumbs';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemList from '@components/MenuItemList';
@@ -17,15 +16,10 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Policy} from '@src/types/onyx';
 
-type AllSettingsScreenOnyxProps = {
-    policies: OnyxCollection<Policy>;
-};
+function AllSettingsScreen() {
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
 
-type AllSettingsScreenProps = AllSettingsScreenOnyxProps;
-
-function AllSettingsScreen({policies}: AllSettingsScreenProps) {
     const styles = useThemeStyles();
     const waitForNavigate = useWaitForNavigation();
     const {translate} = useLocalize();
@@ -86,7 +80,6 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) {
             shouldShowRightIcon: item.shouldShowRightIcon,
             shouldBlockSelection: !!item.link,
             wrapperStyle: styles.sectionMenuItem,
-            isPaneMenu: true,
             focused: item.focused,
             brickRoadIndicator: item.brickRoadIndicator,
         }));
@@ -122,8 +115,4 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) {
 
 AllSettingsScreen.displayName = 'AllSettingsScreen';
 
-export default withOnyx<AllSettingsScreenProps, AllSettingsScreenOnyxProps>({
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-})(AllSettingsScreen);
+export default AllSettingsScreen;

src/pages/settings/InitialSettingsPage.tsx

@@ -3,8 +3,7 @@ import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, use
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, ScrollView as RNScrollView, ScrollViewProps, StyleProp, ViewStyle} from 'react-native';
 import {NativeModules, View} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import AccountSwitcher from '@components/AccountSwitcher';
 import AccountSwitcherSkeletonView from '@components/AccountSwitcherSkeletonView';
@@ -45,32 +44,11 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
 import type {Icon as TIcon} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type InitialSettingsPageOnyxProps = {
-    /** The user's wallet account */
-    userWallet: OnyxEntry<OnyxTypes.UserWallet>;
-
-    /** List of bank accounts */
-    bankAccountList: OnyxEntry<OnyxTypes.BankAccountList>;
-
-    /** List of user's cards */
-    fundList: OnyxEntry<OnyxTypes.FundList>;
-
-    /** Information about the user accepting the terms for payments */
-    walletTerms: OnyxEntry<OnyxTypes.WalletTerms>;
-
-    /** Login list for the user that is signed in */
-    loginList: OnyxEntry<OnyxTypes.LoginList>;
-
-    /** The policies which the user has access to */
-    policies: OnyxCollection<OnyxTypes.Policy>;
-};
-
-type InitialSettingsPageProps = InitialSettingsPageOnyxProps & WithCurrentUserPersonalDetailsProps;
+type InitialSettingsPageProps = WithCurrentUserPersonalDetailsProps;
 
 type MenuData = {
     translationKey: TranslationPaths;
@@ -94,7 +72,14 @@ type MenuData = {
 
 type Menu = {sectionStyle: StyleProp<ViewStyle>; sectionTranslationKey: TranslationPaths; items: MenuData[]};
 
-function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms, loginList, currentUserPersonalDetails, policies}: InitialSettingsPageProps) {
+function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPageProps) {
+    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+
     const network = useNetwork();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -342,7 +327,6 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
                                     !!item.routeName &&
                                     !!(activeCentralPaneRoute.name.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', ''))
                                 }
-                                isPaneMenu
                                 iconRight={item.iconRight}
                                 shouldShowRightIcon={item.shouldShowRightIcon}
                             />
@@ -450,25 +434,4 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
 
 InitialSettingsPage.displayName = 'InitialSettingsPage';
 
-export default withCurrentUserPersonalDetails(
-    withOnyx<InitialSettingsPageProps, InitialSettingsPageOnyxProps>({
-        userWallet: {
-            key: ONYXKEYS.USER_WALLET,
-        },
-        bankAccountList: {
-            key: ONYXKEYS.BANK_ACCOUNT_LIST,
-        },
-        fundList: {
-            key: ONYXKEYS.FUND_LIST,
-        },
-        walletTerms: {
-            key: ONYXKEYS.WALLET_TERMS,
-        },
-        loginList: {
-            key: ONYXKEYS.LOGIN_LIST,
-        },
-        policies: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-    })(InitialSettingsPage),
-);
+export default withCurrentUserPersonalDetails(InitialSettingsPage);

src/pages/settings/Security/SecuritySettingsPage.tsx

@@ -17,7 +17,6 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {clearAddDelegateErrors} from '@libs/actions/Delegate';
@@ -36,7 +35,6 @@ function SecuritySettingsPage() {
     const {translate} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const theme = useTheme();
     const {canUseNewDotCopilot} = usePermissions();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
@@ -189,7 +187,6 @@ function SecuritySettingsPage() {
                                             <MenuItem
                                                 title={translate('delegate.addCopilot')}
                                                 icon={Expensicons.UserPlus}
-                                                iconFill={theme.iconSuccessFill}
                                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_ADD_DELEGATE)}
                                                 shouldShowRightIcon
                                                 wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mb6]}

src/pages/settings/Subscription/CardSection/RequestEarlyCancellationMenuItem/index.tsx

@@ -2,21 +2,18 @@ import React from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 
 function RequestEarlyCancellationMenuItem() {
     const {translate} = useLocalize();
-    const theme = useTheme();
     const styles = useThemeStyles();
 
     return (
         <MenuItem
             title={translate('subscription.requestEarlyCancellation.title')}
             icon={Expensicons.CalendarSolid}
-            iconFill={theme.success}
             shouldShowRightIcon
             wrapperStyle={styles.sectionMenuItemTopDescription}
             onPress={() => Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_REQUEST_EARLY_CANCELLATION)}

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -392,7 +392,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                     wrapperStyle={styles.sectionMenuItem}
                                     highlighted={enabledItem?.routeName === item.routeName}
                                     focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))}
-                                    isPaneMenu
                                 />
                             ))}
                         </View>

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx

@@ -18,7 +18,6 @@ import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -46,7 +45,6 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
-    const theme = useTheme();
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
@@ -153,7 +151,6 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
                             </OfflineWithFeedback>
                             <MenuItem
                                 icon={Expensicons.Trashcan}
-                                iconFill={theme.icon}
                                 title={translate('workspace.expensifyCard.deactivate')}
                                 style={styles.mv1}
                                 onPress={() => (isOffline ? setIsOfflineModalVisible(true) : setIsDeactivateModalVisible(true))}

src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

@@ -181,7 +181,6 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) {
                             icon={Expensicons.Plus}
                             iconHeight={20}
                             iconWidth={20}
-                            iconFill={theme.success}
                             style={[styles.sectionMenuItemTopDescription, styles.mt6, styles.mbn3]}
                             onPress={addApprovalAction}
                         />
@@ -282,7 +281,6 @@ function WorkspaceWorkflowsPage({policy, route}: WorkspaceWorkflowsPageProps) {
         preferredLocale,
         onPressAutoReportingFrequency,
         approvalWorkflows,
-        theme.success,
         theme.spinner,
         addApprovalAction,
         isOffline,

src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

@@ -10,7 +10,6 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
@@ -36,7 +35,6 @@ type ApprovalWorkflowEditorProps = {
 
 function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, policy, policyID}: ApprovalWorkflowEditorProps, ref: ForwardedRef<ScrollViewRN>) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate, toLocaleOrdinal} = useLocalize();
     const approverCount = approvalWorkflow.approvers.length;
 
@@ -168,7 +166,6 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
                     <MenuItem
                         wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt6]}
                         icon={Expensicons.Trashcan}
-                        iconFill={theme.icon}
                         title={translate('common.delete')}
                         onPress={removeApprovalWorkflow}
                     />