From c541bc0705877fe00a6681afee1652dc90b690eb Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 9 Mar 2020 17:33:39 +0000
Subject: [PATCH] Fix mark as read button for dark theme

This changes the mark as read button to a mask image so that it can be themed
like other images.

Fixes https://github.com/vector-im/riot-web/issues/12640
---
 .../views/rooms/_TopUnreadMessagesBar.scss    | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 5f6f869877..28eddf1fa2 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -51,7 +51,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
+    mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;
@@ -61,12 +61,20 @@ limitations under the License.
     display: block;
     width: 18px;
     height: 18px;
-    background-image: url('$(res)/img/cancel.svg');
-    background-position: center;
-    background-size: 10px;
-    background-repeat: no-repeat;
-    background-color: $primary-bg-color;
+    background: $primary-bg-color;
     border: 1.3px solid $roomtile-name-color;
-    border-radius: 99px;
+    border-radius: 10px;
     margin: 5px auto;
 }
+
+.mx_TopUnreadMessagesBar_markAsRead::before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    mask-image: url('$(res)/img/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-size: 10px;
+    mask-position: 4px 4px;
+    background: $roomtile-name-color;
+}