refactor: clean up main.css move animation to tailwind config

Author: abhinavxd

frontend/src/assets/styles/main.scss

@@ -13,12 +13,20 @@
     min-height: 100%;
     overflow: hidden;
     margin: 0;
+    @apply bg-background text-foreground;
+  }
 
-    @media (max-width: 768px) {
+  @media (max-width: 768px) {
+    html,
+    body {
       overflow-x: auto;
     }
   }
 
+  * {
+    @apply border-border;
+  }
+
   .native-html {
     p {
       margin-bottom: 0.5rem;
@@ -215,37 +223,6 @@
   }
 }
 
-.dot-loader {
-  display: inline-flex;
-  align-items: center;
-}
-
-.dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: currentColor;
-  margin: 0 2px;
-  animation: dot-flashing 1s infinite linear alternate;
-}
-
-.dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes dot-flashing {
-  0% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 [data-radix-popper-content-wrapper] {
   z-index: 9999 !important;
 }
@@ -256,12 +233,3 @@
     @apply text-blue-500 hover:underline;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

frontend/tailwind.config.js

@@ -82,6 +82,10 @@ module.exports = {
         sm: 'calc(var(--radius) - 4px)'
       },
       keyframes: {
+        'dot-flashing': {
+          '0%': { opacity: '0.2' },
+          '100%': { opacity: '1' },
+        },
         'accordion-down': {
           from: {
             height: 0
@@ -198,6 +202,7 @@ module.exports = {
         'slide-in': 'slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         'slide-out': 'slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         'shake': 'shake 0.5s infinite',
+        'dot-flashing': 'dot-flashing 1s infinite linear alternate',
       }
     }
   },