restruct: packages versions upgrade

src/App.vue

@@ -57,6 +57,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global.scss';
+@use './styles/global';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
 </style>

src/styles/_global.scss

@@ -1,15 +1,16 @@
+@use "sass:color";
+
 body,
 html {
   margin: 0;
   background-color: #1e2341;
   color: white;
   box-sizing: border-box;
+  font-size: 16px;
 
   @media screen and (max-width: 700px) {
     font-size: calc(0.7vw + 0.7rem);
   }
-
-  font-size: 16px;
 }
 
 #app {
@@ -37,11 +38,13 @@ input {
 }
 
 button {
+  $color: #3c5a89;
+
   appearance: none;
   outline: none;
   border: none;
 
-  background-color: #3c5a89;
+  background-color: $color;
   color: white;
 
   padding: 0.5em 0.5em;
@@ -54,7 +57,7 @@ button {
 
   &:hover:not([data-disabled='true']),
   &:focus-visible {
-    background-color: lighten($color: #3c5a89, $amount: 10%);
+    background-color: color.adjust($color, $lightness: 10%);
   }
 
   &[data-disabled='true'] {

src/views/ManagerView.vue

@@ -10,9 +10,11 @@
     <div class="table_container">
       <table>
         <thead>
-          <th v-for="header in headers" :width="header.width">{{ header.value }}</th>
-          <th width="250">Dostępność</th>
-          <th width="80">Usuń</th>
+          <tr>
+            <td v-for="header in headers" :width="header.width">{{ header.value }}</td>
+            <td width="250">Dostępność</td>
+            <td width="80">Usuń</td>
+          </tr>
         </thead>
 
         <tbody>
@@ -23,7 +25,7 @@
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
-              <span v-else-if="propName === 'routes'" style="font-size: 1.1em;" :routes="station.routesInfo">
+              <span v-else-if="propName === 'routes'" style="font-size: 1.1em" :routes="station.routesInfo">
                 <b>{{ station.routesInfo.length }}</b>
               </span>
 
@@ -41,7 +43,7 @@
                 name="availability"
                 :id="`select-${row}`"
                 v-model="sceneriesStore.sortedStationList[row]['availability']"
-                @input="(e) => changeAvailability(station, sceneriesStore.sortedStationList[row]['availability'], e)"
+                @input="changeAvailability(station, sceneriesStore.sortedStationList[row]['availability'], $event)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -150,7 +152,7 @@ export default defineComponent({
         return;
       }
 
-      let newValue = prompt(`Zmień wartość dla rubryki ${this.headers.find(h => h.id === propertyName)?.value ?? ''}`, oldValue || '');
+      let newValue = prompt(`Zmień wartość dla rubryki ${this.headers.find((h) => h.id === propertyName)?.value ?? ''}`, oldValue || '');
       if (newValue == null) return;
       (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
       // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
@@ -212,14 +214,14 @@ table thead {
   top: 0;
 }
 
-table th {
+table thead td {
   padding: 0.4rem 0.45rem;
   background-color: #151b24;
   color: white;
   top: 0;
 }
 
-table tr {
+table tbody tr {
   background-color: #2c394b;
   transition: background-color 100ms;
   text-overflow: ellipsis;
@@ -243,7 +245,7 @@ table tr:hover {
   cursor: pointer;
 }
 
-table tr td {
+table tbody tr td {
   padding: 0.3rem 0.5rem;
   border: 1px solid #2c2c2c;
   overflow: hidden;