From 9e9d561ea09f716b3ce64aa166f96e0e12b87c2e Mon Sep 17 00:00:00 2001
From: Shaikh Mohd Mudassir Hussain
 <84413543+Shaikh-Mudassir@users.noreply.github.com>
Date: Fri, 6 Dec 2024 01:47:47 -0700
Subject: [PATCH]  Comments were removed and spacing was added to all the
 stacks issue #1270

---
 .../Components/TabPanels/Account/PasswordPanel.jsx    |  9 ++++-----
 .../src/Components/TabPanels/Account/ProfilePanel.jsx | 11 +++++------
 Client/src/Components/TabPanels/Account/TeamPanel.jsx |  5 ++---
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index 0ea48138e..32ab131b8 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -21,9 +21,8 @@ const PasswordPanel = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
 
-	// Define the constant for consistent gap
-	const SPACING_GAP = theme.spacing(12); // EDITED: Added a constant for gap size.
 
+	const SPACING_GAP = theme.spacing(12); 
 
 	//redux state
 	const { authToken, isLoading } = useSelector((state) => state.auth);
@@ -131,7 +130,7 @@ const PasswordPanel = () => {
 					direction="row"
 					justifyContent={"flex-start"}
 					alignItems={"center"}
-					gap={SPACING_GAP} // Replaced gap with SPACING_GAP constant
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -156,7 +155,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -182,7 +181,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
+					gap={SPACING_GAP} 
 					flexWrap={"wrap"}
 				>
 					<Typography
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 6c0c3baae..13b16df00 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -30,7 +30,6 @@ const ProfilePanel = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
 	
-	// Define the constant for consistent gap
 	const SPACING_GAP = theme.spacing(12);
 
 	//redux state
@@ -226,9 +225,9 @@ const ProfilePanel = () => {
 				className="edit-profile-form"
 				noValidate
 				spellCheck="false"
-				gap={SPACING_GAP} // Applied SPACING_GAP for consistent spacing
+				gap={SPACING_GAP} 
 			>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Box flex={0.9}>
 						<Typography component="h1">First name</Typography>
 					</Box>
@@ -243,7 +242,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Box flex={0.9}>
 						<Typography component="h1">Last name</Typography>
 					</Box>
@@ -258,7 +257,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Stack flex={0.9}>
 						<Typography component="h1">Email</Typography>
 						<Typography
@@ -278,7 +277,7 @@ const ProfilePanel = () => {
 						flex={1}
 					/>
 				</Stack>
-				<Stack direction="row">
+				<Stack direction="row" gap={SPACING_GAP}>
 					<Stack flex={0.9}>
 						<Typography component="h1">Your photo</Typography>
 						<Typography
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 6e2337370..e4ac02846 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -30,7 +30,6 @@ const TeamPanel = () => {
 
 	const theme = useTheme();
 
-	// Define the constant for consistent gap
 	const SPACING_GAP = theme.spacing(12);
 
 	const { authToken, user } = useSelector((state) => state.auth);
@@ -278,7 +277,7 @@ const TeamPanel = () => {
 				component="form"
 				noValidate
 				spellCheck="false"
-				gap={SPACING_GAP} // Added a constant Spacing gap
+				gap={SPACING_GAP} 
 			>
 				<Typography component="h1">Team members</Typography>
 				<Stack
@@ -342,7 +341,7 @@ const TeamPanel = () => {
 				theme={theme}
 			>
 				<TextInput
-					marginBottom={SPACING_GAP}  // Applied SPACING_GAP for consistent spacing
+					marginBottom={SPACING_GAP} 
 					type="email"
 					id="input-team-member"
 					placeholder="Email"