From 11b4039706478d61eea3e5ac3eee94cbabd12500 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Tue, 25 Mar 2025 17:55:28 -0400 Subject: [PATCH 1/5] set accounts tab height to 34px --- src/Pages/Account/index.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 48b0984f5..7ed992ef2 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -78,6 +78,10 @@ const Account = ({ open = "profile" }) => { onKeyDown={handleKeyDown} onFocus={() => handleFocus(label.toLowerCase())} tabIndex={index} + sx={{ + minHeight: "34px", + height: "34px", + }} /> ))} From 63c187ac4e92eb1560477d7b237bd10ef772e991 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Tue, 25 Mar 2025 20:11:13 -0400 Subject: [PATCH 2/5] change tab background, update hover settings and modify borderRadius --- src/Pages/Account/index.jsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 7ed992ef2..fee33585c 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -69,6 +69,20 @@ const Account = ({ open = "profile" }) => { {tabList.map((label, index) => ( { onKeyDown={handleKeyDown} onFocus={() => handleFocus(label.toLowerCase())} tabIndex={index} - sx={{ - minHeight: "34px", - height: "34px", - }} /> ))} From 79e5af12ed5810f15d6df052ab7078dbbcd9672c Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Tue, 25 Mar 2025 20:26:51 -0400 Subject: [PATCH 3/5] remove bordercolor for unselected tabs --- src/Pages/Account/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index fee33585c..5fe522796 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -77,7 +77,6 @@ const Account = ({ open = "profile" }) => { '& .MuiTab-root': { backgroundColor: theme.palette.primary.main, height: '34px', - borderColor: theme.palette.primary.lowContrast, }, '& .MuiTab-root.Mui-selected': { borderRadius: 0, From 3c1bb55b64ffcf43cd03d632be8087b0e1b2348b Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Wed, 26 Mar 2025 13:09:48 -0400 Subject: [PATCH 4/5] remove tablist borderBottom --- src/Pages/Account/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 5fe522796..14fb3b62f 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -71,7 +71,9 @@ const Account = ({ open = "profile" }) => { aria-label="account tabs" sx={{ display: 'inline-flex', - border: 1, + borderTop: 1, + borderLeft: 1, + borderRight: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`, '& .MuiTab-root': { 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 5/5] 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.map((label, index) => ( ({ 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, },