Fix avatar decorations in thread activity centre not being atop avatar (#31789)

* Fix avatar decorations in thread activity centre not being atop avatar

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

* Delint

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

* Update snapshots

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

---------

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

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type JSHandle, type Locator, type Page } from "@playwright/test";
 
-import type { MatrixEvent, IContent, Room } from "matrix-js-sdk/src/matrix";
+import type { MatrixEvent, IContent, Room, Preset } from "matrix-js-sdk/src/matrix";
 import { test as base, expect } from "../../../element-web-test";
 import { type Bot } from "../../../pages/bot";
 import { type Client } from "../../../pages/client";
@@ -37,7 +37,11 @@ export const test = base.extend<{
 
     room1Name: "Room 1",
     room1: async ({ room1Name: name, app, user, bot }, use) => {
-        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        const roomId = await app.client.createRoom({
+            name,
+            invite: [bot.credentials.userId],
+            preset: "public_chat" as Preset,
+        });
         await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -27,36 +27,42 @@ Please see LICENSE files in the repository root for full details.
         width: 25%; /* 8px for a 32x32 avatar */
         height: 25%;
         border-radius: 50%;
-    }
 
-    .mx_DecoratedRoomAvatar_icon::before {
+        &::before,
-        content: "";
+        svg {
-        width: 100%;
+            width: 100%;
-        height: 100%;
+            height: 100%;
-        right: 0;
+            right: 0;
-        position: absolute;
+            position: absolute;
-        border-radius: 8px;
+            border-radius: 8px;
+        }
     }
 
     .mx_DecoratedRoomAvatar_icon_globe svg {
-        width: inherit;
+        /* Oversize the icon to account for the dead space around the icon within the canvas */
-        height: inherit;
+        width: 120%;
+        height: 120%;
+        margin: -10%;
         color: $secondary-content;
     }
 
     .mx_DecoratedRoomAvatar_icon_offline::before {
+        content: "";
         background-color: $presence-offline;
     }
 
     .mx_DecoratedRoomAvatar_icon_online::before {
+        content: "";
         background-color: $accent;
     }
 
     .mx_DecoratedRoomAvatar_icon_away::before {
+        content: "";
         background-color: $presence-away;
     }
 
     .mx_DecoratedRoomAvatar_icon_busy::before {
+        content: "";
         background-color: $presence-busy;
     }
 

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -46,6 +46,7 @@ interface IProps {
     tooltipProps?: {
         tabIndex?: number;
     };
+    className?: string;
 }
 
 interface IState {
@@ -186,7 +187,8 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
 
     public render(): React.ReactNode {
         // Spread the remaining props to make it work with compound component
-        const { room, size, displayBadge, hideIfDot, oobData, viewAvatarOnClick, tooltipProps, ...props } = this.props;
+        const { room, size, displayBadge, hideIfDot, oobData, viewAvatarOnClick, tooltipProps, className, ...props } =
+            this.props;
 
         let badge: React.ReactNode;
         if (this.props.displayBadge && this.state.notificationState) {
@@ -211,9 +213,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
             );
         }
 
-        const classes = classNames("mx_DecoratedRoomAvatar", {
+        const classes = classNames(
-            mx_DecoratedRoomAvatar_cutout: icon,
+            "mx_DecoratedRoomAvatar",
-        });
+            {
+                mx_DecoratedRoomAvatar_cutout: icon,
+            },
+            className,
+        );
 
         return (
             <div className={classes} {...props}>

test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -193,7 +193,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -241,7 +241,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -289,7 +289,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_lqfwq_50"
+        class="mx_DecoratedRoomAvatar _icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"