From f81b5957e75ae564b763f4f89f39d2e689f8ca74 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 26 Nov 2024 14:05:04 +0800
Subject: [PATCH] expose margin, integrate into TeamPanel

---
 Client/src/Components/Inputs/TextInput/index.jsx     | 12 ++++++++++++
 .../src/Components/TabPanels/Account/TeamPanel.jsx   |  7 +++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx
index ec8203656..26f051c06 100644
--- a/Client/src/Components/Inputs/TextInput/index.jsx
+++ b/Client/src/Components/Inputs/TextInput/index.jsx
@@ -78,6 +78,10 @@ const TextInput = forwardRef(
 			label = null,
 			maxWidth = "100%",
 			flex,
+			marginTop,
+			marginRight,
+			marginBottom,
+			marginLeft,
 			disabled = false,
 			hidden = false,
 		},
@@ -89,6 +93,10 @@ const TextInput = forwardRef(
 			<Stack
 				flex={flex}
 				display={hidden ? "none" : ""}
+				marginTop={marginTop}
+				marginRight={marginRight}
+				marginBottom={marginBottom}
+				marginLeft={marginLeft}
 			>
 				<Typography
 					component="h3"
@@ -147,6 +155,10 @@ TextInput.propTypes = {
 	label: PropTypes.string,
 	maxWidth: PropTypes.string,
 	flex: PropTypes.number,
+	marginTop: PropTypes.string,
+	marginRight: PropTypes.string,
+	marginBottom: PropTypes.string,
+	marginLeft: PropTypes.string,
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
 };
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 7d9171384..d44650a24 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
 import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
+import TextInput from "../../Inputs/TextInput";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
 import { networkService } from "../../../main";
@@ -338,13 +339,15 @@ const TeamPanel = () => {
 				onClose={closeInviteModal}
 				theme={theme}
 			>
-				<Field
+				<TextInput
+					marginBottom={theme.spacing(12)}
 					type="email"
 					id="input-team-member"
 					placeholder="Email"
 					value={toInvite.email}
 					onChange={handleChange}
-					error={errors.email}
+					error={errors.email ? true : false}
+					helperText={errors.email}
 				/>
 				<Select
 					id="team-member-role"