From 9f5211061e9170938b883e867e8e66fa6fd92590 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 8 Mar 2018 14:10:33 +0000
Subject: [PATCH 1/3] CSS for E2E "fudge-button" UI

See https://github.com/matrix-org/matrix-react-sdk/pull/1791
---
 .../views/rooms/_EventTile.scss               | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index 48afc86df9..4bb81a2e53 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -298,6 +298,34 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EventTile_keyRequestInfo {
+    font-size: 12px;
+}
+
+.mx_EventTile_keyRequestInfo_text {
+    opacity: 0.5;
+}
+
+.mx_EventTile_keyRequestInfo_text a {
+    color: $primary-fg-color;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+    text-align: auto;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+    margin-top: 0px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+    margin-bottom: 0px;
+}
+
 .mx_EventTile_12hr .mx_EventTile_e2eIcon {
     padding-left: 5px;
 }

From 8d5717b812ffa3e0f566c31c270864e5c8fd9d24 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 8 Mar 2018 14:11:06 +0000
Subject: [PATCH 2/3] Allow arbitrary React nodes in RoomTooltip

---
 src/components/views/rooms/RoomTooltip.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index 714d57ca24..97db4916da 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -31,7 +31,7 @@ module.exports = React.createClass({
         tooltipClassName: React.PropTypes.string,
         // The tooltip is derived from either the room name or a label
         room: React.PropTypes.object,
-        label: React.PropTypes.string,
+        label: React.PropTypes.node,
     },
 
     // Create a wrapper for the tooltip outside the parent and attach it to the body element

From 1119098eeca7c4a88debb3a73cbe5fb98aabee88 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 8 Mar 2018 14:11:36 +0000
Subject: [PATCH 3/3] Alter style of TooltipButton_helpText

 - Aligned to the "start" of the text (left for LTR, right for RTL)
 - Increase width by 200px
---
 .../css/matrix-react-sdk/views/elements/_ToolTipButton.scss   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_ToolTipButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_ToolTipButton.scss
index ef9dd02b2a..c496e67515 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_ToolTipButton.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ToolTipButton.scss
@@ -44,8 +44,8 @@ limitations under the License.
 }
 
 .mx_ToolTipButton_helpText {
-    width: 200px;
-    text-align: center;
+    width: 400px;
+    text-align: start;
     line-height: 17px !important;
 }