Render space pills with square corners to match new avatar (#11632)

Author: Germain

res/css/views/elements/_Pill.pcss

@@ -89,4 +89,10 @@ limitations under the License.
  height: 16px;
  width: 16px;
  }
+
+ &.mx_SpacePill {
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ padding-left: 4px;
+ }
 }

src/components/views/elements/Pill.tsx

@@ -103,7 +103,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
  const classes = classNames("mx_Pill", {
  mx_AtRoomPill: type === PillType.AtRoomMention,
  mx_RoomPill: type === PillType.RoomMention,
- mx_SpacePill: type === "space",
+ mx_SpacePill: type === "space" || targetRoom?.isSpaceRoom(),
  mx_UserPill: type === PillType.UserMention,
  mx_UserPill_me: resourceId === MatrixClientPeg.safeGet().getUserId(),
  mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom,