Switch to svg masks for the e2eicon and border it for the EntityTile avatars

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/_ToastContainer.scss

@@ -48,13 +48,14 @@ limitations under the License.
         padding: 8px;
 
         &.mx_Toast_hasIcon {
-            &::after {
+            &::before, &::after {
                 content: "";
                 width: 22px;
                 height: 22px;
                 grid-column: 1;
                 grid-row: 1;
                 mask-size: 100%;
+                mask-position: center;
                 mask-repeat: no-repeat;
                 background-size: 100%;
                 background-repeat: no-repeat;
@@ -65,8 +66,18 @@ limitations under the License.
                 background-color: $primary-fg-color;
             }
 
-            &.mx_Toast_icon_verification_warning::after {
+            &.mx_Toast_icon_verification_warning {
-                background-image: url("$(res)/img/e2e/warning.svg");
+                // white infill for the hollow svg mask
+                &::before {
+                    background-color: #ffffff;
+                    mask-image: url('$(res)/img/e2e/normal.svg');
+                    mask-size: 90%;
+                }
+
+                &::after {
+                    mask-image: url("$(res)/img/e2e/warning.svg");
+                    background-color: $notice-primary-color;
+                }
             }
 
             &.mx_Toast_icon_element_logo::after {

res/css/views/rooms/_E2EIcon.scss

@@ -22,28 +22,58 @@ limitations under the License.
     display: block;
 }
 
-.mx_E2EIcon_warning::after,
+.mx_E2EIcon_warning,
-.mx_E2EIcon_normal::after,
+.mx_E2EIcon_normal,
-.mx_E2EIcon_verified::after {
+.mx_E2EIcon_verified {
-    content: "";
+    &::before, &::after {
-    display: block;
+        content: "";
-    position: absolute;
+        display: block;
-    top: 0;
+        position: absolute;
-    bottom: 0;
+        top: 0;
-    left: 0;
+        bottom: 0;
-    right: 0;
+        left: 0;
-    background-repeat: no-repeat;
+        right: 0;
-    background-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+}
+
+// white infill for the transparency
+.mx_E2EIcon::before {
+    background-color: #ffffff;
+    mask: url('$(res)/img/e2e/normal.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 90%;
+}
+
+// transparent-looking border surrounding the shield for when overlain over avatars
+.mx_E2EIcon_bordered {
+    mask-image: url('$(res)/img/e2e/normal.svg');
+    background-color: $header-panel-bg-color;
+
+    // shrink the actual badge
+    &::after {
+        mask-size: 75%;
+    }
+    // shrink the infill of the badge
+    &::before {
+        mask-size: 65%;
+    }
 }
 
 .mx_E2EIcon_warning::after {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    mask-image: url('$(res)/img/e2e/warning.svg');
+    background-color: $notice-primary-color;
 }
 
 .mx_E2EIcon_normal::after {
-    background-image: url('$(res)/img/e2e/normal.svg');
+    mask-image: url('$(res)/img/e2e/normal.svg');
+    background-color: #020202; // TODO theme this
 }
 
 .mx_E2EIcon_verified::after {
-    background-image: url('$(res)/img/e2e/verified.svg');
+    mask-image: url('$(res)/img/e2e/verified.svg');
+    background-color: $accent-color;
 }

res/css/views/rooms/_EntityTile.scss

@@ -26,8 +26,6 @@ limitations under the License.
         position: absolute;
         bottom: 2px;
         right: 7px;
-        height: 15px;
-        width: 15px;
     }
 }
 

res/css/views/rooms/_EventTile.scss

@@ -341,23 +341,58 @@ $left-gutter: 64px;
     background-size: contain;
 }
 
+.mx_EventTile_e2eIcon {
+    &::before, &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &::before {
+        background-color: #ffffff;
+        mask: url('$(res)/img/e2e/normal.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 90%;
+    }
+}
+
 .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
     opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unknown {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
     opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unencrypted {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
     opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unauthenticated {
-    background-image: url('$(res)/img/e2e/normal.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        background-color: #020202; // TODO theme this
+    }
     opacity: 1;
 }
 

src/components/views/rooms/E2EIcon.js

@@ -42,11 +42,12 @@ const crossSigningRoomTitles = {
     [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
 };
 
-const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
+const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordered}) => {
     const [hover, setHover] = useState(false);
 
     const classes = classNames({
         mx_E2EIcon: true,
+        mx_E2EIcon_bordered: bordered,
         mx_E2EIcon_warning: status === E2E_STATE.WARNING,
         mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
         mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,

src/components/views/rooms/EntityTile.js

@@ -170,7 +170,7 @@ const EntityTile = createReactClass({
         let e2eIcon;
         const { e2eStatus } = this.props;
         if (e2eStatus) {
-            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');