Merge pull request #33634 from paultsimura/fix/33589-here-icon-green

[CP Staging] fix: Make the "@here" mention icon green

(cherry picked from commit 52879e5)

src/components/MentionSuggestions.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import CONST from '@src/CONST';
@@ -30,7 +31,7 @@ type MentionSuggestionsProps = {
     /** Array of suggested mentions */
     mentions: Mention[];
 
-    /** Fired when the user selects an mention */
+    /** Fired when the user selects a mention */
     onSelect: () => void;
 
     /** Mention prefix that follows the @ sign  */
@@ -41,7 +42,7 @@ type MentionSuggestionsProps = {
      * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
     isMentionPickerLarge: boolean;
 
-    /** Meaures the parent container's position and dimensions. */
+    /** Measures the parent container's position and dimensions. */
     measureParentContainer: () => void;
 };
 
@@ -51,6 +52,7 @@ type MentionSuggestionsProps = {
 const keyExtractor = (item: Mention) => item.alternateText;
 
 function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSelect, isMentionPickerLarge, measureParentContainer = () => {}}: MentionSuggestionsProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     /**
@@ -70,6 +72,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                             size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
                             name={item.icons[0].name}
                             type={item.icons[0].type}
+                            fill={theme.success}
                             fallbackIcon={item.icons[0].fallbackIcon}
                         />
                     </View>
@@ -117,6 +120,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
             styles.flex1,
             styles.mentionSuggestionsDisplayName,
             styles.mentionSuggestionsHandle,
+            theme.success,
             StyleUtils,
         ],
     );