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;
   }
-}
+}