From d8678bb772d3e0b907da39465f5de1eca056aa3f Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Thu, 10 Apr 2025 14:50:06 -0400
Subject: [PATCH] update accounts page to use new Tab component

---
 src/Pages/Account/index.jsx | 36 +++++++++++++-----------------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx
index 48b0984f5..429b8dd4d 100644
--- a/src/Pages/Account/index.jsx
+++ b/src/Pages/Account/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
+import TabListWrapper from "../../Components/Tab";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
@@ -59,29 +60,18 @@ const Account = ({ open = "profile" }) => {
 			py={theme.spacing(12)}
 		>
 			<TabContext value={tab}>
-				<Box
-					sx={{
-						borderBottom: 1,
-						borderColor: theme.palette.primary.lowContrast,
-						"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
-					}}
-				>
-					<TabList
-						onChange={handleTabChange}
-						aria-label="account tabs"
-					>
-						{tabList.map((label, index) => (
-							<Tab
-								label={label}
-								key={index}
-								value={label.toLowerCase()}
-								onKeyDown={handleKeyDown}
-								onFocus={() => handleFocus(label.toLowerCase())}
-								tabIndex={index}
-							/>
-						))}
-					</TabList>
-				</Box>
+				<TabListWrapper value={tab} onChange={handleTabChange} aria-label="account tabs">
+					{tabList.map((label, index) => (
+						<Tab
+							label={label}
+							key={index}
+							value={label.toLowerCase()}
+							onKeyDown={handleKeyDown}
+							onFocus={() => handleFocus(label.toLowerCase())}
+							tabIndex={index}
+						/>
+					))}
+				</TabListWrapper>
 				<ProfilePanel />
 				{user.role.includes("superadmin") && <PasswordPanel />}
 				{!hideTeams && <TeamPanel />}