chore: added bold font type, moved common table css to separate file

src/components/VehiclesManager/VehicleEditModal.vue

@@ -89,7 +89,7 @@
       <div class="modal-actions">
         <button @click="updateVehicle">Aktualizuj dane</button>
         <button @click="removeVehicle">Usuń pojazd</button>
-        <button @click="closeModal">Nie zapisuj</button>
+        <button @click="closeModal">Wyjdź</button>
       </div>
     </div>
   </div>

src/components/VehiclesManager/VehicleGroupEditModal.vue

@@ -93,14 +93,14 @@
       <div class="modal-actions">
         <button @click="updateVehicleGroup">Aktualizuj dane</button>
         <button @click="removeVehicleGroup">Usuń grupę</button>
-        <button @click="closeModal">Nie zapisuj</button>
+        <button @click="closeModal">Wyjdź</button>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, reactive, ref, Ref, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, PropType, reactive, ref, useTemplateRef, watch } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
 import client from '../../common/http';
 import { AxiosError } from 'axios';

src/components/VehiclesManager/VehicleGroupsTable.vue

@@ -196,4 +196,6 @@ async function addVehicleGroupRow() {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use '../../styles/vehicle_tables';
+</style>

src/components/VehiclesManager/VehiclesTable.vue

@@ -183,3 +183,7 @@ async function addVehicleRow() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use '../../styles/vehicle_tables';
+</style>

src/styles/_fonts.scss

@@ -21,3 +21,11 @@
   font-weight: 600;
   src: url('/fonts/inter-v19-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/fonts/inter-v20-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/styles/_vehicle_tables.scss

@@ -0,0 +1,40 @@
+.table-search-box {
+  display: flex;
+  gap: 0.5em;
+  margin-top: 0.5em;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow: auto;
+  margin-top: 1em;
+}
+
+.table-wrapper table > thead > tr > td {
+  & > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  &[data-sortable='true'] {
+    cursor: pointer;
+  }
+}
+
+.table-wrapper table > tbody > tr {
+  cursor: pointer;
+
+  &:hover {
+    background: #1a293b;
+  }
+}
+
+.table-visible-results-box {
+  margin-top: 0.5em;
+}
+
+.table-visible-results-box input {
+  max-width: 70px;
+}

src/views/VehiclesManagerView.vue

@@ -9,8 +9,8 @@
       </div>
 
       <div class="mode-change-box">
-        <button @click="changeTab('vehicles')">POJAZDY</button>
-        <button @click="changeTab('vehicleGroups')">GRUPY</button>
+        <button @click="changeTab('vehicles')" :data-active="currentTab == 'vehicles'">POJAZDY</button>
+        <button @click="changeTab('vehicleGroups')" :data-active="currentTab == 'vehicleGroups'">GRUPY</button>
       </div>
 
       <keep-alive>
@@ -46,7 +46,7 @@ function changeTab(tabName: TableTabName) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .view-wrapper {
   display: grid;
   grid-template-rows: auto 1fr;
@@ -67,47 +67,9 @@ img.brand-image {
   display: flex;
   gap: 0.5em;
   margin-top: 1em;
-}
 
-// For children tab elements
-.table-search-box {
-  display: flex;
-  gap: 0.5em;
-  margin-top: 0.5em;
-}
-
-.table-wrapper {
-  width: 100%;
-  overflow: auto;
-  margin-top: 1em;
-}
-
-.table-wrapper table > thead > tr > td {
-  & > div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5em;
+  button[data-active='true'] {
+    color: gold;
   }
-
-  &[data-sortable='true'] {
-    cursor: pointer;
-  }
-}
-
-.table-wrapper table > tbody > tr {
-  cursor: pointer;
-
-  &:hover {
-    background: #1a293b;
-  }
-}
-
-.table-visible-results-box {
-  margin-top: 0.5em;
-}
-
-.table-visible-results-box input {
-  max-width: 70px;
 }
 </style>