add blurred, blended avatar background to left panel

res/css/structures/_LeftPanel2.scss

@@ -48,6 +48,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel2_roomListContainer {
         width: calc(100% - $tagPanelWidth);
+        background-color: $roomlist2-bg-color;
 
         // Create another flexbox (this time a column) for the room list components
         display: flex;

res/css/views/rooms/_RoomSublist2.scss

@@ -55,7 +55,8 @@ limitations under the License.
             z-index: 2; // Prioritize headers in the visible list over sticky ones
 
             // Set the same background color as the room list for sticky headers
-            background-color: $roomlist2-bg-color;
+            // TODO: ask why we need this
+            // background-color: $roomlist2-bg-color;
 
             // Create a flexbox to make ordering easy
             display: flex;

res/themes/element/css/_blur.scss

@@ -0,0 +1,21 @@
+// if backdrop-filter is supported,
+// set the user avatar (if any) as a background so
+// it can be blurred by the tag panel and room list
+
+@supports (backdrop-filter: blur(100px)) {
+    .mx_LeftPanel2 {
+        background-image: var(--avatar-url);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .mx_TagPanel
+    {
+        backdrop-filter: blur(100px);
+    }
+
+    .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
+        backdrop-filter: blur(175px);
+    }
+}

res/themes/element/css/_element.scss

@@ -65,7 +65,7 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$tagpanel-bg-color: #27303a;
+$tagpanel-bg-color: #dee3ead1;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -178,7 +178,7 @@ $header-divider-color: #91A1C0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
-$roomlist2-bg-color: $header-panel-bg-color;
+$roomlist2-bg-color: #f3f8fde8;
 
 $roomsublist2-divider-color: $primary-fg-color;
 

res/themes/element/css/element.scss

@@ -2,4 +2,5 @@
 @import "_paths.scss";
 @import "_fonts.scss";
 @import "_element.scss";
+@import "_blur.scss";
 @import "../../../../res/css/_components.scss";

src/components/structures/UserMenu.tsx

@@ -283,6 +283,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     public render() {
         const avatarSize = 32; // should match border-radius of the avatar
+        const {body} = document;
+        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+        body.style.setProperty("--avatar-url", `url('${avatarUrl}')`);
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (