profile-image-container class added

Author: JasminDreasond

info/dev/preparing-changelog.md

@@ -1,2 +1,3 @@
 - Sidebar hover option added.
 - Electron desktop crashing when you maximizes the window. (Fixed by the Electron version update)
+- profile-image-container class added.

src/app/molecules/image-pack/ImagePackProfile.jsx

@@ -58,7 +58,13 @@ function ImagePackProfile({
           onRequestRemove={() => onAvatarChange(undefined)}
         />
       ) : (
-        <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
+        <Avatar
+          bgColor="#555"
+          text={displayName}
+          imageSrc={avatarUrl}
+          className="profile-image-container"
+          size="normal"
+        />
       )}
       <div className="image-pack-profile__content noselect">
         {isEdit ? (

src/app/molecules/image-upload/ImageUpload.jsx

@@ -54,6 +54,7 @@ function ImageUpload({
         }}
       >
         <Avatar
+          className="profile-image-container"
           imageSrc={imageSrc || defaultImage}
           text={text}
           bgColor={bgColor}

src/app/molecules/message/Message.jsx

@@ -113,7 +113,7 @@ const MessageAvatar = React.memo(
       onClick={() => openProfileViewer(userId, roomId)}
     >
       <Avatar
-        imgClass=""
+        imgClass="profile-image-container"
         imageAnimSrc={avatarAnimSrc}
         imageSrc={avatarSrc}
         text={username}
@@ -1155,6 +1155,7 @@ const MessageThreadSummary = React.memo(({ thread }) => {
             {lastSender ? (
               <>
                 <Avatar
+                  className="profile-image-container"
                   imageSrc={lastSenderAvatarSrc}
                   text={lastSender?.name}
                   bgColor={backgroundColorMXID(lastSender?.userId)}

src/app/molecules/people-selector/PeopleSelector.jsx

@@ -94,6 +94,7 @@ function PeopleSelector({
       type="button"
     >
       <Avatar
+        className="profile-image-container"
         imageAnimSrc={imageAnimSrc}
         imageSrc={imageSrc}
         text={name}

src/app/molecules/people-selector/PeopleSelectorBanner.jsx

@@ -304,6 +304,7 @@ function PeopleSelectorBanner({ name, color, user = null, roomId }) {
 
         <div className="text-center profile-user-profile-avatar">
           <Avatar
+            className="profile-image-container"
             ref={profileAvatar}
             imageSrc={mx.mxcUrlToHttp(avatarUrl, 100, 100, 'crop')}
             imageAnimSrc={

src/app/molecules/room-intro/RoomIntro.jsx

@@ -19,6 +19,7 @@ function RoomIntro({
       <td colSpan="2">
         <div className="ps-5 pt-5 pb-3">
           <Avatar
+            className="profile-image-container"
             imageSrc={avatarSrc}
             imageAnimSrc={avatarAnimSrc}
             text={name}

src/app/molecules/room-profile/RoomProfile.jsx

@@ -346,6 +346,7 @@ function RoomProfile({ roomId, isSpace }) {
           {!canChangeAvatar && (
             <center>
               <Avatar
+                className="profile-image-container"
                 imageSrc={avatarSrc}
                 text={roomName}
                 bgColor={colorMXID(roomId)}

src/app/molecules/room-selector/RoomSelector.jsx

@@ -199,6 +199,7 @@ function RoomSelector({
             className={`float-start me-2 h-100 avatar avatar-type--${imgSrc || isDefault ? 'img' : 'icon'}`}
           >
             <Avatar
+              className="profile-image-container"
               text={roomName}
               bgColor={colorMXID(roomId)}
               imageSrc={imgSrc}

src/app/molecules/room-tile/RoomTile.jsx

@@ -22,6 +22,7 @@ function RoomTile({
     <div className="room-tile">
       <div className="room-tile__avatar">
         <Avatar
+          className="profile-image-container"
           imageAnimSrc={avatarAnimSrc}
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}