Poprawki wyglądu appbaru, dodanie wsparcia dla niewpisanych scenerii

src/components/ui/Card.vue

@@ -1,7 +1,9 @@
 <template>
   <transition name="card-anim">
     <div class="card" v-if="stationInfo">
-      <div class="card-exit" @click="closeCard">X</div>
+      <div class="card-exit" @click="closeCard">
+        <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+      </div>
 
       <div class="card-upper">
         <div class="station-name">
@@ -190,8 +192,11 @@ export default Vue.extend({
     position: absolute;
     top: 0;
     right: 0;
-    padding: 1rem;
-    font-size: calc(1rem + 0.7vw);
+    margin: 0.8em;
+
+    img {
+      width: 1.3em;
+    }
 
     cursor: pointer;
   }

src/components/ui/Clock.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="clock">{{ formattedDate }}</section>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  name: "clock",
+  data: () => ({
+    timestamp: Date.now()
+  }),
+  computed: {
+    formattedDate() {
+      return new Date(this.timestamp).toLocaleString("pl-PL");
+    }
+  },
+  mounted() {
+    setInterval(() => (this.timestamp = Date.now()), 1000);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.clock {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.25em;
+}
+</style>

src/components/ui/Options.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
 }
 
 .button {
-  font-size: 0.9em;
+  font-size: 0.75em;
 
   img {
     width: 1.3em;

src/components/utils/ListFilter.vue

@@ -14,6 +14,7 @@
               class="option-input"
               type="checkbox"
               :name="option.name"
+              :defaultValue="option.defaultValue"
               :id="option.id"
               v-model="option.value"
               @change="handleChange"
@@ -150,8 +151,8 @@ export default Vue.extend({
         id: "free",
         name: "free",
         section: "status",
-        value: true,
-        defaultValue: true,
+        value: false,
+        defaultValue: false,
         content: "WOLNA"
       },
       {
@@ -189,7 +190,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH ZELEKTRYFIKOWANYCH"
+        content: "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
       },
       {
         id: "min-oneway-ne",
@@ -198,7 +199,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH NIEZELEKTRYFIKOWANYCH"
+        content: "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
       },
       {
         id: "min-twoway-e",
@@ -207,7 +208,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH ZELEKTRYFIKOWANYCH"
+        content: "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
       },
       {
         id: "min-twoway-ne",
@@ -216,7 +217,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH NIEZELEKTRYFIKOWANYCH"
+        content: "SZLAKI DWUTOROWE NIEELEKTR. (MINIMUM)"
       }
     ]
   }),
@@ -224,7 +225,10 @@ export default Vue.extend({
   methods: {
     ...mapActions(["setFilter", "resetFilters"]),
     handleChange(e: any) {
-      this.setFilter({ filterName: e.target.name, value: !e.target.checked });
+      this.setFilter({
+        filterName: e.target.name,
+        value: !e.target.checked
+      });
     },
     handleInput(e: any) {
       this.setFilter({
@@ -429,7 +433,7 @@ export default Vue.extend({
     display: flex;
     align-items: center;
 
-    font-size: 0.6em;
+    font-size: 0.75em;
   }
 
   &-input {