fix more transparent panels

src/components/chat/chat.scss

@@ -37,7 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: var(--background);
     z-index: 1;
   }
 

src/components/chat/chat.style.js

@@ -1,7 +1,6 @@
 export default {
   name: 'Chat',
   selector: '.chat-message-list',
-  lazy: true,
   validInnerComponents: [
     'Text',
     'Link',
@@ -10,5 +9,11 @@ export default {
     'ChatMessage'
   ],
   defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '5px'
+      }
+    }
   ]
 }

src/components/dialog_modal/dialog_modal.vue

@@ -12,7 +12,7 @@
           <slot name="header" />
         </div>
       </div>
-      <div class="dialog-modal-content">
+      <div class="panel-body dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">

src/components/search/search.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="panel panel-default">
+  <div class="Search panel panel-default">
     <div class="panel-heading">
       <div class="title">
         {{ $t('nav.search') }}
       </div>
     </div>
-    <div class="search-input-container">
+    <div class="panel-body search-input-container">
       <input
         ref="searchInput"
         v-model="searchTerm"
@@ -23,7 +23,7 @@
     </div>
     <div
       v-if="loading && statusesOffset == 0"
-      class="text-center loading-icon"
+      class="panel-body text-center loading-icon"
     >
       <FAIcon
         icon="circle-notch"
@@ -154,6 +154,11 @@
   text-align: center;
 }
 
+.Search .tab-switcher .tabs {
+  background: var(--__panel-background);
+  backdrop-filter: var(--__panel-backdrop-filter);
+}
+
 @media all and (max-width: 800px) {
   .search-nav-heading {
     .tab-switcher .tabs .tab-wrapper {