Change avatar to use Compound implementation (#11448)

* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests

res/css/views/avatars/_BaseAvatar.pcss

@@ -14,57 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BaseAvatar {
-    position: relative;
-    /* In at least Firefox, the case of relative positioned inline elements */
-    /* (such as mx_BaseAvatar) with absolute positioned children (such as */
-    /* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
-    /* different results during full reflow of the page vs. incremental reflow */
-    /* of small portions. While that's surely a browser bug, we can avoid it by */
-    /* using `inline-block` instead of the default `inline`. */
-    /* https://github.com/vector-im/element-web/issues/5594 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
-    /* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
-    display: inline-block;
-    user-select: none;
-
-    &.mx_RoomAvatar_isSpaceRoom {
-        &.mx_BaseAvatar_image,
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-}
-
-.mx_BaseAvatar_initial {
-    position: absolute;
-    left: 0;
-    color: $avatar-initial-color;
-    text-align: center;
-    speak: none;
-    pointer-events: none;
-    font-weight: normal;
-}
-
-.mx_BaseAvatar_image {
-    object-fit: cover;
-    aspect-ratio: 1;
-    border-radius: 125px;
-    vertical-align: top;
-    background-color: $background;
-}
-
 /* Percy screenshot test specific CSS */
 @media only percy {
     /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
-    .mx_BaseAvatar_initial {
+    .mx_BaseAvatar {
         background-color: var(--percy-color-avatar) !important;
-        border-radius: 125px;
-    }
-    .mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial {
-        border-radius: 8px;
-    }
-    .mx_BaseAvatar_initial + .mx_BaseAvatar_image {
-        visibility: hidden;
     }
 }

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -18,6 +18,7 @@ limitations under the License.
 .mx_ExtraTile {
     position: relative;
     contain: content;
+    line-height: 1;
 
     &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
         mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
@@ -29,9 +30,9 @@ limitations under the License.
     .mx_DecoratedRoomAvatar_icon {
         position: absolute;
         /* the following percentage based sizings are to match the scalable svg mask for the cutout */
-        bottom: -6.25%;
-        right: -6.25%;
-        margin: 12.5%;
+        bottom: 0;
+        right: 0;
+        transform: translate(-25%, -70%);
         width: 25%;
         height: 25%;
         border-radius: 50%;