Przywrócono wybór serwerów; poprawki wyglądu

src/components/App/Clock.vue

@@ -31,7 +31,6 @@ export default defineComponent({
 
 .clock {
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 </style>

src/components/App/StatusIndicator.vue

@@ -288,7 +288,7 @@ export default defineComponent({
   position: absolute;
   left: 50%;
   bottom: 0;
-  transform: translateX(11.6em);
+  transform: translateX(12em);
   z-index: 100;
 }
 

src/components/Global/SelectBox.vue

@@ -5,15 +5,13 @@
         <span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
       </button>
 
-      <ul class="options" :ref="(el) => (listRef = el)">
+      <ul class="options" :ref="(el) => (listRef = el as Element)">
         <li class="option" v-for="(item, i) in itemList" :key="item.id">
           <transition
             name="unfold"
-            :style="
-              `
+            :style="`
             --delay-in: ${i * 55}ms; 
-            --delay-out: ${(itemList.length - 1 - i) * 55}ms`
-            "
+            --delay-out: ${(itemList.length - 1 - i) * 55}ms`"
           >
             <label :for="item.id" v-if="listOpen">
               <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
@@ -36,7 +34,7 @@
 import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 
 interface Item {
-  id: string | number;
+  id: string;
   value: string;
 }
 
@@ -141,7 +139,8 @@ export default defineComponent({
 .arrow {
   position: absolute;
   top: 50%;
-  right: 0.5em;
+  right: 0;
+  padding: 0.5em;
 
   img {
     vertical-align: middle;
@@ -160,7 +159,7 @@ button.selected {
   font-size: 1em;
 
   padding: 0.35em 0.5em;
-  padding-right: 2em;
+  margin-right: 1.4em;
 
   width: 100%;
   cursor: pointer;
@@ -181,8 +180,6 @@ button.selected {
 
   height: 100%;
 
-  min-width: 12em;
-
   text-align: center;
 }
 

src/components/StationsView/StationFilterCard.vue

@@ -9,29 +9,9 @@
 
     <transition name="card-anim">
       <div class="card" v-if="isVisible">
-        <!-- <div class="card_exit" @click="closeCard"></div> -->
-
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
-          <!-- <section class="card_regions">
-            <div class="regions_content">
-              <span v-for="region in inputs.regions" :key="region.id" :class="`region-${region.id}`">
-                <label>
-                  <input
-                    type="radio"
-                    name="region"
-                    :id="region.id"
-                    :value="region"
-                    v-model="currentRegion"
-                    @change="handleChangeRegion"
-                  />
-                  <span :class="{ checked: currentRegion.id === region.id }">
-                    {{ region.value }}
-                  </span>
-                </label>
-              </span>
-            </div>
-          </section> -->
+
           <section class="card_options">
             <filter-option
               v-for="(option, i) in inputs.options"
@@ -282,9 +262,6 @@ export default defineComponent({
   }
 }
 
-.filter-card {
-  font-size: 1em;
-}
 .card {
   &_btn {
     button {
@@ -292,15 +269,15 @@ export default defineComponent({
       align-items: center;
 
       padding: 0.5em 1em;
-      border-radius: 1em 1em 0 0;
+      border-radius: 0.75em 0.75em 0 0;
 
-      /* border-radius: 0 0.9em 0.9em 0; */
-      /* outline: 2px solid white; */
+      font-size: 0.9em;
+      font-weight: bold;
     }
 
     img {
-      width: 1.5em;
-      margin-right: 0.5em;
+      width: 1.3em;
+      margin-right: 0.25em;
     }
   }