MM-31874 Properly use theme mention highlight color (#5268)

app/components/at_mention/__snapshots__/at_mention.test.js.snap

@@ -2,13 +2,18 @@
 
 exports[`AtMention should match snapshot, no highlight 1`] = `
 <Text
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "yellow",
+    }
+  }
 >
   <Text
     style={
       Array [
         Object {
-          "backgroundColor": "yellow",
+          "backgroundColor": "#ffe577",
+          "color": "#145dbf",
         },
       ]
     }
@@ -22,7 +27,11 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
 <Text
   onLongPress={[Function]}
   onPress={[Function]}
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "yellow",
+    }
+  }
 >
   <Text
     style={
@@ -31,7 +40,8 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
           "color": "#ff0000",
         },
         Object {
-          "backgroundColor": "yellow",
+          "backgroundColor": "#ffe577",
+          "color": "#145dbf",
         },
       ]
     }
@@ -45,7 +55,11 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
 <Text
   onLongPress={[Function]}
   onPress={[Function]}
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "yellow",
+    }
+  }
 >
   <Text
     style={

app/components/at_mention/at_mention.js

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, Text} from 'react-native';
+import {Text} from 'react-native';
 import Clipboard from '@react-native-community/clipboard';
 import {intlShape} from 'react-intl';
 import {displayUsername} from '@mm-redux/utils/user_utils';
@@ -139,7 +139,7 @@ export default class AtMention extends React.PureComponent {
     }
 
     render() {
-        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props;
+        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys, theme} = this.props;
         const {user} = this.state;
         const mentionTextStyle = [];
 
@@ -155,9 +155,8 @@ export default class AtMention extends React.PureComponent {
         let styleText;
 
         if (textStyle) {
-            const {backgroundColor: bg, ...otherStyles} = StyleSheet.flatten(textStyle);
-            backgroundColor = bg;
-            styleText = otherStyles;
+            backgroundColor = theme.mentionHighlightBg;
+            styleText = textStyle;
         }
 
         if (user?.username) {
@@ -194,7 +193,7 @@ export default class AtMention extends React.PureComponent {
         }
 
         if (suffix) {
-            const suffixStyle = {...styleText, color: this.props.theme.centerChannelColor};
+            const suffixStyle = {...styleText, color: theme.centerChannelColor};
             suffixElement = (
                 <Text style={suffixStyle}>
                     {suffix}
@@ -207,7 +206,7 @@ export default class AtMention extends React.PureComponent {
         }
 
         if (highlighted) {
-            mentionTextStyle.push({backgroundColor});
+            mentionTextStyle.push({backgroundColor, color: theme.mentionColor});
         }
 
         return (

app/components/at_mention/at_mention.test.js

@@ -3,6 +3,9 @@
 
 import React from 'react';
 import {shallow} from 'enzyme';
+
+import {Preferences} from '@mm-redux/constants';
+
 import AtMention from './at_mention.js';
 
 describe('AtMention', () => {
@@ -13,7 +16,7 @@ describe('AtMention', () => {
         mentionName: 'John.Smith',
         mentionStyle: {color: '#ff0000'},
         textStyle: {backgroundColor: 'yellow'},
-        theme: {},
+        theme: Preferences.THEMES.default,
     };
 
     test('should match snapshot, no highlight', () => {