From 0e71ea7a5af6f5816335bd7b8dfa44c15eb19e38 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 17 Jul 2017 14:52:08 +0100
Subject: [PATCH 1/2] Make some adjustments to mx_UserPill and mx_RoomPill

So that they can appear correctly in the body of a text message.
---
 .../views/elements/_RichText.scss             | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
index 1392ec64..9b1e9cd8 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
@@ -2,23 +2,34 @@
 // naming scheme; it's completely unclear where or how they're being used
 // --Matthew
 
+.mx_UserPill,
+.mx_RoomPill {
+    padding: 0px 5px 0px 2px;
+    border-radius: 16px;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+}
+
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_UserPill,
 .mx_UserPill {
     color: $accent-fg-color;
     background-color: $accent-color;
-    padding: 1px 5px 0px 2px;
-    border-radius: 16px;
-}
-
-.mx_UserPill img, .mx_RoomPill img {
-    vertical-align: -2px;
-    margin-right: 1px
 }
 
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_RoomPill,
 .mx_RoomPill {
     background-color: $rte-room-pill-color;
     color: $accent-fg-color;
-    padding: 1px 5px 0px 2px;
-    border-radius: 16px;
+}
+
+.mx_UserPill .mx_BaseAvatar,
+.mx_RoomPill .mx_BaseAvatar {
+    position: relative;
+    top: 2px;
+    margin-right: 1px;
 }
 
 .mx_Markdown_BOLD {

From 871c9e6d3e6586fef48deeb1c1db74a20d6b1749 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 19 Jul 2017 11:02:51 +0100
Subject: [PATCH 2/2] Add bing mention pill CSS

Useful with https://github.com/matrix-org/matrix-react-sdk/pull/1234
---
 .../css/matrix-react-sdk/views/elements/_RichText.scss      | 6 +++++-
 src/skins/vector/css/themes/_base.scss                      | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
index 9b1e9cd8..4c729393 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
@@ -14,8 +14,12 @@
 /* More specific to override `.markdown-body a` color */
 .mx_EventTile_content .markdown-body a.mx_UserPill,
 .mx_UserPill {
+    color: $primary-fg-color;
+}
+
+.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me {
     color: $accent-fg-color;
-    background-color: $accent-color;
+    background-color: $mention-user-pill-bg-color;
 }
 
 /* More specific to override `.markdown-body a` color */
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 9701a48f..545334d3 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -19,6 +19,7 @@ $focus-brightness: 125%;
 
 // red warning colour
 $warning-color: #ff0064;
+$mention-user-pill-bg-color: #ff0064;
 
 $preview-bar-bg-color: #f7f7f7;