Revert "Fix layout and visual regressions around default avatars (#10031)"

This reverts commit 0d1fce3.

Author: t3chguy

cypress/e2e/spaces/spaces.spec.ts

@@ -153,7 +153,10 @@ describe("Spaces", () => {
 
         openSpaceCreateMenu().within(() => {
             cy.get(".mx_SpaceCreateMenuType_private").click();
-            // We don't set an avatar here to get a Percy snapshot of the default avatar style for spaces
+            cy.get('.mx_SpaceBasicSettings_avatarContainer input[type="file"]').selectFile(
+                "cypress/fixtures/riot.png",
+                { force: true },
+            );
             cy.get('input[label="Address"]').should("not.exist");
             cy.get('textarea[label="Description"]').type("This is a personal space to mourn Riot.im...");
             cy.get('input[label="Name"]').type("This is my Riot{enter}");
@@ -166,7 +169,6 @@ describe("Spaces", () => {
 
         cy.contains(".mx_RoomList .mx_RoomTile", "Sample Room").should("exist");
         cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "Sample Room").should("exist");
-        cy.get(".mx_LeftPanel_outerWrapper").percySnapshotElement("Left panel with default avatar space");
     });
 
     it("should allow user to invite another to a space", () => {

res/css/structures/_SpacePanel.pcss

@@ -277,11 +277,14 @@ $activeBorderColor: $primary-content;
         .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
             color: $secondary-content;
             border-radius: 8px;
+            background-color: $panel-actions;
+            font-size: $font-15px !important; /* override inline style */
             font-weight: $font-semi-bold;
             line-height: $font-18px;
-            /* override inline styles which are part of the default avatar style as these uses a monochrome style */
-            background-color: $panel-actions !important;
-            font-size: $font-15px !important;
+
+            & + .mx_BaseAvatar_image {
+                visibility: hidden;
+            }
         }
 
         .mx_SpaceTreeLevel {

res/css/structures/_UserMenu.pcss

@@ -25,8 +25,6 @@ limitations under the License.
 
         .mx_UserMenu_userAvatar {
             position: relative;
-            /* without this a default avatar will cause this to be 4px oversized and out of alignment */
-            display: inherit;
 
             .mx_BaseAvatar {
                 pointer-events: none; /* makes the avatar non-draggable */

src/components/views/avatars/BaseAvatar.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { CSSProperties, useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import classNames from "classnames";
 import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
 import { ClientEvent } from "matrix-js-sdk/src/client";
@@ -51,7 +51,6 @@ interface IProps {
     inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
     className?: string;
     tabIndex?: number;
-    style?: CSSProperties;
 }
 
 const calculateUrls = (url: string | undefined, urls: string[] | undefined, lowBandwidth: boolean): string[] => {
@@ -133,17 +132,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         onClick,
         inputRef,
         className,
-        style: parentStyle,
         resizeMethod: _unused, // to keep it from being in `otherProps`
         ...otherProps
     } = props;
 
-    const style = {
-        ...parentStyle,
-        width: toPx(width),
-        height: toPx(height),
-    };
-
     const [imageUrl, onError] = useImageUrl({ url, urls });
 
     if (!imageUrl && defaultToInitialLetter && name) {
@@ -159,7 +151,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
                     className={classNames("mx_BaseAvatar", className)}
                     onClick={onClick}
                     inputRef={inputRef}
-                    style={style}
+                    style={{
+                        width: toPx(width),
+                        height: toPx(height),
+                    }}
                 >
                     {avatar}
                 </AccessibleButton>
@@ -170,7 +165,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
                     className={classNames("mx_BaseAvatar", className)}
                     ref={inputRef}
                     {...otherProps}
-                    style={style}
+                    style={{
+                        width: toPx(width),
+                        height: toPx(height),
+                    }}
                     role="presentation"
                 >
                     {avatar}
@@ -187,7 +185,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
                 src={imageUrl}
                 onClick={onClick}
                 onError={onError}
-                style={style}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
                 title={title}
                 alt={_t("Avatar")}
                 inputRef={inputRef}
@@ -201,7 +202,10 @@ const BaseAvatar: React.FC<IProps> = (props) => {
                 className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
                 src={imageUrl}
                 onError={onError}
-                style={style}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
                 title={title}
                 alt=""
                 ref={inputRef}

test/components/views/avatars/__snapshots__/MemberAvatar-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`MemberAvatar matches the snapshot 1`] = `
     class="mx_BaseAvatar mx_BaseAvatar_image"
     data-testid="avatar-img"
     src="http://this.is.a.url//placekitten.com/400/400"
-    style="color: pink; width: 35px; height: 35px;"
+    style="color: pink;"
     title="Hover title"
   />
 </div>