Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/18089

 Conflicts:

	res/css/structures/_SpaceHierarchy.scss

	src/components/structures/SpaceHierarchy.tsx

	src/i18n/strings/en_EN.json

res/css/structures/_GroupView.scss

@@ -368,6 +368,65 @@ limitations under the License.
     padding: 40px 20px;
 }
 
+.mx_GroupView_spaceUpgradePrompt {
+    padding: 16px 50px;
+    background-color: $header-panel-bg-color;
+    border-radius: 8px;
+    max-width: 632px;
+    font-size: $font-15px;
+    line-height: $font-24px;
+    margin-top: 24px;
+    position: relative;
+
+    > h2 {
+        font-size: inherit;
+        font-weight: $font-semi-bold;
+    }
+
+    > p, h2 {
+        margin: 0;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        height: $font-24px;
+        width: 20px;
+        left: 18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+        background-color: $secondary-fg-color;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
+
+    .mx_GroupView_spaceUpgradePrompt_close {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        background-color: $input-darker-bg-color;
+        position: absolute;
+        top: 16px;
+        right: 16px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 8px;
+            mask-image: url('$(res)/img/image-view/close.svg');
+            background-color: $secondary-fg-color;
+        }
+    }
+}
+
 .mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
     padding-left: 16px;
     padding-right: 16px;

res/css/structures/_SpaceHierarchy.scss

@@ -255,7 +255,7 @@ limitations under the License.
             }
         }
 
-        &:hover {
+        &:hover, &:focus-within {
             background-color: $groupFilterPanel-bg-color;
 
             .mx_AccessibleButton {
@@ -264,6 +264,10 @@ limitations under the License.
         }
     }
 
+    li.mx_SpaceRoomDirectory_roomTileWrapper {
+        list-style: none;
+    }
+
     .mx_SpaceHierarchy_roomTile,
     .mx_SpaceHierarchy_subspace_children {
         &::before {

res/css/structures/_SpacePanel.scss

@@ -297,7 +297,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
+            &:not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
@@ -368,6 +368,14 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpacePanel_iconExplore::before {
         mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
     }
+
+    .mx_SpacePanel_noIcon {
+        display: none;
+
+        & + .mx_IconizedContextMenu_label {
+            padding-left: 5px !important; // override default iconized label style to align with header
+        }
+    }
 }
 
 

res/css/structures/_SpaceRoomView.scss

@@ -180,6 +180,18 @@ $SpaceRoomViewInnerWidth: 428px;
             }
         }
 
+        .mx_SpaceRoomView_preview_migratedCommunity {
+            margin-bottom: 16px;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: 1px solid $input-border-color;
+            width: max-content;
+
+            .mx_BaseAvatar {
+                margin-right: 4px;
+            }
+        }
+
         .mx_SpaceRoomView_preview_inviter {
             display: flex;
             align-items: center;
@@ -342,7 +354,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
         .mx_SpaceFeedbackPrompt {
             padding: 7px; // 8px - 1px border
-            border: 1px solid $menu-border-color;
+            border: 1px solid rgba($primary-fg-color, .1);
             border-radius: 8px;
             width: max-content;
             margin: 0 0 -40px auto; // collapse its own height to not push other components down

res/css/structures/_ToastContainer.scss

@@ -28,7 +28,7 @@ limitations under the License.
         margin: 0 4px;
         grid-row: 2 / 4;
         grid-column: 1;
-        background-color: $dark-panel-bg-color;
+        background-color: $toast-bg-color;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
@@ -37,7 +37,7 @@ limitations under the License.
         grid-row: 1 / 3;
         grid-column: 1;
         color: $primary-fg-color;
-        background-color: $dark-panel-bg-color;
+        background-color: $toast-bg-color;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;