Use a mask for the continuation icon

Fixes element-hq/element-web#7990
matrix-org · Mar 1, 2019 · 8a6ae6b · 8a6ae6b
1 parent 593bd8f
commit 8a6ae6b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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>