style: add animation for loading modal setting panel

Author: NdekoCode

src/App.css

@@ -57,9 +57,17 @@
   animation: sweetX 0.35s forwards;
 }
 
+.sweetXReverse {
+  animation: sweetXReverse 0.35s forwards;
+}
+
 .FadeAp {
   animation: FadeAp 0.35s forwards;
 }
+
+.Fade {
+  animation: Fade 0.35s forwards;
+}
 @keyframes sweetX {
   0% {
     opacity: 0;
@@ -70,6 +78,16 @@
     transform: translateX(0);
   }
 }
+@keyframes sweetXReverse {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 @keyframes FadeAp {
   0% {
     opacity: 0;
@@ -80,3 +98,12 @@
     transform: scale(1) translateY(0);
   }
 }
+
+@keyframes Fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/components/Partials/ThemeSettings.jsx

@@ -10,11 +10,11 @@ const ThemeSettings = () => {
     StateContext();
   return (
     <div
-      className="bg-half-transparent w-screen fixed nav-item top-0 right-0"
+      className="Fade bg-half-transparent w-screen fixed nav-item top-0 right-0"
       onClick={setThemeSettings}
     >
       <div
-        className="float-right h-screen dark:text-gray-200 bg-white dark:[#484B52] w-400"
+        className="float-right sweetXReverse h-screen dark:text-gray-200 bg-white dark:[#484B52] w-400"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-4 ml-4">