Decorate room avatars with publicity in add existing to space flow

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -54,7 +54,8 @@ limitations under the License.
             display: flex;
             margin-top: 12px;
 
-            .mx_BaseAvatar {
+            // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+            .mx_DecoratedRoomAvatar {
                 margin-right: 12px;
             }
 
@@ -75,6 +76,10 @@ limitations under the License.
     }
 
     .mx_AddExistingToSpace_section_spaces {
+        .mx_BaseAvatar {
+            margin-right: 12px;
+        }
+
         .mx_BaseAvatar_image {
             border-radius: 8px;
         }

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -37,6 +37,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {sortRooms} from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import ProgressBar from "../elements/ProgressBar";
 import {SpaceFeedbackPrompt} from "../../structures/SpaceRoomView";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;
@@ -46,7 +47,10 @@ interface IProps extends IDialogProps {
 
 const Entry = ({ room, checked, onChange }) => {
     return <label className="mx_AddExistingToSpace_entry">
-        <RoomAvatar room={room} height={32} width={32} />
+        { room?.isSpaceRoom()
+            ? <RoomAvatar room={room} height={32} width={32} />
+            : <DecoratedRoomAvatar room={room} avatarSize={32} />
+        }
         <span className="mx_AddExistingToSpace_entry_name">{ room.name }</span>
         <StyledCheckbox
             onChange={onChange ? (e) => onChange(e.target.checked) : null}