From 33b98ca313edbf9bf3ada71c7f821e348b4c6a88 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 25 May 2024 17:11:28 +0200
Subject: [PATCH] chore: added text color for active filters info

---
 src/components/StationsView/StationFilterCard.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 2a6d822..00663cb 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -33,12 +33,13 @@
           <div class="card_title flex">{{ $t('filters.title') }}</div>
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
-          <div class="changed-filters" v-if="changedFilters.length > 0">
-            {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+          <div class="changed-filters" :data-active="changedFilters.length > 0">
+            <template v-if="changedFilters.length > 0">
+              {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+            </template>
+            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
           </div>
 
-          <div class="changed-filters" v-else>{{ $t('filters.no-changed-filters') }}</div>
-
           <section class="card_options">
             <div
               class="option-section"
@@ -371,6 +372,7 @@ export default defineComponent({
 @import '../../styles/responsive';
 @import '../../styles/card';
 @import '../../styles/animations';
+@import '../../styles/variables';
 
 h3.section-header {
   text-align: center;
@@ -390,6 +392,10 @@ h3.section-header {
 .changed-filters {
   background-color: #111;
   padding: 0.5em;
+
+  &[data-active='true'] {
+    color: lightgreen;
+  }
 }
 
 .card_controls {