hotfix: post-upgrade adjustments

src/App.vue

@@ -169,16 +169,6 @@ export default defineComponent({
 <style lang="scss">
 @use './styles/animations';
 
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: var(--clr-primary);
-    font-weight: bold;
-  }
-}
-
 // APP
 #app {
   color: white;

src/components/App/AppHeader.vue

@@ -45,17 +45,17 @@
         </span>
 
         <span class="header_links">
-          <router-link class="route" active-class="route-active" to="/" exact>
+          <router-link class="route-link" active-class="route-link-active" to="/" exact>
             {{ $t('app.sceneries') }}
           </router-link>
           /
-          <router-link class="route" active-class="route-active" to="/trains">{{
+          <router-link class="route-link" active-class="route-link-active" to="/trains">{{
             $t('app.trains')
           }}</router-link>
           /
           <router-link
-            class="route"
+            class="route-link"
-            active-class="route-active"
+            active-class="route-link-active"
             :data-active="$route.path.startsWith('/journal')"
             to="/journal"
           >

src/components/Global/DonationCard.vue

@@ -198,30 +198,26 @@ a.discord {
 
 .actions-container > .action {
   &.paypal {
-    $btnColor: #254069;
+    background-color: #254069;
-
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
     }
   }
 
   &.coffee {
-    $btnColor: #009255;
+    background-color: #009255;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
     }
   }
 
   &.exit {
-    $btnColor: #686868;
+    background-color: #686868;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
     }
   }
 }

src/components/JournalView/JournalHeader.vue

@@ -1,11 +1,16 @@
 <template>
   <section class="journal-header">
     <div class="journal-type-options">
-      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
+      <router-link
+        class="route-link"
+        active-class="route-link-active"
+        to="/journal/timetables"
+        exact
+      >
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
-      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
+      <router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
         {{ $t('journal.section-dispatchers') }}
       </router-link>
     </div>
@@ -39,8 +44,4 @@ export default defineComponent({});
   display: flex;
   justify-content: center;
 }
-
-.router-link.active {
-  color: gold;
-}
 </style>

src/components/StationsView/StationTable.vue

@@ -403,6 +403,8 @@ export default defineComponent({
 @use '../../styles/responsive';
 @use '../../styles/icons';
 
+@use 'sass:color';
+
 $rowCol: #424242;
 
 .station_table {
@@ -503,13 +505,13 @@ tr,
   vertical-align: middle;
 
   &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
+    background-color: color.adjust($rowCol, $lightness: 5%);
     color: white;
   }
 
   &:hover,
   &:focus {
-    background-color: lighten($rowCol, 20);
+    background-color: color.adjust($rowCol, $lightness: 15%);
   }
 
   td {

src/styles/_global.scss

@@ -140,18 +140,27 @@ a {
   color: inherit;
 }
 
+a.a-row {
+  display: table-row;
+}
+
 a:focus-visible {
   outline: 1px solid var(--clr-primary);
 }
 
-.route-active,
+.route-link {
-.route[data-active='true'] {
+  margin: 0 0.2em;
-  color: #ffc014;
+  transition: color 100ms;
-  font-weight: 700;
-}
 
-a.a-row {
+  &-active,
-  display: table-row;
+  &[data-active='true'] {
+    color: var(--clr-primary);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--clr-primary);
+  }
 }
 
 ul {

src/views/DriverView.vue

@@ -148,6 +148,7 @@ function copyStockToClipboard() {
 
 <style lang="scss" scoped>
 @use '../styles/responsive';
+@use 'sass:color';
 
 $viewBgCol: #1a1a1a;
 
@@ -176,7 +177,7 @@ $viewBgCol: #1a1a1a;
   border-radius: 0.5em 0.5em 0 0;
 
   &:hover {
-    background-color: lighten($viewBgCol, 10);
+    background-color: color.adjust($viewBgCol, $lightness: 10%);
   }
 }
 

src/views/StationsView.vue

@@ -106,15 +106,13 @@ export default defineComponent({
 button.btn-donation {
   margin-left: auto;
 
-  $btnColor: #254069;
+  background-color: #254069;
-
-  background-color: $btnColor;
 
   &:hover {
-    background-color: lighten($btnColor, 5%);
+    background-color: #2e4f81;
   }
 
-  @include responsive.smallScreen{
+  @include responsive.smallScreen {
     span {
       display: none;
     }