Fix missing background tonality without avatar

res/css/structures/_BackdropPanel.scss

@@ -29,7 +29,7 @@ limitations under the License.
         top: 0;
         height: 100vh;
         width: 100%;
-        background-color: rgba(255, 255, 255, 0.055);
+        background-color: var(--lp-background-overlay)
     }
 }
 

res/css/structures/_LeftPanel.scss

@@ -17,7 +17,15 @@ limitations under the License.
 $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 $roomListCollapsedWidth: 68px;
 
+.mx_MatrixChat--with-avatar {
+    .mx_LeftPanel,
+    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+        background-color: transparent;
+    }
+}
+
 .mx_LeftPanel {
+    background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
 
@@ -42,6 +50,7 @@ $roomListCollapsedWidth: 68px;
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
+        background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
         // Create another flexbox (this time a column) for the room list components

res/css/structures/_SpacePanel.scss

@@ -22,7 +22,14 @@ $activeBorderTransparentGap: 1px;
 $activeBackgroundColor: $roomtile-selected-bg-color;
 $activeBorderColor: $secondary-fg-color;
 
+.mx_MatrixChat--with-avatar {
+    .mx_SpacePanel {
+        background-color: transparent;
+    }
+}
+
 .mx_SpacePanel {
+    background-color: $groupFilterPanel-bg-color;
     flex: 0 0 auto;
     padding: 0;
     margin: 0;

res/themes/dark/css/_dark.scss

@@ -242,6 +242,7 @@ $appearance-tab-border-color: $room-highlight-color;
 :root {
     --llp-background-blur: 60px;
     --lp-background-blur: 30px;
+    --lp-background-overlay: rgba(255, 255, 255, 0.055);
 }
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);

res/themes/light/css/_light.scss

@@ -365,6 +365,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 :root {
     --llp-background-blur: 40px;
     --lp-background-blur: 20px;
+    --lp-background-overlay: rgba(0, 0, 0, 0.055);
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 

src/components/structures/LoggedInView.tsx

@@ -67,6 +67,7 @@ import UserView from "./UserView";
 import GroupView from "./GroupView";
 import BackdropPanel from "./BackdropPanel";
 import SpaceStore from "../../stores/SpaceStore";
+import classNames from 'classnames';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -614,10 +615,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
         }
 
-        let bodyClasses = 'mx_MatrixChat';
+        const bodyClasses = classNames({
-        if (this.state.useCompactLayout) {
+            'mx_MatrixChat': true,
-            bodyClasses += ' mx_MatrixChat_useCompactLayout';
+            'mx_MatrixChat_useCompactLayout': this.state.useCompactLayout,
-        }
+            'mx_MatrixChat--with-avatar': this.state.backgroundImage,
+        });
 
         const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
             return (