From bd6959801d33a9846c740359a0f57e80237a3aa2 Mon Sep 17 00:00:00 2001
From: Ishita <155231566+CoderGirl2844@users.noreply.github.com>
Date: Wed, 17 Jul 2024 23:57:07 +0530
Subject: [PATCH 1/2] Updated SettingsPage.js

added the animations in JS file
---
 src/Components/Settings/SettingsPage.js | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/Components/Settings/SettingsPage.js b/src/Components/Settings/SettingsPage.js
index 4663875..1a469cb 100644
--- a/src/Components/Settings/SettingsPage.js
+++ b/src/Components/Settings/SettingsPage.js
@@ -10,16 +10,7 @@ const SettingsPage = () => {
     switch (activeTab) {
       case "profile":
         return (
-          <div className="profile-settings settings-content">
-            <h2>Profile Settings</h2>
-            <div className="form-group">
-              <label htmlFor="username">Username</label>
-              <input
-                type="text"
-                id="username"
-                placeholder="Enter your username"
-              />
-            </div>
+          <div className="profile-settings settings-content zoomIn">
             <h2>Profile Settings</h2>
             <div className="form-group">
               <label htmlFor="username">Username</label>
@@ -46,7 +37,7 @@ const SettingsPage = () => {
         );
       case "account":
         return (
-          <div className="account-settings settings-content">
+          <div className="account-settings settings-content zoomIn">
             <h2>Account Settings</h2>
             <div className="form-group">
               <label htmlFor="email">Email</label>
@@ -73,7 +64,7 @@ const SettingsPage = () => {
         );
       case "notifications":
         return (
-          <div className="notification-settings settings-content">
+          <div className="notification-settings settings-content zoomIn">
             <h2>Notification Settings</h2>
             <div className="form-group checkbox-group">
               <label htmlFor="emailNotifications">Email Notifications</label>
@@ -92,7 +83,7 @@ const SettingsPage = () => {
         );
       case "privacy":
         return (
-          <div className="privacy-settings settings-content">
+          <div className="privacy-settings settings-content zoomIn">
             <h2>Privacy Settings</h2>
             <div className="form-group">
               <label htmlFor="profileVisibility">Profile Visibility</label>
@@ -116,7 +107,7 @@ const SettingsPage = () => {
         );
       case "collaboration":
         return (
-          <div className="collaboration-settings settings-content">
+          <div className="collaboration-settings settings-content zoomIn">
             <h2>Collaboration Settings</h2>
             <div className="form-group">
               <label htmlFor="inviteCollab">Invite to Collaborate</label>
@@ -144,7 +135,7 @@ const SettingsPage = () => {
         );
       case "application":
         return (
-          <div className="application-settings settings-content">
+          <div className="application-settings settings-content zoomIn">
             <h2>Application Settings</h2>
             <div className="form-group">
               <label htmlFor="theme">Theme</label>

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

added the animation zoomIn class and keyframes
---
 src/Components/Settings/Settings.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index 901a3c6..8c2d42b 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -152,6 +152,9 @@ button:hover {
   background-color: #121026;
   padding-right: 30px;
 }
+.zoomIn {
+    animation: zoomIn 1s ease forwards;
+}
 
 @media (max-width: 768px) {
   .settings-tabs {
@@ -169,3 +172,13 @@ button:hover {
     width: 100%; 
   }
 }
+@keyframes zoomIn{
+0% {
+    opacity: 0;
+    transform: scale(0);
+}
+100% {
+    opacity: 1;
+    transform: scale(1);
+}
+}