From 48b9b70c4a7e612b0b5313980188ec0624bdee03 Mon Sep 17 00:00:00 2001
From: Md Asif <md.asif5@tcs.com>
Date: Mon, 23 Dec 2024 20:47:13 +0530
Subject: [PATCH] refactor animations for improved transitions in App and
 AccountCreation components

---
 src/App.jsx                   |  8 ++++----
 src/pages/AccountCreation.jsx | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 17edcc4..97aa563 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
   const location = useLocation();
   return (
     <LoadingProvider>
-      <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col min-h-screen scrollbar">
         <Header />
         <LoadingBarWrapper />
         <main className="overflow-hidden flex flex-grow transition-color-mode md:p-10 2xl:px-70 bg-surface dark:bg-surface-dark">
@@ -34,9 +34,9 @@ function App() {
               <motion.div
                 className="w-full ovwerflow-hidden"
                 key={location.pathname}
-                initial={{ opacity: 0, x: 50 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 50 }}
+                initial={{ y: 15, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: 15, opacity: 0 }}
               >
                 <AnimatedOutlet />
               </motion.div>
diff --git a/src/pages/AccountCreation.jsx b/src/pages/AccountCreation.jsx
index fb305bc..4557eaa 100644
--- a/src/pages/AccountCreation.jsx
+++ b/src/pages/AccountCreation.jsx
@@ -196,9 +196,9 @@ function AccountCreation() {
             className="fixed z-50 inset-0 flex items-center justify-center bg-black/50"
           >
             <motion.div
-              initial={{ scale: 0.8 }}
-              animate={{ scale: 1 }}
-              exit={{ scale: 0.8 }}
+              initial={{ y: 15, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: 15, opacity: 0 }}
               className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body"
             >
               <h2 className="text-xl mb-4">Select Product</h2>
@@ -246,9 +246,9 @@ function AccountCreation() {
       <AnimatePresence>
         {notification.visible && (
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+            initial={{ y: 15, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 15, opacity: 0 }}
             className={clsx(
               "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
               notification.type === "error"