From b729214dac902cc411f2533f97cc621dec6543ce Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Wed, 26 Mar 2025 13:30:53 -0400
Subject: [PATCH] move sx styles to global theme

---
 src/Pages/Account/index.jsx    | 15 ---------------
 src/Utils/Theme/globalTheme.js | 11 ++++++++++-
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx
index 14fb3b62f..48b0984f5 100644
--- a/src/Pages/Account/index.jsx
+++ b/src/Pages/Account/index.jsx
@@ -69,21 +69,6 @@ const Account = ({ open = "profile" }) => {
 					<TabList
 						onChange={handleTabChange}
 						aria-label="account tabs"
-						sx={{
-							display: 'inline-flex',
-							borderTop: 1,
-							borderLeft: 1,
-							borderRight: 1,
-							borderColor: theme.palette.primary.lowContrast,
-							borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
-							'& .MuiTab-root': {
-							  backgroundColor: theme.palette.primary.main,
-							  height: '34px',
-							},
-							'& .MuiTab-root.Mui-selected': {
-							  borderRadius: 0,
-							},
-						  }}
 					>
 						{tabList.map((label, index) => (
 							<Tab
diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js
index 6530e911d..f7061343b 100644
--- a/src/Utils/Theme/globalTheme.js
+++ b/src/Utils/Theme/globalTheme.js
@@ -359,7 +359,9 @@ const baseTheme = (palette) => ({
 			  root: ({ theme }) => ({
 				fontSize: theme.typography.fontSize - 1,
 				color: theme.palette.tertiary.contrastText,
-				backgroundColor: theme.palette.tertiary.main,
+				backgroundColor: theme.palette.primary.main,
+				height: '34px',
+				borderRadius: 0,
 				textTransform: "none",
 				minWidth: "fit-content",
 				padding: `${theme.spacing(6)}px ${theme.spacing(4)}px`,
@@ -378,6 +380,7 @@ const baseTheme = (palette) => ({
 				  color: theme.palette.secondary.contrastText,
 				  borderColor: theme.palette.secondary.contrastText,
 				  borderRightColor: theme.palette.primary.lowContrast,
+				  borderRadius: 0,
 				},
 				"&:hover": {
 				  borderColor: theme.palette.primary.lowContrast,
@@ -428,6 +431,12 @@ const baseTheme = (palette) => ({
 		MuiTabs: {
 			styleOverrides: {
 			  root: ({ theme }) => ({
+				display: 'inline-flex',
+				borderTop: '1px solid',
+				borderLeft: '1px solid',
+				borderRight: '1px solid',
+				borderColor: theme.palette.primary.lowContrast,
+				borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
 				"& .MuiTabs-indicator": {
 				  backgroundColor: theme.palette.tertiary.contrastText,
 				},