From ce5552ae3c53b563126aae2c3c9b77a321880eed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 20:35:03 +0200
Subject: [PATCH] fix more transparent panels

---
 src/components/chat/chat.scss                |  1 -
 src/components/chat/chat.style.js            |  7 ++++++-
 src/components/dialog_modal/dialog_modal.vue |  2 +-
 src/components/search/search.vue             | 11 ++++++++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 310614094b..8af710ae1f 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -37,7 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: var(--background);
     z-index: 1;
   }
 
diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
index fc3d66a438..9ae2b7d71f 100644
--- a/src/components/chat/chat.style.js
+++ b/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'
+      }
+    }
   ]
 }
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index b917c6371f..3bceff229b 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/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">
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 643c2cadab..dc80383555 100644
--- a/src/components/search/search.vue
+++ b/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 {