From 3c5bb16341e235ebd4c611dc666f9e1309129440 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sat, 21 Sep 2024 11:12:57 +0530 Subject: [PATCH 01/12] update icon colors for SavedSearchThreeDotsMenu --- src/components/PopoverMenu.tsx | 5 +++++ src/components/ThreeDotsMenu/index.tsx | 2 ++ src/components/ThreeDotsMenu/types.ts | 3 +++ src/pages/Search/SavedSearchItemThreeDotMenu.tsx | 1 + 4 files changed, 11 insertions(+) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 3b074bf772e6..83012a4b8c6e 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -103,6 +103,9 @@ type PopoverMenuProps = Partial & { /** Whether to show the selected option checkmark */ shouldShowSelectedItemCheck?: boolean; + + /** Is this in the Pane */ + isPaneMenu?: boolean; }; function PopoverMenu({ @@ -128,6 +131,7 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, + isPaneMenu = false }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -304,6 +308,7 @@ function PopoverMenu({ interactive={item.interactive} isSelected={item.isSelected} badgeText={item.badgeText} + isPaneMenu={isPaneMenu} /> ))} diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx index da72135c6035..4df3238c12be 100644 --- a/src/components/ThreeDotsMenu/index.tsx +++ b/src/components/ThreeDotsMenu/index.tsx @@ -37,6 +37,7 @@ function ThreeDotsMenu({ shouldSetModalVisibility = true, disabled = false, modal = {}, + isPaneMenu = false }: ThreeDotsMenuProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -107,6 +108,7 @@ function ThreeDotsMenu({ shouldSetModalVisibility={shouldSetModalVisibility} anchorRef={buttonRef} shouldEnableNewFocusManagement + isPaneMenu={isPaneMenu} /> ); diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts index 6c3618ffc3ce..71913a5a5a3d 100644 --- a/src/components/ThreeDotsMenu/types.ts +++ b/src/components/ThreeDotsMenu/types.ts @@ -45,6 +45,9 @@ type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & { /** Should we announce the Modal visibility changes? */ shouldSetModalVisibility?: boolean; + + /** Is this in the Pane */ + isPaneMenu?: boolean; }; export default ThreeDotsMenuProps; diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx index fdb06828901e..5824842a8bd9 100644 --- a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx +++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx @@ -29,6 +29,7 @@ function SavedSearchItemThreeDotMenu({menuItems}: SavedSearchItemThreeDotMenuPro horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} + isPaneMenu /> ); From d28381cda78f3d3a39f206360e02ee1b1bd43030 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sat, 21 Sep 2024 14:08:31 +0530 Subject: [PATCH 02/12] fix saved search menu for narrow screen --- src/pages/Search/SearchTypeMenuNarrow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 0158a15bfc41..8fb5c5b3b0c5 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -118,6 +118,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} + isPaneMenu /> ), isSelected: currentSavedSearch?.hash === item.hash, From fabd84ee2d2b4f2b52f04ec39419fc66b65d4b0a Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sat, 21 Sep 2024 16:18:45 +0530 Subject: [PATCH 03/12] remove withOnyx and fix linting --- src/components/PopoverMenu.tsx | 2 +- src/components/ThreeDotsMenu/index.tsx | 19 +++++-------------- src/components/ThreeDotsMenu/types.ts | 11 ++--------- 3 files changed, 8 insertions(+), 24 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 83012a4b8c6e..81bb70a769f0 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -131,7 +131,7 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, - isPaneMenu = false + isPaneMenu = false, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx index 4df3238c12be..9eef7d8b86b5 100644 --- a/src/components/ThreeDotsMenu/index.tsx +++ b/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'; @@ -16,11 +15,6 @@ 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; -}; - function ThreeDotsMenu({ iconTooltip = 'common.more', icon = Expensicons.ThreeDots, @@ -36,9 +30,10 @@ function ThreeDotsMenu({ shouldOverlay = false, shouldSetModalVisibility = true, disabled = false, - modal = {}, - isPaneMenu = false + isPaneMenu = false, }: ThreeDotsMenuProps) { + const [modal] = useOnyx(ONYXKEYS.MODAL); + const theme = useTheme(); const styles = useThemeStyles(); const [isPopupMenuVisible, setPopupMenuVisible] = useState(false); @@ -116,8 +111,4 @@ function ThreeDotsMenu({ ThreeDotsMenu.displayName = 'ThreeDotsMenu'; -export default withOnyx({ - modal: { - key: ONYXKEYS.MODAL, - }, -})(ThreeDotsMenu); +export default ThreeDotsMenu; diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts index 71913a5a5a3d..250a72b62135 100644 --- a/src/components/ThreeDotsMenu/types.ts +++ b/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; -}; - -type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & { +type ThreeDotsMenuProps = { /** Tooltip for the popup icon */ iconTooltip?: TranslationPaths; @@ -45,7 +38,7 @@ type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & { /** Should we announce the Modal visibility changes? */ shouldSetModalVisibility?: boolean; - + /** Is this in the Pane */ isPaneMenu?: boolean; }; From 7769a2261e75399b2a7e67f082d9519ee33b4725 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sat, 21 Sep 2024 16:23:25 +0530 Subject: [PATCH 04/12] fix eslint error --- src/components/ThreeDotsMenu/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx index 9eef7d8b86b5..6553833b63de 100644 --- a/src/components/ThreeDotsMenu/index.tsx +++ b/src/components/ThreeDotsMenu/index.tsx @@ -12,7 +12,6 @@ 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'; function ThreeDotsMenu({ From 51684e8c69d211ec76d8eb785fbcb77f92a95a65 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:15:04 +0530 Subject: [PATCH 05/12] update all popup menu icons to be consistent --- src/components/MenuItem.tsx | 2 +- src/components/MenuItemList.tsx | 14 +------------- src/components/PopoverMenu.tsx | 5 ----- src/components/ThreeDotsMenu/index.tsx | 2 -- src/components/ThreeDotsMenu/types.ts | 3 --- src/pages/Search/SavedSearchItemThreeDotMenu.tsx | 1 - src/pages/Search/SearchTypeMenu.tsx | 2 -- src/pages/Search/SearchTypeMenuNarrow.tsx | 1 - src/pages/home/sidebar/AllSettingsScreen.tsx | 1 - src/pages/settings/InitialSettingsPage.tsx | 1 - src/pages/workspace/WorkspaceInitialPage.tsx | 1 - 11 files changed, 2 insertions(+), 31 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 2524658d6ffc..ec0fdeccea88 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -416,7 +416,7 @@ function MenuItem( titleWithTooltips, displayInDefaultIconColor = false, contentFit = 'cover', - isPaneMenu = false, + isPaneMenu = true, shouldPutLeftPaddingWhenNoIcon = false, onFocus, onBlur, diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx index d33a17f90a5e..b2d79b6243ac 100644 --- a/src/components/MenuItemList.tsx +++ b/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(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} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 81bb70a769f0..3b074bf772e6 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -103,9 +103,6 @@ type PopoverMenuProps = Partial & { /** Whether to show the selected option checkmark */ shouldShowSelectedItemCheck?: boolean; - - /** Is this in the Pane */ - isPaneMenu?: boolean; }; function PopoverMenu({ @@ -131,7 +128,6 @@ function PopoverMenu({ shouldEnableNewFocusManagement, restoreFocusType, shouldShowSelectedItemCheck = false, - isPaneMenu = false, }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -308,7 +304,6 @@ function PopoverMenu({ interactive={item.interactive} isSelected={item.isSelected} badgeText={item.badgeText} - isPaneMenu={isPaneMenu} /> ))} diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx index 6553833b63de..e44d57ab18e2 100644 --- a/src/components/ThreeDotsMenu/index.tsx +++ b/src/components/ThreeDotsMenu/index.tsx @@ -29,7 +29,6 @@ function ThreeDotsMenu({ shouldOverlay = false, shouldSetModalVisibility = true, disabled = false, - isPaneMenu = false, }: ThreeDotsMenuProps) { const [modal] = useOnyx(ONYXKEYS.MODAL); @@ -102,7 +101,6 @@ function ThreeDotsMenu({ shouldSetModalVisibility={shouldSetModalVisibility} anchorRef={buttonRef} shouldEnableNewFocusManagement - isPaneMenu={isPaneMenu} /> ); diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts index 250a72b62135..86a10d08d449 100644 --- a/src/components/ThreeDotsMenu/types.ts +++ b/src/components/ThreeDotsMenu/types.ts @@ -38,9 +38,6 @@ type ThreeDotsMenuProps = { /** Should we announce the Modal visibility changes? */ shouldSetModalVisibility?: boolean; - - /** Is this in the Pane */ - isPaneMenu?: boolean; }; export default ThreeDotsMenuProps; diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx index 5824842a8bd9..fdb06828901e 100644 --- a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx +++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx @@ -29,7 +29,6 @@ function SavedSearchItemThreeDotMenu({menuItems}: SavedSearchItemThreeDotMenuPro horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} - isPaneMenu /> ); diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index 7c8af2388f52..c46954df869d 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -191,7 +191,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { iconWidth={variables.iconSizeNormal} iconHeight={variables.iconSizeNormal} shouldUseSingleExecution - isPaneMenu /> ), @@ -236,7 +235,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { wrapperStyle={styles.sectionMenuItem} focused={index === activeItemIndex} onPress={onPress} - isPaneMenu /> ); })} diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 8fb5c5b3b0c5..0158a15bfc41 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -118,7 +118,6 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} - isPaneMenu /> ), isSelected: currentSavedSearch?.hash === item.hash, diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx index c94c7012e411..87fff1b48329 100644 --- a/src/pages/home/sidebar/AllSettingsScreen.tsx +++ b/src/pages/home/sidebar/AllSettingsScreen.tsx @@ -86,7 +86,6 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) { shouldShowRightIcon: item.shouldShowRightIcon, shouldBlockSelection: !!item.link, wrapperStyle: styles.sectionMenuItem, - isPaneMenu: true, focused: item.focused, brickRoadIndicator: item.brickRoadIndicator, })); diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 851f8ca5441b..f49b3a181d11 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -342,7 +342,6 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms !!item.routeName && !!(activeCentralPaneRoute.name.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')) } - isPaneMenu iconRight={item.iconRight} shouldShowRightIcon={item.shouldShowRightIcon} /> diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index fd7a45e31acb..0d656da69d73 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -402,7 +402,6 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyCategories wrapperStyle={styles.sectionMenuItem} highlighted={enabledItem?.routeName === item.routeName} focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))} - isPaneMenu /> ))} From c5792f6d472df700e3b5482aaa8e7b24c31667d6 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:39:26 +0530 Subject: [PATCH 06/12] fix color on hover for "Add copilot" button --- src/pages/settings/Security/SecuritySettingsPage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 6403b0ac64e2..dc1b218418e1 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/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; @@ -188,7 +186,6 @@ function SecuritySettingsPage() { Navigation.navigate(ROUTES.SETTINGS_ADD_DELEGATE)} shouldShowRightIcon wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mb6]} From f1d48836ec69f1e910075fbf33d87b9d9816a9ae Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:40:29 +0530 Subject: [PATCH 07/12] fix color on hover for "request early cancellation" button --- .../CardSection/RequestEarlyCancellationMenuItem/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/settings/Subscription/CardSection/RequestEarlyCancellationMenuItem/index.tsx b/src/pages/settings/Subscription/CardSection/RequestEarlyCancellationMenuItem/index.tsx index 9fbb48e51605..2d1af54b5b20 100644 --- a/src/pages/settings/Subscription/CardSection/RequestEarlyCancellationMenuItem/index.tsx +++ b/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 ( Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_REQUEST_EARLY_CANCELLATION)} From 240640a3390c1063c4ad7e7b70ae38f9146a3b09 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:45:11 +0530 Subject: [PATCH 08/12] fix color on hover for workspace > workflow > select a non default workflow > delete --- .../workspace/workflows/approvals/ApprovalWorkflowEditor.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx b/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx index 6325ce1da21d..2b7abca0f3b3 100644 --- a/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx +++ b/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) { const styles = useThemeStyles(); - const theme = useTheme(); const {translate, toLocaleOrdinal} = useLocalize(); const approverCount = approvalWorkflow.approvers.length; @@ -168,7 +166,6 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic From 8ae86d73b74c9f3d0d881eb9e68c7437b5227c2f Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:46:19 +0530 Subject: [PATCH 09/12] fix color on hover for workspace > expensify card > select any card > deactivate card --- .../expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index ad2b71e8e187..03b489d93402 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/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 (isOffline ? setIsOfflineModalVisible(true) : setIsDeactivateModalVisible(true))} From 1572322c5db1dde6e599aef8909e96133c3fcfa2 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 09:47:41 +0530 Subject: [PATCH 10/12] fix color on hover for workspace > workflow > add approval workflow --- src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx index cc80705534b2..cf1fdf30c7a4 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx +++ b/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, From 455b67cd3069b5c339c7369d926d195defc357c8 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 16:54:33 +0530 Subject: [PATCH 11/12] fix color on hover for table icon (workspace settings > three dot menu > import spreadsheet) --- assets/images/table.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/images/table.svg b/assets/images/table.svg index a9cfe68f339e..36d4ced774f1 100644 --- a/assets/images/table.svg +++ b/assets/images/table.svg @@ -1,3 +1,3 @@ - + From d167bdf1e85695fac675c763cc4de732f8080cb5 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 19:06:57 +0530 Subject: [PATCH 12/12] remove withOnyx usage --- src/pages/home/sidebar/AllSettingsScreen.tsx | 18 ++---- src/pages/settings/InitialSettingsPage.tsx | 58 ++++---------------- 2 files changed, 15 insertions(+), 61 deletions(-) diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx index 87fff1b48329..0025e6b429c5 100644 --- a/src/pages/home/sidebar/AllSettingsScreen.tsx +++ b/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; -}; +function AllSettingsScreen() { + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); -type AllSettingsScreenProps = AllSettingsScreenOnyxProps; - -function AllSettingsScreen({policies}: AllSettingsScreenProps) { const styles = useThemeStyles(); const waitForNavigate = useWaitForNavigation(); const {translate} = useLocalize(); @@ -121,8 +115,4 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) { AllSettingsScreen.displayName = 'AllSettingsScreen'; -export default withOnyx({ - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, -})(AllSettingsScreen); +export default AllSettingsScreen; diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index f49b3a181d11..8dce84f8b470 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/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; - - /** List of bank accounts */ - bankAccountList: OnyxEntry; - - /** List of user's cards */ - fundList: OnyxEntry; - - /** Information about the user accepting the terms for payments */ - walletTerms: OnyxEntry; - - /** Login list for the user that is signed in */ - loginList: OnyxEntry; - - /** The policies which the user has access to */ - policies: OnyxCollection; -}; - -type InitialSettingsPageProps = InitialSettingsPageOnyxProps & WithCurrentUserPersonalDetailsProps; +type InitialSettingsPageProps = WithCurrentUserPersonalDetailsProps; type MenuData = { translationKey: TranslationPaths; @@ -94,7 +72,14 @@ type MenuData = { type Menu = {sectionStyle: StyleProp; 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(); @@ -449,25 +434,4 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms InitialSettingsPage.displayName = 'InitialSettingsPage'; -export default withCurrentUserPersonalDetails( - withOnyx({ - 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);