From f4988392f9cdec443ddd01c09bfb931f1beead7f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Nov 2019 16:25:38 +0100
Subject: [PATCH] restyle e2e icons

---
 res/css/views/rooms/_E2EIcon.scss     | 53 +++++++++++++++++++++++----
 res/img/e2e/verified.svg              | 13 ++++++-
 res/img/e2e/warning.svg               | 16 +++++---
 src/components/views/rooms/E2EIcon.js |  8 +++-
 4 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
index 84a16611de..c609d70f4c 100644
--- a/res/css/views/rooms/_E2EIcon.scss
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -17,17 +17,56 @@ limitations under the License.
 .mx_E2EIcon {
     width: 25px;
     height: 25px;
-    mask-repeat: no-repeat;
-    mask-position: center 0;
     margin: 0 9px;
+    position: relative;
+    display: block;
 }
 
-.mx_E2EIcon_verified {
-    mask-image: url('$(res)/img/e2e/lock-verified.svg');
-    background-color: $accent-color;
+.mx_E2EIcon_verified::before, .mx_E2EIcon_warning::before {
+    content: "";
+    display: block;
+    /* the symbols in the shield icons are cut out the make the 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 cutout.
+    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_warning {
-    mask-image: url('$(res)/img/e2e/lock-warning.svg');
+.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    mask-repeat: no-repeat;
+    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: $warning-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;
 }
diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg
index 459a552a40..af6bb92297 100644
--- a/res/img/e2e/verified.svg
+++ b/res/img/e2e/verified.svg
@@ -1,3 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
-    <path fill="#7AC9A1" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5.5 11S10 9 10 6V2.5L5.5 1 1 2.5V6c0 3 4.5 5 4.5 5z"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none">
+  <path
+     style="stroke:none;fill:#03b381;fill-opacity:1"
+     d="M 12 2 L 3 4.8496094 L 3 11.5 C 3 17.2 12 21 12 21 C 12 21 21 17.2 21 11.5 L 21 4.8496094 L 12 2 z M 16.541016 7.5332031 C 16.789066 7.5332031 17.037312 7.6240256 17.226562 7.8066406 C 17.605062 8.1718706 17.605063 8.7636762 17.226562 9.1289062 L 11.400391 14.75 C 11.021891 15.1152 10.40975 15.1152 10.03125 14.75 L 10.013672 14.734375 C 10.007572 14.728775 10.002044 14.722597 9.9960938 14.716797 L 7.3242188 12.138672 C 6.9267788 11.755172 6.9267788 11.1335 7.3242188 10.75 C 7.7216487 10.3665 8.3662319 10.3665 8.7636719 10.75 L 10.783203 12.699219 L 15.855469 7.8066406 C 16.044719 7.6240256 16.292966 7.5332031 16.541016 7.5332031 z "
+     id="path2" />
 </svg>
diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg
index 3d5fba550c..2501da6ab3 100644
--- a/res/img/e2e/warning.svg
+++ b/res/img/e2e/warning.svg
@@ -1,6 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
-    <defs>
-        <path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM5 .5A1.5 1.5 0 0 1 6.5 2v3a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 5 .5zm0 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
-    </defs>
-    <use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(1 1)" xlink:href="#a"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="24"
+   height="24"
+   fill="none"
+   viewBox="0 0 24 24">
+  <path
+     style="fill-opacity:1;fill:#ff4b55;stroke:none"
+     d="M 12 2 L 3 4.8496094 L 3 11.5 C 3 17.2 12 21 12 21 C 12 21 21 17.2 21 11.5 L 21 4.8496094 L 12 2 z M 12.050781 5.5 C 12.743281 5.5 13.300781 6.0575 13.300781 6.75 L 13.300781 12.25 C 13.300781 12.9425 12.743281 13.5 12.050781 13.5 C 11.358281 13.5 10.800781 12.9425 10.800781 12.25 L 10.800781 6.75 C 10.800781 6.0575 11.358281 5.5 12.050781 5.5 z M 12.050781 15 C 12.743281 15 13.300781 15.5575 13.300781 16.25 C 13.300781 16.9425 12.743281 17.5 12.050781 17.5 C 11.358281 17.5 10.800781 16.9425 10.800781 16.25 C 10.800781 15.5575 11.358281 15 12.050781 15 z "
+     id="path2" />
 </svg>
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index 54260e4ee2..d6baa30c8e 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -36,7 +36,13 @@ export default function(props) {
             _t("All devices for this user are trusted") :
             _t("All devices in this encrypted room are trusted");
     }
-    const icon = (<div className={e2eIconClasses} title={e2eTitle} />);
+
+    let style = null;
+    if (props.size) {
+        style = {width: `${props.size}px`, height: `${props.size}px`};
+    }
+
+    const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />);
     if (props.onClick) {
         return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
     } else {