expose margin, integrate into TeamPanel

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,
 };

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"