Refactored team tab

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -302,7 +302,6 @@ const ProfilePanel = () => {
         </Stack>
         <Divider
           aria-hidden="true"
-          className="short-divider"
           width="0"
           sx={{ marginY: theme.spacing(1) }}
         />
@@ -324,7 +323,7 @@ const ProfilePanel = () => {
           </Box>
         </Stack>
       </Stack>
-      <Divider aria-hidden="true" />
+      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6) }} />
       <Stack
         component="form"
         noValidate

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -131,9 +131,6 @@ const TeamPanel = () => {
   };
   const handleRename = () => {};
 
-  //TODO - implement save team function
-  const handleSaveTeam = () => {};
-
   // INVITE MEMBER
   const [isOpen, setIsOpen] = useState(false);
 
@@ -200,12 +197,11 @@ const TeamPanel = () => {
 
   return (
     <TabPanel value="team">
-      <form className="edit-organization-form">
+      <Stack component="form">
         <Box sx={{ alignSelf: "flex-start" }}>
           <Typography component="h1">Organization name</Typography>
         </Box>
         <Stack
-          className="row-stack"
           direction="row"
           justifyContent="flex-end"
           alignItems="center"
@@ -245,21 +241,13 @@ const TeamPanel = () => {
             }}
           />
         </Stack>
-      </form>
-      <Divider
-        aria-hidden="true"
-        className="short-divider"
-        sx={{ marginY: theme.spacing(4) }}
-      />
-      <form
-        className="edit-team-form"
+      </Stack>
+      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(4) }} />
+      <Stack
+        component="form"
         noValidate
         spellCheck="false"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: theme.gap.large,
-        }}
+        gap={theme.gap.large}
       >
         <Typography component="h1">Team members</Typography>
         <Stack direction="row" justifyContent="space-between">
@@ -307,22 +295,7 @@ const TeamPanel = () => {
           />
         </Stack>
         <BasicTable data={tableData} paginated={false} reversed={true} />
-        <Stack direction="row" justifyContent="flex-end">
-          <Box width="fit-content">
-            <ButtonSpinner
-              level="primary"
-              label="Save"
-              onClick={handleSaveTeam}
-              isLoading={false}
-              loadingText="Saving..."
-              disabled={true}
-              sx={{
-                paddingX: "40px",
-              }}
-            />
-          </Box>
-        </Stack>
-      </form>
+      </Stack>
       <Modal
         aria-labelledby="modal-invite-member"
         aria-describedby="invite-member-to-team"

Client/src/Pages/Account/index.css

@@ -19,9 +19,7 @@
   padding: 0;
   margin-top: 50px;
 }
-.account .MuiDivider-root:not(.short-divider) {
-  margin: 50px 0;
-}
+
 .account .MuiDivider-root,
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);