update accounts page to use new Tab component

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 />}