make backdrop closer to what is happening in production

res/css/structures/_GroupFilterPanel.scss

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_GroupFilterPanel {
     flex: 1;
-    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
+    position: relative;
 
     display: flex;
     flex-direction: column;

res/css/structures/_MatrixChat.scss

@@ -42,7 +42,7 @@ limitations under the License.
     width: 100%;
     min-height: 100%;
     z-index: 0;
-    opacity: .15;
+    pointer-events: none;
 }
 
 .mx_MatrixToolbar {

src/components/structures/BackdropPanel.tsx

@@ -22,6 +22,7 @@ interface IProps {
     height?: number;
     backgroundImage?: CanvasImageSource;
     blur?: string;
+    opacity?: number;
 }
 
 
@@ -31,6 +32,7 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
 
     static defaultProps = {
         blur: "60px",
+        opacity: .15,
     }
 
     public componentDidMount() {
@@ -82,6 +84,9 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         return <canvas
             ref={this.canvasRef}
             className="mx_BackdropPanel"
+            style={{
+                opacity: this.props.opacity,
+            }}
         />;
     }
 }

src/components/structures/GroupFilterPanel.js

@@ -29,7 +29,9 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import BackdropPanel from "./BackdropPanel";
+import UIStore from "../../stores/UIStore";
 
 @replaceableComponent("structures.GroupFilterPanel")
 class GroupFilterPanel extends React.Component {
@@ -40,6 +42,8 @@ class GroupFilterPanel extends React.Component {
         selectedTags: [],
     };
 
+    ref = React.createRef()
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
@@ -56,6 +60,7 @@ class GroupFilterPanel extends React.Component {
         });
         // This could be done by anything with a matrix client
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
+        UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
     componentWillUnmount() {
@@ -65,6 +70,7 @@ class GroupFilterPanel extends React.Component {
         if (this._groupFilterOrderStoreToken) {
             this._groupFilterOrderStoreToken.remove();
         }
+        UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
     _onGroupMyMembership = () => {
@@ -147,7 +153,14 @@ class GroupFilterPanel extends React.Component {
             );
         }
 
-        return <div className={classes} onClick={this.onClearFilterClick}>
+        const panelDimensions = UIStore.instance.getElementDimensions("GroupPanel");
+
+        return <div className={classes} onClick={this.onClearFilterClick} ref={this.ref}>
+            <BackdropPanel
+                backgroundImage={this.props.backgroundImage}
+                width={panelDimensions?.width}
+                height={panelDimensions?.height}
+            />
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
                 onClick={this.onClick}

src/components/structures/LeftPanel.tsx

@@ -405,7 +405,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
-                    <GroupFilterPanel />
+                    <GroupFilterPanel backgroundImage={this.props.backgroundImage} />
                     {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
                 </div>
             );

src/components/views/spaces/SpacePanel.tsx

@@ -292,6 +292,7 @@ const SpacePanel = (props: IProps) => {
                             backgroundImage={props.backgroundImage}
                             width={panelDimensions?.width}
                             height={panelDimensions?.height}
+                            opacity={.3}
                         />
                         <Droppable droppableId="top-level-spaces">
                             {(provided, snapshot) => (