fix: differentiate between current user and other mentions colors (#2877

)
microsoftgraph · Nov 28, 2023 · 4d0db50 · 4d0db50
1 parent 88f711a
commit 4d0db50
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -75,12 +75,18 @@ const messageThreadStyles: MessageThreadStyles = {
     '& p>mgt-person,msft-mention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px', '2px')
+    },
+    '& .otherMention': {
+      color: 'var(--accent-base-color)'
     }
   },
   myChatMessageContainer: {
     '& p>mgt-person,msft-mention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px', '2px')
+    },
+    '& .otherMention': {
+      color: 'var(--accent-base-color)'
     }
   }
 };

diff --git a/packages/mgt-chat/src/utils/mentions.tsx b/packages/mgt-chat/src/utils/mentions.tsx
@@ -17,12 +17,17 @@ export const renderMGTMention = (chatState: GraphChatClient) => {
 
     const user = teamsMention?.mentioned?.user as User;
     if (user) {
-      const MGTMention = (_props: MgtTemplateProps) => {
+      const me = user?.id === chatState.userId;
+      const MgtMeMention = (_props: MgtTemplateProps) => {
         return defaultRenderer(mention);
       };
+      const MgtOtherMention = () => {
+        return <p className="otherMention">{mention.displayText}</p>;
+      };
+      const MgtMention = me ? MgtMeMention : MgtOtherMention;
       render = (
         <Person userId={user?.id} personCardInteraction={PersonCardInteraction.hover}>
-          <MGTMention template="default" />
+          <MgtMention />
         </Person>
       );
     }