Fix link color in own messages

4 files changed, 22 insertions, 23 deletions

diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index 4ff8169e..9bcca83b 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -148,6 +148,22 @@ blockquote {
     padding: 12px;
     text-align: right;
 }
+.msg-bubble {
+    padding: 12px;
+    display: inline-block;
+    background: var(--border-color);
+    color: #222;
+}
+
+.msg-bubble-my {
+    color: #fff !important;
+    background: var(--link-color) !important;
+}
+
+.msg-bubble-my a {
+    color: #fff !important;
+    text-decoration: underline;
+}
 #replies .msg-txt,
 #private-messages .msg-txt {
     margin: 0;
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
index a25580e5..9903b4e5 100644
--- a/vnext/src/ui/PM.js
+++ b/vnext/src/ui/PM.js
@@ -2,16 +2,16 @@ import React from 'react';
 
 import Avatar from './Avatar';
 import { format } from '../utils/embed';
-import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
+import { chatItemStyle } from './helpers/BubbleStyle';
 
 function PM(props) {
-    const { chat } = props;
+    const { chat, visitor } = props;
     return (
         <li>
-            <div style={chatItemStyle(props.visitor, chat)}>
+            <div style={chatItemStyle(visitor, chat)}>
                 <Avatar user={chat.user} />
-                <div style={bubbleStyle(props.visitor, chat)}>
-                    <p dangerouslySetInnerHTML={{ __html: format(chat.body, 0, false) }} />
+                <div className={visitor.uid === chat.user.uid ? 'msg-bubble msg-bubble-my' : 'msg-bubble'}>
+                    <p dangerouslySetInnerHTML={{ __html: format(chat.body, '0', false) }} />
                 </div>
             </div>
         </li>
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 2e07cd0e..5a5dbb48 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -74,7 +74,7 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
       </div>
       {
         msg.body &&
-        <div style={bubbleStyle(visitor, msg)}>
+        <div className={visitor.uid === msg.user.uid ? 'msg-bubble msg-bubble-my' : 'msg-bubble'}>
           <div ref={msgRef}>
             <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid.toString(), (msg.tags || []).indexOf('code') >= 0) }} />
           </div>
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
index f8b0f4eb..f784e1e3 100644
--- a/vnext/src/ui/helpers/BubbleStyle.js
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -3,23 +3,6 @@
  * @param {import('../../api').Message} msg
  * @returns {React.CSSProperties}
  */
-export function bubbleStyle(me, msg) {
-    const isMe = me.uid === msg.user.uid;
-    const color = isMe ? '#fff' : '#222';
-    const background = isMe ? '#ec4b98' : 'var(--border-color)';
-    return {
-        background: background,
-        color: color,
-        padding: '12px',
-        display: 'inline-block'
-    };
-}
-
-/**
- * @param {import('../../api').User} me
- * @param {import('../../api').Message} msg
- * @returns {React.CSSProperties}
- */
 export function chatItemStyle(me, msg) {
     const isMe = me.uid === msg.user.uid;
     const alignment = isMe ? 'flex-end' : 'flex-start';