From 875a2b4770412031308aae6690ace0da4f965128 Mon Sep 17 00:00:00 2001
From: Ishita <155231566+CoderGirl2844@users.noreply.github.com>
Date: Tue, 9 Jul 2024 18:12:59 +0530
Subject: [PATCH 1/4] Updated Settings.css

Added the animation effects to all the settings forms
---
 src/Components/Settings/Settings.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index 901a3c6..b09114b 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -50,6 +50,7 @@
   max-width: 800px; 
   min-height: 500px;
   box-sizing: border-box;
+  animation: zoomIn 1s ease forwards;
 }
 
 .form-group {

From bb6583d2adb46a93d7ce9b1c8cdefefdcb27e403 Mon Sep 17 00:00:00 2001
From: Ishita <155231566+CoderGirl2844@users.noreply.github.com>
Date: Thu, 18 Jul 2024 01:30:19 +0530
Subject: [PATCH 2/4] Update Settings.css

---
 src/Components/Settings/Settings.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index b09114b..d369b82 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -170,3 +170,28 @@ button:hover {
     width: 100%; 
   }
 }
+@-webkit-keyframes zoomIn {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}

From 0b4bd499d18f95211e03dea29158239a2039803f Mon Sep 17 00:00:00 2001
From: Ishita <155231566+CoderGirl2844@users.noreply.github.com>
Date: Thu, 18 Jul 2024 02:07:00 +0530
Subject: [PATCH 3/4] Update Settings.css

---
 src/Components/Settings/Settings.css | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index d369b82..c0df984 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -170,17 +170,8 @@ button:hover {
     width: 100%; 
   }
 }
-@-webkit-keyframes zoomIn {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
+.zoomIn{
+animation : zoomIn 1s ease forwards;
 }
 
 @keyframes zoomIn {

From c03f0fe608deab85c63357c90ed324640ff214c5 Mon Sep 17 00:00:00 2001
From: Ishita <155231566+CoderGirl2844@users.noreply.github.com>
Date: Thu, 18 Jul 2024 02:09:22 +0530
Subject: [PATCH 4/4] Update SettingsPage.js

---
 src/Components/Settings/SettingsPage.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Components/Settings/SettingsPage.js b/src/Components/Settings/SettingsPage.js
index 4663875..4d4e66e 100644
--- a/src/Components/Settings/SettingsPage.js
+++ b/src/Components/Settings/SettingsPage.js
@@ -2,6 +2,15 @@ import React, { useState } from "react";
 import "./Settings.css";
 import { Link } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa";
+import React, { useState, useEffect } from "react";
+useEffect(() => {
+  document.body.classList.add("zoomIn");
+
+  return () => {
+    document.body.classList.remove("zoomIn");
+  };
+}, []);
+
 
 const SettingsPage = () => {
   const [activeTab, setActiveTab] = useState("profile");