Merge pull request #84385 from abzokhattab/abzokhattab/fix-badge-style-regressions

badge style fixes

(cherry picked from commit 22aa3d2)

(cherry-picked to staging by puneetlath)

Author: puneetlath

src/components/SelectionList/ListItem/InviteMemberListItem.tsx

@@ -5,6 +5,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import SelectCircle from '@components/SelectCircle';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -153,7 +154,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}

src/components/SelectionList/ListItem/UserListItem.tsx

@@ -5,6 +5,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -162,7 +163,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightCaret && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon

src/components/SelectionList/ListItemFocusContext.tsx

@@ -0,0 +1,13 @@
+import {createContext, useContext} from 'react';
+
+type ListItemFocusContextValue = {
+    isFocused?: boolean;
+};
+
+const ListItemFocusContext = createContext<ListItemFocusContextValue>({isFocused: false});
+
+function useListItemFocus() {
+    return useContext(ListItemFocusContext);
+}
+
+export {ListItemFocusContext, useListItemFocus};

src/components/SelectionListWithSections/InviteMemberListItem.tsx

@@ -5,6 +5,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import SelectCircle from '@components/SelectCircle';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -150,14 +151,15 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}
                                 disabled={isDisabled}
                                 role={CONST.ROLE.BUTTON}
                                 accessibilityLabel={item.text ?? ''}
                                 style={[styles.ml2, styles.optionSelectCircle]}
+                                sentryLabel={CONST.SENTRY_LABEL.LIST_ITEM.INVITE_MEMBER_CHECKBOX}
                             >
                                 <SelectCircle
                                     isChecked={item.isSelected ?? false}

src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx

@@ -23,7 +23,7 @@ function BadgeActionCell({action, isLargeScreenWidth, shouldDisablePointerEvents
     const StyleUtils = useStyleUtils();
     const text = translate(actionTranslationsMap[action]);
 
-    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.approved;
+    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.closed;
 
     return (
         <View

src/components/SelectionListWithSections/UserListItem.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import Icon from '@components/Icon';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -160,7 +161,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightIcon && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon

src/pages/workspace/MemberRightIcon.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import Badge from '@components/Badge';
+import {useListItemFocus} from '@components/SelectionList/ListItemFocusContext';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 
@@ -14,6 +16,8 @@ type MemberRightIconProps = {
 
 export default function MemberRightIcon({role, owner, login, badgeStyles}: MemberRightIconProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isFocused} = useListItemFocus();
 
     let badgeText: TranslationPaths | undefined;
     if (owner && owner === login) {
@@ -27,7 +31,7 @@ export default function MemberRightIcon({role, owner, login, badgeStyles}: Membe
         return (
             <Badge
                 text={translate(badgeText)}
-                badgeStyles={badgeStyles}
+                badgeStyles={[isFocused && styles.badgeDefaultActive, badgeStyles]}
             />
         );
     }