feat: another batch of fixes

frontend/src/styles/_animations.scss

@@ -61,6 +61,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -70,6 +71,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -79,14 +81,15 @@
   position: relative;
   top: 0;
   min-height: 100px;
+  overflow: hidden;
 
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
     backdrop-filter: blur(4px);
     z-index: 100;
     animation: fade-in 0.1s ease-in forwards;
@@ -101,13 +104,13 @@
     left: 50%;
     width: 40px;
     height: 40px;
-    border: 4px solid #f3f3f3;
-    //border-top: 4px solid $primary;
+    border: 4px solid var(--color-primary);
+    border-top: 4px solid var(--color-base-300);
     border-radius: 50%;
     animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;
     opacity: 0;
-    z-index: 101;
+    z-index: 9999;
   }
 }
 
@@ -133,6 +136,7 @@
     transform-origin: top;
     opacity: 1;
   }
+
   100% {
     transform: rotateX(-100deg);
     transform-origin: top;
@@ -157,6 +161,7 @@
     transform: scale(0);
     opacity: 1;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -184,6 +189,7 @@
     transform: scale(1);
     opacity: 1;
   }
+
   100% {
     transform: scale(0);
     opacity: 1;
@@ -195,9 +201,12 @@
 }
 
 @keyframes flash {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.3;
   }
@@ -233,6 +242,7 @@
     transform: translateY(1000px);
     opacity: 0;
   }
+
   100% {
     transform: translateY(0);
     opacity: 1;
@@ -240,10 +250,13 @@
 }
 
 @keyframes disable-pointer-events {
-  0%, 99% {
+
+  0%,
+  99% {
     pointer-events: none;
   }
+
   100% {
     pointer-events: auto;
   }
-}
+}

frontend/src/styles/_bootstrap.scss

@@ -1,14 +1,3 @@
-// Bootstrap Utilities and Custom Bootstrap Components
-// This file imports standalone implementations of Bootstrap components
-// and contains Bootstrap-related utilities
-
-// Standalone component implementations
 @use "offcanvas";
 @use "dropdown";
-@use "transitions";
-
-
-// Bootstrap-specific utility classes
-.dropdown-toggle.dropdown-toggle-no-icon::after {
-  display: none;
-}
+@use "transitions";

frontend/src/styles/style.scss

@@ -18,14 +18,6 @@ select {
   display: none;
 }
 
-// .ts-dropdown-content {
-//   max-height: 50vh;
-// }
-
-//.font-base {
-//  font-family: bootstrap.$font-family-base;
-//}
-
 ::selection {
   color: variables.$gray-800;
   background-color: variables.$primary;
@@ -51,9 +43,6 @@ select {
   padding: 0 8px !important;
 }
 
-//.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
-//  background-color: bootstrap.$primary-bg-subtle-dark;
-//}
 
 .offline {
   text-align: center;

frontend/src/styles/tailwind.css

@@ -17,8 +17,8 @@
   --color-base-200: oklch(98% 0 0);
   --color-base-300: oklch(96% 0 0);
   --color-base-content: oklch(21% 0.006 285.885);
-  --color-primary: oklch(87% 0.169 91.605);
-  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-primary: #b07526;
+  --color-primary-content: #fcf2e7;
   --color-secondary: oklch(44% 0.043 257.281);
   --color-secondary-content: oklch(98% 0.003 247.858);
   --color-accent: oklch(70% 0.01 56.259);
@@ -27,12 +27,12 @@
   --color-neutral-content: oklch(92% 0.004 286.32);
   --color-info: oklch(74% 0.16 232.661);
   --color-info-content: oklch(29% 0.066 243.157);
-  --color-success: oklch(76% 0.177 163.223);
-  --color-success-content: oklch(37% 0.077 168.94);
-  --color-warning: oklch(82% 0.189 84.429);
-  --color-warning-content: oklch(41% 0.112 45.904);
-  --color-error: oklch(71% 0.194 13.428);
-  --color-error-content: oklch(27% 0.105 12.094);
+  --color-success: #4b8f45;
+  --color-success-content: #ebf6ea;
+  --color-warning: #b07526;
+  --color-warning-content: #fcf2e7;
+  --color-error: #b44041;
+  --color-error-content: #ffeae8;
   --radius-selector: 0.5rem;
   --radius-field: 0.5rem;
   --radius-box: 0.5rem;
@@ -113,10 +113,51 @@
     .hr {
         @apply text-base-content/60;
     }
+
+    .card.card-border-base-100 {
+            border: var(--border) solid var(--color-base-100);
+    }
+
+    .card.card-border-base-200 {
+            border: var(--border) solid var(--color-base-200);
+    }
+
+    .card.card-border {
+            border: var(--border) solid var(--color-base-200);
+    }
+
+    .card.card-border-base-300 {
+            border: var(--border) solid var(--color-base-300);
+    }
+
+    .text-income {
+        @apply text-success;
+    }
+
+    .text-expense {
+        @apply text-error;
+    }
+
+    .text-exchange-rate {
+        @apply text-base-content/60;
+    }
+
+    .text-subtle {
+        @apply text-base-content/80;
+    }
 }
 
 
 @layer components {
+    .fab {
+    @layer daisyui.component {
+        > :nth-child(n+7) {
+            transition-delay: 150ms;
+        }
+
+  }
+}
+
     /* === Sidebar styles === */
     .sidebar-active {
         @apply text-primary-content bg-primary rounded-box;