refactor: fix eslint rules

frontend/src/styles/_animations.scss

@@ -10,42 +10,22 @@
  * animation swing-in-top-fwd
  * ----------------------------------------
  */
-@-webkit-keyframes swing-in-top-fwd {
-  0% {
-    -webkit-transform: rotateX(-100deg);
-            transform: rotateX(-100deg);
-    -webkit-transform-origin: top;
-            transform-origin: top;
-    opacity: 0;
-  }
-  100% {
-    -webkit-transform: rotateX(0deg);
-            transform: rotateX(0deg);
-    -webkit-transform-origin: top;
-            transform-origin: top;
-    opacity: 1;
-  }
-}
 @keyframes swing-in-top-fwd {
   0% {
-    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
-            transform: rotateX(-100deg);
+    transform-origin: top;
-    -webkit-transform-origin: top;
-            transform-origin: top;
     opacity: 0;
   }
+
   100% {
-    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
-            transform: rotateX(0deg);
+    transform-origin: top;
-    -webkit-transform-origin: top;
-            transform-origin: top;
     opacity: 1;
   }
 }
 
 .swing-in-top-fwd {
-	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+  animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
-	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
 }
 
 /* ----------------------------------------------
@@ -60,44 +40,29 @@
  * animation slide-in-left
  * ----------------------------------------
  */
-@-webkit-keyframes slide-in-left {
-  0% {
-    -webkit-transform: translateX(-1000px);
-            transform: translateX(-1000px);
-    opacity: 0;
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-    opacity: 1;
-  }
-}
 @keyframes slide-in-left {
   0% {
-    -webkit-transform: translateX(-1000px);
+    transform: translateX(-1000px);
-            transform: translateX(-1000px);
     opacity: 0;
   }
+
   100% {
-    -webkit-transform: translateX(0);
+    transform: translateX(0);
-            transform: translateX(0);
     opacity: 1;
   }
 }
 
-
 .slide-in-left {
-	-webkit-animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-	        animation: slide-in-left 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 
-//HTMX Loading
+// HTMX Loading
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 
-@keyframes fadeIn {
+@keyframes fade-in {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
@@ -107,7 +72,7 @@
   top: 0;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -115,13 +80,13 @@
     bottom: 0;
     backdrop-filter: blur(4px);
     z-index: 100;
-    animation: fadeIn 0.1s ease-in forwards;
+    animation: fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;
     opacity: 0;
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 10%;
     left: 50%;
@@ -130,7 +95,7 @@
     border: 4px solid #f3f3f3;
     border-top: 4px solid $primary;
     border-radius: 50%;
-    animation: spin 1s linear infinite, fadeIn 0.1s ease-in forwards;
+    animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;
     opacity: 0;
     z-index: 101;

frontend/src/styles/_bootstrap.scss

@@ -1,6 +1,7 @@
-@import 'bootstrap/scss/functions';
+@use "sass:map";
+@import "bootstrap/scss/functions";
+@import "variables";
 
-@import "_variables";
 // Import all of Bootstrap's CSS
 @import "bootstrap/scss/bootstrap";
 
@@ -9,24 +10,23 @@
   font-weight: bold;
 }
 
-$theme-colors: map-merge($theme-colors, (
+$theme-colors: map.merge(
-  "primary": $primary
+  $theme-colors,
-));
+  (
-
+    "primary": $primary
+  )
+);
 
 @media all and (min-width: 992px) {
   .navbar .nav-item .dropdown-menu {
     display: none;
+    margin-top: 0;
   }
 
   .navbar .nav-item:hover .dropdown-menu {
     display: block;
     left: 0;
   }
-
-  .navbar .nav-item .dropdown-menu {
-    margin-top: 0;
-  }
 }
 
 .table .col-auto {
@@ -35,66 +35,17 @@ $theme-colors: map-merge($theme-colors, (
 }
 
 .offcanvas-size-xl {
-    --#{$prefix}offcanvas-width: min(95vw, 700px) !important;
+  --#{$prefix}offcanvas-width: min(95vw, 700px) !important;
 }
+
 .offcanvas-size-xxl {
-    --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
+  --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
 }
+
 .offcanvas-size-md { /* add Responsivenes to default offcanvas */
-    --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
+  --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
 }
+
 .offcanvas-size-sm {
-    --#{$prefix}offcanvas-width: min(95vw, 250px) !important;
+  --#{$prefix}offcanvas-width: min(95vw, 250px) !important;
-}
-
-@media only screen and (max-width: 800px) {
-
-    /* Force table to not be like tables anymore */
-	.no-more-tables table,
-	.no-more-tables thead,
-	.no-more-tables tbody,
-	.no-more-tables th,
-	.no-more-tables td,
-	.no-more-tables tr {
-		display: block;
-	}
-
-	/* Hide table headers (but not display: none;, for accessibility) */
-	.no-more-tables thead tr {
-		position: absolute;
-		top: -9999px;
-		left: -9999px;
-	}
-
-	.no-more-tables tr { border: 1px solid #ccc; }
-
-	.no-more-tables td {
-		/* Behave  like a "row" */
-		border: none;
-		border-bottom: 1px solid #eee;
-		position: relative;
-		padding-left: 50%;
-		white-space: normal;
-		text-align:left;
-	}
-
-	.no-more-tables td:before {
-		/* Now like a table header */
-		position: absolute;
-		/* Top/left values mimic padding */
-		top: 6px;
-		left: 6px;
-		width: 45%;
-		padding-right: 10px;
-		white-space: nowrap;
-		text-align:left;
-		font-weight: bold;
-	}
-
-	/*
-	Label the data
-	*/
-	.no-more-tables td:before {
-		content: attr(data-title);
-	}
 }

frontend/src/styles/_tom-select.scss

@@ -1,13 +1,19 @@
 @import "tom-select/dist/css/tom-select.bootstrap5.min.css";
-@import "_variables.scss";
+@import "variables.scss";
 
 /* FIX BOOTSTRAP STYLING FOR TOM SELECT */
-.ts-dropdown, .ts-control, .ts-control input {
+.ts-dropdown,
+.ts-control,
+.ts-control input {
   color: var(--bs-body-color);
 }
+
+/* stylelint-disable-next-line selector-class-pattern */
 .ts-wrapper.plugin-remove_button .item .remove {
   color: $red;
 }
+
+/* stylelint-disable-next-line selector-class-pattern */
 .plugin-clear_button .clear-button {
   color: $red;
   right: 60px;
@@ -16,15 +22,15 @@
 .ts-wrapper.multi .ts-control > div.active {
   background: $primary;
   color: $body-color;
-  border: 0 solid rgba(0, 0, 0, 0);
+  border: 0 solid #0000;
 }
 
 .focus .ts-control {
   color: $input-focus-color;
   background-color: $input-focus-bg;
   border-color: $input-focus-border-color;
-  //border-color: $form-select-focus-border-color;
   outline: 0;
+
   @if $enable-shadows {
     @include box-shadow($input-box-shadow, $input-focus-box-shadow);
   } @else {
@@ -35,13 +41,14 @@
 
 .focus.ts-wrapper {
   border-color: $form-select-focus-border-color;
-    outline: 0;
+  outline: 0;
-    @if $enable-shadows {
+
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+  @if $enable-shadows {
-    } @else {
+    @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-      // Avoid using mixin so we can pass custom focus shadow properly
+  } @else {
-      box-shadow: $form-select-focus-box-shadow;
+    // Avoid using mixin so we can pass custom focus shadow properly
-    }
+    box-shadow: $form-select-focus-box-shadow;
+  }
 }
 
 .ts-control > .clear-button {

frontend/src/styles/_variables.scss

@@ -1,4 +1,6 @@
-$white:    #fff !default;
+/* stylelint-disable scss/dollar-variable-empty-line-before */
+
+$white: #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #ebebeb !default;
 $gray-300: #dee2e6 !default;
@@ -8,29 +10,28 @@ $gray-600: #888 !default;
 $gray-700: #444 !default;
 $gray-800: #303030 !default;
 $gray-900: #222 !default;
-$black:    #000 !default;
+$black: #000 !default;
 
-$blue:    #375a7f !default;
+$blue: #375a7f !default;
-$indigo:  #6610f2 !default;
+$indigo: #6610f2 !default;
-$purple:  #6f42c1 !default;
+$purple: #6f42c1 !default;
-$pink:    #e83e8c !default;
+$pink: #e83e8c !default;
-$red:     #e74c3c !default;
+$red: #e74c3c !default;
-$orange:  #fd7e14 !default;
+$orange: #fd7e14 !default;
-$yellow:  #fbb700 !default;
+$yellow: #fbb700 !default;
-$green:   #00bc8c !default;
+$green: #00bc8c !default;
-$teal:    #20c997 !default;
+$teal: #20c997 !default;
-$cyan:    #3498db !default;
+$cyan: #3498db !default;
 
-$primary:       $yellow !default;
+$primary: $yellow !default;
-$secondary:     $gray-700 !default;
+$secondary: $gray-700 !default;
-$success:       $green !default;
+$success: $green !default;
-$info:          $cyan !default;
+$info: $cyan !default;
-$warning:       $yellow !default;
+$warning: $yellow !default;
-$danger:        $red !default;
+$danger: $red !default;
-//$light:         $gray-500 !default;
+$dark: $gray-700 !default;
-$dark:          $gray-700 !default;
 
-$min-contrast-ratio:   1.9 !default;
+$min-contrast-ratio: 1.9 !default;
 
 $nav-pills-link-active-color: $gray-900;
 $dropdown-link-active-color: $gray-900;

frontend/src/styles/style.scss

@@ -17,7 +17,7 @@ select[multiple] {
 }
 
 .ts-dropdown-content {
-    max-height: 50vh; /* change this */
+  max-height: 50vh;
 }
 
 .font-base {
@@ -30,15 +30,15 @@ select[multiple] {
 }
 
 .dotted-line {
-    border-bottom: 2px dotted $gray-700; /* Adjust color as needed */
+  border-bottom: 2px dotted $gray-700;
-    margin: 0 5px;
+  margin: 0 5px;
-    position: relative;
+  position: relative;
 }
 
 .hierarchy-line-icon {
   width: 8px;
   height: 10px;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIHN0cm9rZT0iIzlCOUI5QiIgc3Ryb2tlLWRhc2hhcnJheT0iNCIgZD0iTS41IDQuNWgxMiIvPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZD0iTS41IDQuNXYtNCIvPjwvZz48L3N2Zz4=);
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxwYXRoIHN0cm9rZT0iIzlCOUI5QiIgc3Ryb2tlLWRhc2hhcnJheT0iNCIgZD0iTS41IDQuNWgxMiIvPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZD0iTS41IDQuNXYtNCIvPjwvZz48L3N2Zz4=");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: top;
@@ -49,7 +49,6 @@ select[multiple] {
   padding: 0 8px !important;
 }
 
-
 .transaction:has(input[type="checkbox"]:checked) > .transaction-item {
-  background-color: $primary-bg-subtle-dark; /* Change this to your desired background color */
+  background-color: $primary-bg-subtle-dark;
 }