Disable modal animation on mobile and other CSS fixes

components/AccountModal/index.scss

@@ -10,6 +10,10 @@
     flex-direction: column;
     gap: $unit-2x;
     padding: 0 $unit-4x;
+
+    @include breakpoint(phone) {
+      gap: $unit-4x;
+    }
   }
 
   .DialogDescription {

components/DialogContent/index.scss

@@ -16,8 +16,8 @@
   .DialogContent {
     $multiplier: 4;
 
-    animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
+    // animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
-      none running openModalDesktop;
+    // none running openModalDesktop;
     background: var(--dialog-bg);
     border-radius: $card-corner;
     box-sizing: border-box;
@@ -42,16 +42,19 @@
     }
 
     @include breakpoint(phone) {
-      animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
+      // animation: slideUp;
-        openModalMobile;
+      // animation-duration: 3s;
+      // animation-fill-mode: forwards;
+      // animation-play-state: running;
+      // animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       min-width: inherit;
-      min-height: 80vh;
+      min-height: 90vh;
       transform: initial;
       left: 0;
       right: 0;
-      top: 0;
+      top: 5vh;
       height: auto;
       width: 100%;
     }

styles/globals.scss

@@ -1,4 +1,5 @@
 @import '~meyer-reset-scss';
+@import 'keyframes.scss';
 @import 'themes.scss';
 
 html {
@@ -299,107 +300,3 @@ i.tag {
     grid-template-columns: 1fr 1fr;
   }
 }
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes openModalDesktop {
-  0% {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-
-  100% {
-    // opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes openModalMobile {
-  0% {
-    opacity: 0;
-    transform: translate(0%, 100%);
-  }
-
-  100% {
-    // opacity: 1;
-    transform: translate(0, 30%);
-  }
-}
-
-@keyframes slideLeft {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideRight {
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes fadeInFilter {
-  from {
-    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
-  }
-
-  to {
-    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
-  }
-}
-
-@keyframes scaleIn {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  20% {
-    opacity: 0.2;
-    transform: scale(0.4);
-  }
-  40% {
-    opacity: 0.4;
-    transform: scale(0.8);
-  }
-  60% {
-    opacity: 0.6;
-    transform: scale(1);
-  }
-  65% {
-    opacity: 0.65;
-    transform: scale(1.1);
-  }
-  70% {
-    opacity: 0.7;
-    transform: scale(1);
-  }
-  75% {
-    opacity: 0.75;
-    transform: scale(0.98);
-  }
-  80% {
-    opacity: 0.8;
-    transform: scale(1.02);
-  }
-  90% {
-    opacity: 0.9;
-    transform: scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

styles/keyframes.scss

@@ -0,0 +1,102 @@
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes openModalDesktop {
+  0% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  100% {
+    // opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translate(0%, 100%);
+  }
+
+  100% {
+    transform: translate(0, 5%);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeInFilter {
+  from {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
+  }
+
+  to {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  20% {
+    opacity: 0.2;
+    transform: scale(0.4);
+  }
+  40% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  60% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  65% {
+    opacity: 0.65;
+    transform: scale(1.1);
+  }
+  70% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  75% {
+    opacity: 0.75;
+    transform: scale(0.98);
+  }
+  80% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+  90% {
+    opacity: 0.9;
+    transform: scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}