From 92292003c8fcbe741fbe95e50bb54e5cee68fdb6 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 19 Nov 2019 12:51:02 +0100
Subject: [PATCH 1/4] make shield on verification request scale correctly

by not overriding `mask-size` using `mask` for `mask-image`
---
 res/css/views/messages/_MKeyVerificationRequest.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_MKeyVerificationRequest.scss b/res/css/views/messages/_MKeyVerificationRequest.scss
index b4cde4e7ef..87a75dee82 100644
--- a/res/css/views/messages/_MKeyVerificationRequest.scss
+++ b/res/css/views/messages/_MKeyVerificationRequest.scss
@@ -25,7 +25,7 @@ limitations under the License.
         width: 12px;
         height: 16px;
         content: "";
-        mask: url("$(res)/img/e2e/normal.svg");
+        mask-image: url("$(res)/img/e2e/normal.svg");
         mask-repeat: no-repeat;
         mask-size: 100%;
         margin-top: 4px;
@@ -33,7 +33,7 @@ limitations under the License.
     }
 
     &.mx_KeyVerification_icon_verified::after {
-        mask: url("$(res)/img/e2e/verified.svg");
+        mask-image: url("$(res)/img/e2e/verified.svg");
         background-color: $accent-color;
     }
 

From de15965c4a59495cc47e364833710410d0adfd19 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 19 Nov 2019 12:51:37 +0100
Subject: [PATCH 2/4] improve device list layout

---
 res/css/views/right_panel/_UserInfo.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index c68f3ffd37..df7d0a5f87 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -195,6 +195,8 @@ limitations under the License.
     .mx_UserInfo_devices {
         .mx_UserInfo_device {
             display: flex;
+            margin: 8px 0;
+
 
             &.mx_UserInfo_device_verified {
                 .mx_UserInfo_device_trusted {
@@ -210,6 +212,7 @@ limitations under the License.
             .mx_UserInfo_device_name {
                 flex: 1;
                 margin-right: 5px;
+                word-break: break-word;
             }
         }
 

From 39939de04ffbc29c66e68789f0d70372afcbc72e Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 19 Nov 2019 12:51:46 +0100
Subject: [PATCH 3/4] =?UTF-8?q?remove=20white=20background=20on=20!=20and?=
 =?UTF-8?q?=20=E2=9C=85=20so=20it=20looks=20better=20on=20dark=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 res/css/views/rooms/_E2EIcon.scss | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
index bc11ac6e1c..1ee5008888 100644
--- a/res/css/views/rooms/_E2EIcon.scss
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -22,21 +22,6 @@ limitations under the License.
     display: block;
 }
 
-.mx_E2EIcon_verified::before, .mx_E2EIcon_warning::before {
-    content: "";
-    display: block;
-    /* the symbols in the shield icons are cut out to make it themeable with css masking.
-    if they appear on a different background than white, the symbol wouldn't be white though, so we
-    add a rectangle here below the masked element to shine through the symbol cut-out.
-    hardcoding white and not using a theme variable as this would probably be white for any theme. */
-    background-color: white;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 .mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
     content: "";
     display: block;
@@ -49,23 +34,11 @@ limitations under the License.
     mask-size: contain;
 }
 
-.mx_E2EIcon_verified::before {
-    /* white rectangle below checkmark of shield */
-    margin: 25% 28% 38% 25%;
-}
-
-
 .mx_E2EIcon_verified::after {
     mask-image: url('$(res)/img/e2e/verified.svg');
     background-color: $accent-color;
 }
 
-
-.mx_E2EIcon_warning::before {
-    /* white rectangle below "!" of shield */
-    margin: 18% 40% 25% 40%;
-}
-
 .mx_E2EIcon_warning::after {
     mask-image: url('$(res)/img/e2e/warning.svg');
     background-color: $warning-color;

From 5f7b0fef334763df3a83aac563bf533574006101 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 19 Nov 2019 12:55:28 +0100
Subject: [PATCH 4/4] scale (new) icons to fit available size

fixes https://github.com/vector-im/riot-web/issues/11399
---
 res/css/views/rooms/_MemberDeviceInfo.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index 951d1945b1..e73e6c58f1 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -25,6 +25,7 @@ limitations under the License.
     width: 12px;
     height: 12px;
     mask-repeat: no-repeat;
+    mask-size: 100%;
 }
 .mx_MemberDeviceInfo_icon_blacklisted {
     mask-image: url('$(res)/img/e2e/blacklisted.svg');