From ecd1282c4d5ee81d21ff8168d174fdcf96f246e3 Mon Sep 17 00:00:00 2001
From: Shaikh Mohd Mudassir Hussain
 <84413543+Shaikh-Mudassir@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:27:02 -0700
Subject: [PATCH 1/2] Added a gap between label and inputs #1270

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

diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index ae322156c..0ea48138e 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -21,6 +21,10 @@ 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.
+
+
 	//redux state
 	const { authToken, isLoading } = useSelector((state) => state.auth);
 
@@ -127,7 +131,7 @@ const PasswordPanel = () => {
 					direction="row"
 					justifyContent={"flex-start"}
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} // Replaced gap with SPACING_GAP constant
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -152,7 +156,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
 					flexWrap={"wrap"}
 				>
 					<Typography
@@ -178,7 +182,7 @@ const PasswordPanel = () => {
 				<Stack
 					direction="row"
 					alignItems={"center"}
-					gap={theme.spacing(8)}
+					gap={SPACING_GAP} //Replaced gap with SPACING_GAP constant
 					flexWrap={"wrap"}
 				>
 					<Typography
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 9c00f6c02..6c0c3baae 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -29,6 +29,9 @@ import Dialog from "../../Dialog";
 const ProfilePanel = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
+	
+	// Define the constant for consistent gap
+	const SPACING_GAP = theme.spacing(12);
 
 	//redux state
 	const { user, authToken, isLoading } = useSelector((state) => state.auth);
@@ -223,7 +226,7 @@ const ProfilePanel = () => {
 				className="edit-profile-form"
 				noValidate
 				spellCheck="false"
-				gap={theme.spacing(20)}
+				gap={SPACING_GAP} // Applied SPACING_GAP for consistent spacing
 			>
 				<Stack direction="row">
 					<Box flex={0.9}>
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 74fae01c6..6e2337370 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -30,6 +30,9 @@ const TeamPanel = () => {
 
 	const theme = useTheme();
 
+	// Define the constant for consistent gap
+	const SPACING_GAP = theme.spacing(12);
+
 	const { authToken, user } = useSelector((state) => state.auth);
 	//TODO
 	// const [orgStates, setOrgStates] = useState({
@@ -228,7 +231,7 @@ const TeamPanel = () => {
 			{/* <Stack component="form">
         <Box sx={{ alignSelf: "flex-start" }}>
           <Typography component="h1">Organization name</Typography>
-        </Box>
+        </Box>	
         <Stack
           direction="row"
           justifyContent="flex-end"
@@ -275,7 +278,7 @@ const TeamPanel = () => {
 				component="form"
 				noValidate
 				spellCheck="false"
-				gap={theme.spacing(12)}
+				gap={SPACING_GAP} // Added a constant Spacing gap
 			>
 				<Typography component="h1">Team members</Typography>
 				<Stack
@@ -339,7 +342,7 @@ const TeamPanel = () => {
 				theme={theme}
 			>
 				<TextInput
-					marginBottom={theme.spacing(12)}
+					marginBottom={SPACING_GAP}  // Applied SPACING_GAP for consistent spacing
 					type="email"
 					id="input-team-member"
 					placeholder="Email"

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 2/2]  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"