Poprawki stylistyczne

src/components/Global/ActionButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="action-btn">
+  <button class="action-btn btn--filled">
     <div class="button_content">
       <slot></slot>
     </div>
@@ -16,47 +16,6 @@ export default defineComponent({});
 @import "../../styles/variables";
 @import "../../styles/responsive";
 
-.action-btn {
-  background: #333;
-  border: none;
-
-  color: #bdbdbd;
-
-  font-size: 1em;
-  font-weight: 500;
-
-  padding: 0.35em 0.65em;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  &.outlined {
-    border: 1px solid white;
-  }
-
-  img {
-    width: 1.25em;
-    vertical-align: middle;
-    margin-right: 0.35em;
-  }
-
-  p {
-    font-size: 1em;
-    overflow: hidden;
-  }
-
-  &.open {
-    color: $accentCol;
-    border: none;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    background: #5c5c5c;
-  }
-}
-
 .button_content {
   display: flex;
   justify-content: center;

src/components/Global/SelectBox.vue

@@ -2,7 +2,6 @@
   <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{ prefix }}</span>
         <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
       </button>
 
@@ -158,7 +157,10 @@ button.selected {
   font-weight: bold;
 
   padding: 0.1em 0.5em;
-  margin-right: 1.4em;
+  margin-right: 2em;
+
+  display: flex;
+
 
   width: 100%;
   cursor: pointer;

src/components/JournalView/DispatcherStats.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="stats_container" v-click-outside="() => (cardVisible = false)">
-    <button class="stats_button btn btn--option" @click="toggleCard">
+    <button class="stats_button" @click="toggleCard">
       Statystyki dyżurnego {{ store.dispatcherStatsName }}
     </button>
 

src/components/JournalView/JournalOptions.vue

@@ -2,7 +2,7 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--image" @click="showOptions = !showOptions" ref="button">
+    <button class="btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
     </button>
@@ -43,20 +43,23 @@
             </div>
 
             <div class="search_actions">
-              <action-button class="search-button" @click="onResetButtonClick">
+              <button class="btn--action" @click="onResetButtonClick">
                 {{ $t('options.reset-button') }}
-              </action-button>
+              </button>
-
+              <button class="btn--action" @click="onSearchButtonConfirm">
-              <action-button class="search-button" @click="onSearchButtonConfirm">
                 {{ $t('options.search-button') }}
-              </action-button>
+              </button>
             </div>
           </div>
 
           <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
-              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
                 {{ opt.value.toUpperCase() }}
               </button>
             </div>

src/components/SceneryView/SceneryTimetable.vue

@@ -13,15 +13,18 @@
       </h3>
 
       <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
-        <button
+        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
-          v-for="cp in station.generalInfo.checkpoints"
+          <span v-if="i > 0">&bull;</span>
-          :key="cp.checkpointName"
+
-          class="checkpoint_item btn btn--text"
+          <button
-          :class="{ current: selectedCheckpoint === cp.checkpointName }"
+            :key="cp.checkpointName"
-          @click="selectCheckpoint(cp)"
+            class="checkpoint_item btn--text"
-        >
+            :class="{ current: selectedCheckpoint === cp.checkpointName }"
-          {{ cp.checkpointName }}
+            @click="selectCheckpoint(cp)"
-        </button>
+          >
+            {{ cp.checkpointName }}
+          </button>
+        </span>
       </div>
     </div>
 
@@ -36,7 +39,7 @@
         {{ $t('scenery.offline') }}
       </span>
 
-       <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
+      <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
         {{ $t('scenery.no-timetables') }}
       </span>
 
@@ -186,7 +189,6 @@ export default defineComponent({
 
   data: () => ({
     listOpen: false,
-
   }),
 
   setup(props) {
@@ -351,17 +353,14 @@ export default defineComponent({
   flex-wrap: wrap;
   font-size: 1.1em;
   padding: 0.75em 0;
-  .checkpoint_item {
-    &.current {
-      font-weight: bold;
-      color: $accentCol;
-    }
 
-    &:not(:last-child)::after {
+  .checkpoint_item {
-      margin: 0 0.5em;
+    color: #aaa;
-      content: '•';
+  }
-      color: white;
+
-    }
+  .checkpoint_item.current {
+    font-weight: bold;
+    color: $accentCol;
   }
 }
 

src/components/StationsView/StationFilterCard.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
     <div class="card_controls">
-      <button class="btn--image" @click="toggleCard">
+      <button class="btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }} [F]
       </button>
@@ -82,23 +82,20 @@
           </section>
 
           <section class="card_actions">
-            <div>
+            <filter-option
-              <filter-option
+              @optionChange="saveFilters"
-                @optionChange="saveFilters"
+              :option="{
-                :option="{
+                id: 'save',
-                  id: 'save',
+                name: 'save',
-                  name: 'save',
+                section: 'mode',
-                  section: 'mode',
+                value: saveOptions,
-                  value: saveOptions,
+                defaultValue: true,
-                  defaultValue: true,
+              }"
-                }"
+            />
-              />
+
-            </div>
+            <div class="action-buttons">
-            <div>
+              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
-              <action-button class="outlined" @click="resetFilters">
+              <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
-                {{ $t('filters.reset') }}
-              </action-button>
-              <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
             </div>
           </section>
         </div>
@@ -309,10 +306,13 @@ export default defineComponent({
   }
 
   &_content {
-    display: grid;
+    display: flex;
-    grid-template-rows: 70px 1fr 100px 50px auto;
+    flex-direction: column;
-    min-height: 0;
+    gap: 1em;
-    max-height: 100vh;
+
+    max-height: 90vh;
+
+    padding: 1em;
   }
 
   &_title {
@@ -320,8 +320,6 @@ export default defineComponent({
     font-weight: 700;
     color: $accentCol;
 
-    margin: 0.5em 0;
-
     text-align: center;
   }
 
@@ -421,18 +419,23 @@ export default defineComponent({
   }
 
   &_actions {
-    margin-top: 1em;
+    .filter-option {
-
+      max-width: 50%;
-    display: flex;
+      margin: 0 auto;
-    flex-direction: column;
-    align-items: center;
-
-    button {
-      margin: 1em 0.25em;
     }
 
-    .option {
+    .action-buttons {
-      font-size: 1.1em;
+      display: flex;
+      gap: 0.5em;
+      width: 100%;
+
+      margin-top: 0.5em;
+
+      button {
+        width: 50%;
+        margin: 0 auto;
+        padding: 0.5em;
+      }
     }
   }
 }

src/components/TrainsView/TrainOptions.vue

@@ -2,7 +2,7 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--image" @click="toggleShowOptions" ref="button">
+    <button class="btn--filled btn--image" @click="toggleShowOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
     </button>
@@ -43,7 +43,11 @@
           <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
-              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
                 {{ opt.value.toUpperCase() }}
               </button>
             </div>
@@ -56,14 +60,10 @@
                 {{ $t(`options.filter-${filter.id}`) }}
               </button>
             </div>
-          </div>
 
-          <div class="options_filters">
+            <div class="filter-actions">
-            <div class="filter-option">
+              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
-              <button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+              <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
-            </div>
-            <div class="filter-option">
-              <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
             </div>
           </div>
         </div>
@@ -182,4 +182,16 @@ export default defineComponent({
     }
   }
 }
+
+.filter-actions {
+  display: flex;
+  gap: 0.5em;
+  width: 100%;
+
+  margin-top: 1em;
+
+  button {
+    width: 100%;
+  }
+}
 </style>

src/styles/card.scss

@@ -28,8 +28,6 @@
 
   width: 600px;
 
-  padding: 0.5em 1em;
-
   @include smallScreen {
     width: 100%;
     height: 80vh;

src/styles/filters_options.scss

@@ -106,12 +106,12 @@ h1.option-title {
 
   .search_actions {
     display: flex;
-    margin: 1em 0 0.5em 0;
+    gap: 0.5em;
+    margin: 1em 0;
+    width: 100%;
 
     button {
-      margin: 0.25em 0.5em;
+      width: 100%;
-      background-color: #424242;
-      color: white;
     }
   }
 
@@ -126,9 +126,6 @@ h1.option-title {
 }
 
 @include smallScreen() {
-  .filters-options {
-  }
-  
   h1 {
     text-align: center;
 

src/styles/global.scss

@@ -197,78 +197,119 @@ ul {
 
 button {
   cursor: pointer;
-
   color: white;
-  background-color: #333;
+  background: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  border-radius: 0.25em;
   padding: 0.25em 0.5em;
 
   transition: all 100ms ease;
+}
+
+button.btn--filled {
+  background-color: #333;
+  border-radius: 0.25em;
 
   &:hover {
     background-color: #2a2a2a;
   }
 }
 
-.btn {
+button.btn--action {
-  background: none;
+  background-color: #424242;
-  cursor: pointer;
+  border-radius: 0.25em;
-  font-size: 1em;
 
-  &--text {
+  &:hover {
-    color: white;
+    background-color: #555;
-    transition: color 0.3s;
-
-    &:hover:not(:disabled),
-    &:focus:not(:disabled) {
-      color: $accentCol;
-    }
-
-    &.checked {
-      color: var(--clr-primary);
-      font-weight: bold;
-    }
-  }
-
-  &--image {
-    display: flex;
-
-    padding: 0.4em 1em;
-    font-weight: bold;
-    font-size: 1em;
-
-    border-radius: 0.75em 0.75em 0 0;
-    background-color: #1b1b1b;
-
-    img {
-      height: 1.3em;
-      margin-right: 0.5rem;
-    }
-  }
-
-  &--option {
-    cursor: pointer;
-
-    color: white;
-    background-color: #333;
-
-    border-radius: 0.25em;
-    padding: 0.25em 0.5em;
-
-    &.checked {
-      color: var(--clr-primary);
-      font-weight: bold;
-
-      background-color: #3c3c3c;
-    }
-  }
-
-  &:disabled {
-    opacity: 0.65;
   }
 }
 
+button.btn--option {
+  color: white;
+  background-color: #333;
+
+  &.checked {
+    color: var(--clr-primary);
+    font-weight: bold;
+
+    background-color: #3c3c3c;
+  }
+}
+
+button.btn--image {
+  font-weight: bold;
+  padding: 0.35em 0.75em;
+
+  img {
+    width: 1.5em;
+    margin-right: 0.5em;
+    vertical-align: middle;
+  }
+}
+
+// .btn {
+//   background: none;
+//   cursor: pointer;
+//   font-size: 1em;
+
+//   &--text {
+//     background: none;
+//     color: white;
+
+//     transition: color 0.3s;
+
+//     &:hover:not(:disabled),
+//     &:focus:not(:disabled) {
+//       color: $accentCol;
+//     }
+
+//     &.checked {
+//       color: var(--clr-primary);
+//       font-weight: bold;
+//     }
+//   }
+
+//   &--image {
+//     display: flex;
+
+//     padding: 0.4em 1em;
+//     font-weight: bold;
+//     font-size: 1em;
+
+//     border-radius: 0.75em 0.75em 0 0;
+//     background-color: #1b1b1b;
+
+//     img {
+//       height: 1.3em;
+//       margin-right: 0.5rem;
+//     }
+//   }
+
+//   &--option {
+//     cursor: pointer;
+
+//     color: white;
+//     background-color: #333;
+
+//     border-radius: 0.25em;
+//     padding: 0.25em 0.5em;
+
+//     &.checked {
+//       color: var(--clr-primary);
+//       font-weight: bold;
+
+//       background-color: #3c3c3c;
+//     }
+//   }
+
+//   &:disabled {
+//     opacity: 0.65;
+//   }
+// }
+
 .return-btn {
   display: none;
   justify-content: center;