fix(settings): added bezier curve to animations

src/pages/settings/GenericSettings.tsx

@@ -65,7 +65,7 @@ export function GenericSettings({
 
         setTimeout(() => {
             history.replace(state.layout.getLastPath());
-        }, 100);
+        }, 200);
     }, [history]);
 
     useEffect(() => {

src/pages/settings/Settings.module.scss

@@ -4,33 +4,31 @@
         transform: scale(1.2);
         opacity: 0;
     }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes close {
-    0% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    100% {
-        transform: scale(1.2);
-        opacity: 0;
-    }
-}
-
-@keyframes opacity {
-    0% {
-        opacity: 0;
-    }
     20% {
         opacity: 0.5;
     }
     50% {
         opacity: 1;
     }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes close {
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.2);
+    }
 }
 
 /* Settings CSS */
@@ -84,10 +82,10 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    animation: open 0.18s ease-out, opacity 0.18s;
+    animation: open 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16) forwards;
 
     &.closing {
-        animation: close 0.18s ease-in;
+        animation: close 340ms cubic-bezier(0.5, 0, 0.8, 0.11);
     }
 
     .scrollbox::-webkit-scrollbar-thumb {