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

 Conflicts:

	src/components/views/spaces/SpacePanel.tsx

res/css/_animations.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * React Transition Group animations are prefixed with 'mx_rtg--' so that we
+ * know they should not be used anywhere outside of React Transition Groups.
+*/
+
+.mx_rtg--fade-enter {
+    opacity: 0;
+}
+.mx_rtg--fade-enter-active {
+    opacity: 1;
+    transition: opacity 300ms ease;
+}
+.mx_rtg--fade-exit {
+    opacity: 1;
+}
+.mx_rtg--fade-exit-active {
+    opacity: 0;
+    transition: opacity 300ms ease;
+}
+
+
+@keyframes mx--anim-pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
+
+
+@media (prefers-reduced-motion) {
+    @keyframes mx--anim-pulse {
+        // Override all keyframes in reduced-motion
+    }
+    .mx_rtg--fade-enter-active {
+        transition: none;
+    }
+    .mx_rtg--fade-exit-active {
+        transition: none;
+    }
+}

res/css/_common.scss

@@ -18,6 +18,7 @@ limitations under the License.
 
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
+@import "./_animations.scss";
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 

res/css/structures/_GroupView.scss

@@ -400,7 +400,11 @@ limitations under the License.
         background-color: $secondary-fg-color;
     }
 
-    .mx_AccessibleButton {
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
+
+    .mx_GroupView_spaceUpgradePrompt_close {
         width: 16px;
         height: 16px;
         border-radius: 8px;

res/css/structures/_SpaceRoomDirectory.scss

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

res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss

@@ -59,6 +59,10 @@ limitations under the License.
         .mx_JoinRuleDropdown .mx_Dropdown_menu {
             width: auto !important; // override fixed width
         }
+
+        .mx_CreateSpaceFromCommunityDialog_nonPublicSpacer {
+            height: 63px; // balance the height of the missing room alias field to prevent modal bouncing
+        }
     }
 
     .mx_CreateSpaceFromCommunityDialog_footer {

res/css/views/messages/_MImageBody.scss

@@ -16,6 +16,12 @@ limitations under the License.
 
 $timelineImageBorderRadius: 4px;
 
+.mx_MImageBody_thumbnail--blurhash {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
 .mx_MImageBody_thumbnail {
     object-fit: contain;
     border-radius: $timelineImageBorderRadius;
@@ -23,8 +29,11 @@ $timelineImageBorderRadius: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
+    width: 100%;
 
-    > div > canvas {
+    .mx_Blurhash > canvas {
+        animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
         border-radius: $timelineImageBorderRadius;
     }
 }

res/css/views/rooms/_EventTile.scss

@@ -489,6 +489,10 @@ $hover-select-border: 4px;
         // https://github.com/vector-im/vector-web/issues/754
         overflow-x: overlay;
         overflow-y: visible;
+
+        &::-webkit-scrollbar-corner {
+            background: transparent;
+        }
     }
 }