From 8a6ae6b48edc81033f40f556cff54a20f8f22f4c Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 1 Mar 2019 15:59:08 -0700
Subject: [PATCH] Use a mask for the continuation icon

Fixes https://github.com/vector-im/riot-web/issues/7990
---
 res/css/views/messages/_CreateEvent.scss    | 7 ++++++-
 src/components/views/messages/RoomCreate.js | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss
index c095fc26af..adf16d6c4a 100644
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@@ -24,9 +24,14 @@ limitations under the License.
 
 .mx_CreateEvent_image {
     float: left;
-    padding-right: 20px;
+    margin-right: 20px;
     width: 72px;
     height: 34px;
+
+    background-color: $primary-fg-color;
+    mask: url('$(res)/img/room-continuation.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
 }
 
 .mx_CreateEvent_header {
diff --git a/src/components/views/messages/RoomCreate.js b/src/components/views/messages/RoomCreate.js
index 978448ba4f..27395fce5c 100644
--- a/src/components/views/messages/RoomCreate.js
+++ b/src/components/views/messages/RoomCreate.js
@@ -53,7 +53,7 @@ module.exports = React.createClass({
         permalinkCreator.load();
         const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
         return <div className="mx_CreateEvent">
-            <img className="mx_CreateEvent_image" src={require("../../../../res/img/room-continuation.svg")} />
+            <img className="mx_CreateEvent_image" />
             <div className="mx_CreateEvent_header">
                 {_t("This room is a continuation of another conversation.")}
             </div>