Fix badge style regressions from #82210

- Add ListItemFocusContext so InviteMemberListItem can propagate
  isFocused to rightElement children. MemberRightIcon consumes this
  context to apply badgeDefaultActive when the row is focused,
  preventing the badge from blending into the activeComponentBG
  highlight.
- Map DONE action to reportStatusBadge.closed in BadgeActionCell so the
  Done action badge matches the Done status badge color (pink).

Author: abzokhattab

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: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}

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,7 +151,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}

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

@@ -23,7 +23,16 @@ 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 getBadgeTheme = () => {
+        if (action === CONST.SEARCH.ACTION_TYPES.PAID) {
+            return theme.reportStatusBadge.paid;
+        }
+        if (action === CONST.SEARCH.ACTION_TYPES.DONE) {
+            return theme.reportStatusBadge.closed;
+        }
+        return theme.reportStatusBadge.approved;
+    };
+    const badgeTheme = getBadgeTheme();
 
     return (
         <View

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]}
             />
         );
     }