From 5421ddb2e6806d61d2a2369643fc30d14d28d0c5 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 6 Apr 2021 17:11:53 +0200
Subject: [PATCH] MM-31874 Properly use theme mention highlight color (#5268)
 (#5281)

(cherry picked from commit 5bff6f9e58859d35dca5d4d733857677d4950aa1)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
---
 .../__snapshots__/at_mention.test.js.snap     | 24 +++++++++++++++----
 app/components/at_mention/at_mention.js       | 13 +++++-----
 app/components/at_mention/at_mention.test.js  |  5 +++-
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/components/at_mention/__snapshots__/at_mention.test.js.snap b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
index ae4e354a1..6427acd72 100644
--- a/app/components/at_mention/__snapshots__/at_mention.test.js.snap
+++ b/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={
diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js
index 39c3b00a5..07979e3ee 100644
--- a/app/components/at_mention/at_mention.js
+++ b/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 (
diff --git a/app/components/at_mention/at_mention.test.js b/app/components/at_mention/at_mention.test.js
index e0de559cc..c996b1aeb 100644
--- a/app/components/at_mention/at_mention.test.js
+++ b/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', () => {