From d2a74ea1a2965eb38609bb8029a41b45beab89ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:49 +0200
Subject: add .input class to all inputs

---
 src/components/search/search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/search/search.vue')

diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 19b9c577..bab91f3f 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -9,7 +9,7 @@
       <input
         ref="searchInput"
         v-model="searchTerm"
-        class="search-input"
+        class="input search-input"
         :placeholder="$t('nav.search')"
         @keyup.enter="newQuery(searchTerm)"
       >
-- 
cgit v1.2.3-70-g09d2


From 73f6ecb21e9a705caac0d1ce6b38b3aa75e4345b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 18:07:15 +0200
Subject: clean up some variables, fixing search footer

---
 src/components/lists_card/lists_card.vue           | 16 +------------
 src/components/notifications/notifications.vue     |  2 +-
 src/components/search/search.vue                   | 26 +++++-----------------
 .../user_list_popover/user_list_popover.vue        |  2 --
 4 files changed, 8 insertions(+), 38 deletions(-)

(limited to 'src/components/search/search.vue')

diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
index 925da3a5..a5dc6371 100644
--- a/src/components/lists_card/lists_card.vue
+++ b/src/components/lists_card/lists_card.vue
@@ -21,8 +21,6 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .list-card {
   display: flex;
 }
@@ -35,18 +33,6 @@
 .button-list-edit {
   margin: 0;
   padding: 1em;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-  }
+  color: var(--link);
 }
 </style>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index eb128450..87e7b68d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -85,7 +85,7 @@
           </div>
           <button
             v-else-if="!loading"
-            class="button-unstyled -link -fullwidth"
+            class="button-unstyled -link text-center"
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index bab91f3f..643c2cad 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -67,7 +67,7 @@
         />
         <button
           v-if="!loading && loaded && lastStatusFetchCount > 0"
-          class="more-statuses-button button-unstyled -link -fullwidth"
+          class="more-statuses-button button-unstyled -link"
           @click.prevent="search(searchTerm, 'statuses')"
         >
           <div class="new-status-notification text-center">
@@ -148,11 +148,8 @@
 <script src="./search.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .search-result-heading {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
+  color: var(--faint);
   padding: 0.75rem;
   text-align: center;
 }
@@ -171,17 +168,7 @@
 .search-result {
   box-sizing: border-box;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.search-result-footer {
-  border-width: 1px 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  border-color: var(--border);
 }
 
 .search-input-container {
@@ -212,8 +199,7 @@
 
   .hashtag {
     flex: 1 1 auto;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -226,14 +212,14 @@
     line-height: 2.25rem;
     font-weight: 500;
     text-align: center;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
 .more-statuses-button {
   height: 3.5em;
   line-height: 3.5em;
+  width: 100%;
 }
 
 </style>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8307cc8a..cd134453 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -48,8 +48,6 @@
 <script src="./user_list_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-list-popover {
   padding: 0.5em;
 
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components/search/search.vue')

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 31061409..8af710ae 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 fc3d66a4..9ae2b7d7 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 b917c637..3bceff22 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 643c2cad..dc803835 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 {
-- 
cgit v1.2.3-70-g09d2


From 4852f5b8338eed2d3d621d0df6aa1aa2b498a5f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 16:29:24 +0200
Subject: unify tabs fixes for panels

---
 src/components/search/search.vue             |  5 -----
 src/components/user_profile/user_profile.vue |  5 -----
 src/panel.scss                               | 10 ++++++++++
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/components/search/search.vue')

diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index dc803835..bd384ad3 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -154,11 +154,6 @@
   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 {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b1e87d37..921c87ea 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -168,11 +168,6 @@
   // No sticky header on user profile
   --currentPanelStack: 1;
 
-  .tab-switcher .tabs {
-    background: var(--__panel-background);
-    backdrop-filter: var(--__panel-backdrop-filter);
-  }
-
   .user-birthday {
     margin: 0 0.75em 0.5em;
   }
diff --git a/src/panel.scss b/src/panel.scss
index cc208e62..a8cc4667 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -3,6 +3,11 @@
   --__panel-background: var(--background);
   --__panel-backdrop-filter: var(--backdrop-filter);
 
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -34,6 +39,11 @@
   background: var(--background);
   backdrop-filter: var(--__panel-backdrop-filter);
 
+  .tab-switcher .tabs {
+    background: none;
+    backdrop-filter: none;
+  }
+
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;
-- 
cgit v1.2.3-70-g09d2