Poprawki w stylach

src/components/JournalView/JournalOptions.vue

@@ -2,9 +2,9 @@
   <div class="journal-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--open" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      FILTRY
+      {{ $t('options.filters') }}
     </button>
 
     <transition name="options-anim">
@@ -200,21 +200,6 @@ export default defineComponent({
   z-index: 100;
 }
 
-.btn--open {
-  display: flex;
-
-  padding: 0.4em 1em;
-  font-weight: bold;
-  font-size: 1em;
-
-  border-radius: 0.75em 0.75em 0 0;
-
-  img {
-    height: 1.3em;
-    margin-right: 0.5em;
-  }
-}
-
 h1 {
   position: relative;
   font-size: 1.1em;
@@ -303,7 +288,7 @@ h1 {
     max-width: 100%;
   }
 
-  .btn--open {
+  .btn--image {
     margin: 0 auto;
   }
 
@@ -316,27 +301,5 @@ h1 {
   .options_sorters {
     justify-content: center;
   }
-
-  // .options {
-  //   &_wrapper {
-  //     justify-content: center;
-  //     align-items: center;
-  //   }
-
-  //   &_content {
-  //     padding: 0 1em;
-
-  //     flex-direction: column;
-
-  //     .content_select {
-  //       margin: 0 auto;
-  //       padding: 0;
-  //     }
-
-  //     .content_search {
-  //       justify-content: center;
-  //     }
-  //   }
-  // }
 }
-</style>
+</style>

src/components/StationsView/StationFilterCard.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard">
     <div class="card_btn">
-      <button class="btn btn--option" @click="toggleCard">
+      <button class="btn--image" @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
+        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }}
       </button>
     </div>
@@ -91,7 +91,6 @@
 </template>
 
 <script lang="ts">
-
 import { defineComponent, inject } from 'vue';
 import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
@@ -107,7 +106,6 @@ export default defineComponent({
   mixins: [imageMixin],
 
   data: () => ({
-
     inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: 'options_saved',
@@ -263,6 +261,7 @@ export default defineComponent({
   }
 }
 
+
 .card {
   &_btn {
     button {
@@ -389,6 +388,7 @@ export default defineComponent({
     input {
       width: 100%;
       padding: 0.5em;
+      border: 1px solid white;
     }
   }
 
@@ -437,6 +437,7 @@ export default defineComponent({
 
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
+      appearance: none;
 
       height: 20px;
       width: 20px;

src/components/TrainsView/TrainOptions.vue

@@ -4,7 +4,7 @@
 
     <button class="btn--open" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      FILTRY
+      {{ $t('options.filters') }}
     </button>
 
     <transition name="options-anim">
@@ -18,7 +18,7 @@
               </button>
             </div>
           </div>
-          
+
           <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">

src/styles/global.scss

@@ -24,7 +24,6 @@
   &-track {
     border-radius: 0.5em;
     background-color: #333;
-
   }
 
   &-thumb {
@@ -217,8 +216,18 @@ button {
   }
 
   &--image {
-    color: white;
+    display: flex;
-    transition: color 0.3s;
+
+    padding: 0.4em 1em;
+    font-weight: bold;
+    font-size: 1em;
+
+    border-radius: 0.75em 0.75em 0 0;
+
+    img {
+      height: 1.3em;
+      margin-right: 0.5em;
+    }
   }
 
   &--option {