station filters active indicator

src/components/StationsView/StationFilterCard.vue

@@ -4,6 +4,7 @@
       <button class="btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }} [F]
+        <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
 
       <label for="scenery-search">
@@ -176,6 +177,10 @@ export default defineComponent({
         .filter((s) => s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase()))
         .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
     },
+
+    currentOptionsActive() {
+      return true;
+    },
   },
 
   watch: {
@@ -442,16 +447,9 @@ export default defineComponent({
 
   .section-inputs {
     display: grid;
-    // flex-wrap: wrap;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    // grid-template-rows: repeat(3, 1fr);
     gap: 0.5em;
     margin: 1em 0;
-
-    // @include smallScreen() {
-    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-    //   grid-template-rows: auto;
-    // }
   }
 }
 

src/styles/filters_options.scss

@@ -11,15 +11,6 @@
   gap: 0.5em;
 }
 
-.filter-button .active-indicator {
-  width: 7px;
-  height: 7px;
-  background-color: lightgreen;
-  border-radius: 50%;
-
-  margin-left: 10px;
-}
-
 h1.option-title {
   position: relative;
   font-size: 1.1em;

src/styles/global.scss

@@ -138,6 +138,15 @@ input {
   padding: 0.35em 0;
 }
 
+.active-indicator {
+  width: 7px;
+  height: 7px;
+  background-color: lightgreen;
+  border-radius: 50%;
+
+  margin-left: 10px;
+}
+
 a {
   display: inline-block;