Make cutout in the decorated room avatar transparent rather than fixed

res/css/_components.scss

@@ -184,7 +184,6 @@
 @import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomTileIcon.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SendMessageComposer.scss";

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -18,10 +18,52 @@ limitations under the License.
 .mx_DecoratedRoomAvatar, .mx_TemporaryTile {
     position: relative;
 
-    .mx_RoomTileIcon {
+    &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+        mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+    }
+
+    .mx_DecoratedRoomAvatar_icon {
         position: absolute;
-        bottom: 0;
-        right: 0;
+        bottom: -2px;
+        right: -2px;
+        margin: 4px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+
+    .mx_DecoratedRoomAvatar_icon::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        border-radius: 8px;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_globe {
+        background-color: #fff;
+    }
+    .mx_DecoratedRoomAvatar_icon_globe::before {
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        background: $secondary-fg-color;
+        mask-image: url('$(res)/img/globe.svg');
+    }
+
+    .mx_DecoratedRoomAvatar_icon_offline::before {
+        background-color: $presence-offline;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_online::before {
+        background-color: $presence-online;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_away::before {
+        background-color: $presence-away;
     }
 
     .mx_NotificationBadge, .mx_RoomTile_badgeContainer {

res/css/views/rooms/_RoomTileIcon.scss

@@ -1,69 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_RoomTileIcon {
-    width: 12px;
-    height: 12px;
-    border-radius: 12px;
-    background-color: $roomlist-bg-color; // to match the room list itself
-}
-
-.mx_RoomTileIcon_globe::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    mask-position: center;
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    background: $secondary-fg-color;
-    mask-image: url('$(res)/img/globe.svg');
-}
-
-.mx_RoomTileIcon_offline::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-offline;
-}
-
-.mx_RoomTileIcon_online::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-online;
-}
-
-.mx_RoomTileIcon_away::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    top: 2px;
-    left: 2px;
-    position: absolute;
-    border-radius: 8px;
-    background-color: $presence-away;
-}

res/img/element-icons/roomlist/decorated-avatar-mask.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.7161 22.2903C31.5425 20.3595 32 18.2332 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C18.2332 32 20.3595 31.5425 22.2903 30.7161C20.8956 29.6174 20 27.9133 20 26C20 22.6863 22.6863 20 26 20C27.9133 20 29.6174 20.8956 30.7161 22.2903Z" fill="black"/>
+</svg>