Poprawki wyglądu, usunięcie buga z filtrem pociągów

src/App.vue

@@ -229,7 +229,7 @@ export default class App extends Vue {
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.35rem + 1vw);
+    font-size: calc(0.45rem + 1vw);
   }
 }
 

src/components/SceneryView/SceneryInfo.vue

@@ -21,16 +21,19 @@
           <img :src="likeIcon" alt="icon-like" />
           <span>{{ stationInfo.dispatcherRate }}</span>
         </span>
+
         <span class="users">
           <img :src="userIcon" alt="icon-user" />
           <span>{{ stationInfo.currentUsers }}</span>
           /
           <span>{{ stationInfo.maxUsers }}</span>
         </span>
+
         <span class="spawns">
           <img :src="spawnIcon" alt="icon-spawn" />
           <span>{{ stationInfo.spawns.length }}</span>
         </span>
+
         <span class="schedules">
           <img :src="timetableIcon" alt="icon-timetable" />
           <span v-if="stationInfo.scheduledTrains">
@@ -253,7 +256,7 @@ h3 {
       font-weight: bold;
       color: $accentCol;
 
-      font-size: 4em;
+      font-size: 3.5em;
 
       text-transform: uppercase;
     }
@@ -270,15 +273,16 @@ h3 {
     padding: 1rem 0;
 
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
 
-    font-size: 1.7em;
+    font-size: 1.65em;
 
     & > span {
       display: flex;
       align-items: center;
 
-      margin: 0 0.6em;
+      margin: 0.3em;
     }
 
     .likes,

src/components/SceneryView/SceneryTimetable.vue

@@ -350,7 +350,7 @@ h3 {
 
     padding: 0 0.35em;
 
-    background: #555;
+    background: $bgLigtherCol;
 
     @include smallScreen() {
       display: flex;
@@ -361,7 +361,7 @@ h3 {
     &.loading,
     &.empty {
       padding: 1rem;
-      font-size: 1em;
+      font-size: 1.2em;
     }
 
     &.empty {
@@ -389,12 +389,12 @@ h3 {
 
   &-schedule {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-    font-size: 1.2em;
+    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+    font-size: 1.3em;
 
     @include smallScreen() {
       width: 100%;
-      margin: 0.7em 0;
+      margin: 0.5em 0;
     }
   }
 }

src/components/TrainsView/TrainOptions.vue

@@ -81,6 +81,13 @@ export default class TrainOptions extends Vue {
   @Prop() readonly queryTrain!: string;
   @Prop() readonly focusedTrain!: string;
 
+  mounted() {
+    if (this.queryTrain) {
+      this.searchedTrain = this.queryTrain;
+      this.searchedDriver = "";
+    }
+  }
+
   sorterOptions: { id: string; content: string }[] = [
     {
       id: "mass",

src/styles/variables.scss

@@ -1,7 +1,8 @@
-$primaryCol: #2f2f2f;
+$primaryCol: #2c2c2c;
 $secondaryCol: #01e733;
 
-$bgCol: #505050;
+$bgCol: #4d4d4d;
+$bgLigtherCol: #555;
 
 $errorCol: #ff1919;
 $warningCol: #ffe15b;

src/views/SceneryView.vue

@@ -68,6 +68,8 @@ export default class SceneryView extends Vue {
 @import "../styles/responsive.scss";
 @import "../styles/variables.scss";
 
+$sceneryBgCol: #333;
+
 .scenery {
   &-view {
     min-height: 100%;
@@ -94,7 +96,6 @@ export default class SceneryView extends Vue {
   }
 
   &-wrapper {
-    // background: #555;
     width: 75%;
     max-width: 950px;
 
@@ -102,10 +103,7 @@ export default class SceneryView extends Vue {
       width: 95%;
     }
 
-    // max-height: 100vh;
-    // overflow: auto;
-
-    background: #333;
+    background: $sceneryBgCol;
     padding: 1em;
     margin: 1rem 0;
 

src/views/TrainsView.vue

@@ -73,7 +73,6 @@ export default class TrainsView extends Vue {
   changeSorter(sorter: { id: string; dir: number }) {
     this.sorterActive = sorter;
   }
-
   get computedTrains() {
     return this.trains
       .filter(