Implement filter-button-visible icon styling

kommunarr · Aug 30, 2023 · 1525582 · 1525582
1 parent 60b0594
commit 1525582
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
@@ -96,6 +96,11 @@
       box-shadow: 0 0 $effect-distance var(--text-with-main-color);
     }
   }
+
+  &.showFilters {
+    background-color: var(--primary-text-color);
+    color: var(--card-bg-color);
+  }
 }
 
 .side {

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
@@ -89,7 +89,7 @@
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"
-          :class="{ filterChanged: searchFilterValueChanged }"
+          :class="{ filterChanged: searchFilterValueChanged, showFilters: showFilters }"
           :aria-pressed="showFilters"
           :icon="['fas', 'filter']"
           :title="$t('Search Filters.Search Filters')"