From 6421080a95a0911f89c7d18d76b5a54569680cea Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 14:48:10 -0400 Subject: [PATCH 01/10] create new Tablistwrapper component --- src/Components/Tab/index.jsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/Components/Tab/index.jsx diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx new file mode 100644 index 000000000..40f075a5b --- /dev/null +++ b/src/Components/Tab/index.jsx @@ -0,0 +1,28 @@ +import { Box, useTheme } from "@mui/material"; +import { TabList } from "@mui/lab"; +import PropTypes from "prop-types"; + +const TabListWrapper = ({ value, onChange, children, ...props }) => { + const theme = useTheme(); + + return ( + + + {children} + + + ); +}; + +TabListWrapper.propTypes = { + value: PropTypes.string, + onChange: PropTypes.func, + children: PropTypes.node, +}; + +export default TabListWrapper; 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 02/10] 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)} > - - - {tabList.map((label, index) => ( - handleFocus(label.toLowerCase())} - tabIndex={index} - /> - ))} - - + + {tabList.map((label, index) => ( + handleFocus(label.toLowerCase())} + tabIndex={index} + /> + ))} + {user.role.includes("superadmin") && } {!hideTeams && } From d93c9c3bc9a8f4648441ff6b1af072230d6adf82 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 14:52:04 -0400 Subject: [PATCH 03/10] update status create page to use Tab component --- .../Create/Components/Tabs/index.jsx | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx index da2da9acf..5ad27622d 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx @@ -1,11 +1,13 @@ // Components import { TabContext, TabList } from "@mui/lab"; import { Box, Tab, useTheme } from "@mui/material"; +import TabListWrapper from "../../../../../Components/Tab"; import Settings from "./Settings"; import Content from "./Content"; // Utils import PropTypes from "prop-types"; +import TabListWrapper from "../../../../../Components/Tab"; const Tabs = ({ isCreate, @@ -26,28 +28,20 @@ const Tabs = ({ const theme = useTheme(); return ( - { + setTab(TAB_LIST.indexOf(selected)); }} + aria-label="status page tabs" > - { - setTab(TAB_LIST.indexOf(tab)); - }} - > - {TAB_LIST.map((tab, idx) => { - return ( - - ); - })} - - + {TAB_LIST.map((tabLabel, idx) => ( + + ))} + {tab === 0 ? ( Date: Thu, 10 Apr 2025 15:25:47 -0400 Subject: [PATCH 04/10] fix tab component import --- src/Pages/StatusPage/Create/Components/Tabs/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx index 5ad27622d..32305f1af 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx @@ -1,7 +1,6 @@ // Components import { TabContext, TabList } from "@mui/lab"; import { Box, Tab, useTheme } from "@mui/material"; -import TabListWrapper from "../../../../../Components/Tab"; import Settings from "./Settings"; import Content from "./Content"; From 8af4fd8e3ea47284c8ad6e93648edf01d527ec3d Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 17:41:54 -0400 Subject: [PATCH 05/10] change component name for clarity --- src/Components/Tab/index.jsx | 6 +++--- src/Pages/Account/index.jsx | 6 +++--- src/Pages/StatusPage/Create/Components/Tabs/index.jsx | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx index 40f075a5b..c2267de3d 100644 --- a/src/Components/Tab/index.jsx +++ b/src/Components/Tab/index.jsx @@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material"; import { TabList } from "@mui/lab"; import PropTypes from "prop-types"; -const TabListWrapper = ({ value, onChange, children, ...props }) => { +const CustomTabList = ({ value, onChange, children, ...props }) => { const theme = useTheme(); return ( @@ -19,10 +19,10 @@ const TabListWrapper = ({ value, onChange, children, ...props }) => { ); }; -TabListWrapper.propTypes = { +CustomTabList.propTypes = { value: PropTypes.string, onChange: PropTypes.func, children: PropTypes.node, }; -export default TabListWrapper; +export default CustomTabList; diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index 429b8dd4d..d39d8c4cb 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -3,7 +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 CustomTabList from "../../Components/Tab"; import TabContext from "@mui/lab/TabContext"; import TabList from "@mui/lab/TabList"; import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel"; @@ -60,7 +60,7 @@ const Account = ({ open = "profile" }) => { py={theme.spacing(12)} > - + {tabList.map((label, index) => ( { tabIndex={index} /> ))} - + {user.role.includes("superadmin") && } {!hideTeams && } diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx index 32305f1af..7e54850eb 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx @@ -6,7 +6,7 @@ import Content from "./Content"; // Utils import PropTypes from "prop-types"; -import TabListWrapper from "../../../../../Components/Tab"; +import CustomTabList from "../../../../../Components/Tab"; const Tabs = ({ isCreate, @@ -27,7 +27,7 @@ const Tabs = ({ const theme = useTheme(); return ( - { setTab(TAB_LIST.indexOf(selected)); }} @@ -40,7 +40,7 @@ const Tabs = ({ value={tabLabel} /> ))} - + {tab === 0 ? ( Date: Thu, 10 Apr 2025 17:46:37 -0400 Subject: [PATCH 06/10] remove ununsed imports --- src/Pages/Account/index.jsx | 1 - src/Pages/StatusPage/Create/Components/Tabs/index.jsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Pages/Account/index.jsx b/src/Pages/Account/index.jsx index d39d8c4cb..c3e2be2f1 100644 --- a/src/Pages/Account/index.jsx +++ b/src/Pages/Account/index.jsx @@ -5,7 +5,6 @@ import { useSelector } from "react-redux"; import { Box, Tab, useTheme } from "@mui/material"; import CustomTabList from "../../Components/Tab"; import TabContext from "@mui/lab/TabContext"; -import TabList from "@mui/lab/TabList"; import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel"; import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel"; import TeamPanel from "../../Components/TabPanels/Account/TeamPanel"; diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx index 7e54850eb..5f5433bb6 100644 --- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx +++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx @@ -1,6 +1,6 @@ // Components -import { TabContext, TabList } from "@mui/lab"; -import { Box, Tab, useTheme } from "@mui/material"; +import { TabContext } from "@mui/lab"; +import { Tab, useTheme } from "@mui/material"; import Settings from "./Settings"; import Content from "./Content"; From b300c1b8300bba1cf023f0e1d510b39bc6ee30f0 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 17:51:14 -0400 Subject: [PATCH 07/10] add json doc for customtablist component --- src/Components/Tab/index.jsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx index c2267de3d..6edfc8340 100644 --- a/src/Components/Tab/index.jsx +++ b/src/Components/Tab/index.jsx @@ -2,6 +2,26 @@ import { Box, useTheme } from "@mui/material"; import { TabList } from "@mui/lab"; import PropTypes from "prop-types"; +/** + * CustomTabList component + * + * Wraps MUI's TabList inside a Box to apply consistent styling, specifically a bottom border, + * while avoiding the default top, left, and right borders applied through global MuiTabs overrides. + * This is used to match our tab layout across pages like Account and StatusPage. + * + * @component + * @example + * + * + * + * + * + * @param {string} value - The currently selected tab's value. + * @param {function} onChange - Callback when a different tab is selected. + * @param {React.ReactNode} children - Tab components to render inside the TabList. + * @param {object} props - Additional props passed to the TabList component. + */ + const CustomTabList = ({ value, onChange, children, ...props }) => { const theme = useTheme(); From 71b71b4ee90c28ce8a39a26f62dc577954798696 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 18:29:04 -0400 Subject: [PATCH 08/10] remove borders and bg colors from tab --- src/Utils/Theme/globalTheme.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js index 306ed3466..adf2a35f5 100644 --- a/src/Utils/Theme/globalTheme.js +++ b/src/Utils/Theme/globalTheme.js @@ -386,7 +386,6 @@ const baseTheme = (palette) => ({ borderRightColor: theme.palette.primary.lowContrast, }, "&.Mui-selected": { - backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText, borderColor: theme.palette.secondary.contrastText, borderRightColor: theme.palette.primary.lowContrast, From 6b5460c75cca1d56f38fabf31f9476848d194942 Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 18:29:31 -0400 Subject: [PATCH 09/10] update global theme --- src/Utils/Theme/globalTheme.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js index adf2a35f5..5e3030d6c 100644 --- a/src/Utils/Theme/globalTheme.js +++ b/src/Utils/Theme/globalTheme.js @@ -368,7 +368,6 @@ const baseTheme = (palette) => ({ root: ({ theme }) => ({ fontSize: theme.typography.fontSize - 1, color: theme.palette.tertiary.contrastText, - backgroundColor: theme.palette.primary.main, height: '34px', minHeight: '34px', borderRadius: 0, @@ -376,10 +375,6 @@ const baseTheme = (palette) => ({ minWidth: "fit-content", padding: `${theme.spacing(6)}px ${theme.spacing(4)}px`, fontWeight: 400, - borderBottom: `${theme.shape.borderThick}px solid transparent`, - borderRight: `${theme.shape.borderRadius / 2}px solid ${theme.palette.primary.lowContrast}`, - "&:first-of-type": { borderTopLeftRadius: theme.shape.borderRadius * 4 }, - "&:last-child": { borderTopRightRadius: theme.shape.borderRadius * 4, borderRight: 0 }, "&:focus-visible": { color: theme.palette.primary.contrastText, borderColor: theme.palette.tertiary.contrastText, @@ -387,9 +382,6 @@ const baseTheme = (palette) => ({ }, "&.Mui-selected": { color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, - borderRightColor: theme.palette.primary.lowContrast, - borderRadius: 0, }, "&:hover": { borderColor: theme.palette.primary.lowContrast, @@ -441,11 +433,7 @@ const baseTheme = (palette) => ({ 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`, + borderRadius: 0, "& .MuiTabs-indicator": { backgroundColor: theme.palette.tertiary.contrastText, }, From 5c160f184450b812c16d37d755ee4c282cc8de0d Mon Sep 17 00:00:00 2001 From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca> Date: Thu, 10 Apr 2025 18:32:41 -0400 Subject: [PATCH 10/10] update json doc for customtablist --- src/Components/Tab/index.jsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx index 6edfc8340..97bb25c7f 100644 --- a/src/Components/Tab/index.jsx +++ b/src/Components/Tab/index.jsx @@ -4,18 +4,6 @@ import PropTypes from "prop-types"; /** * CustomTabList component - * - * Wraps MUI's TabList inside a Box to apply consistent styling, specifically a bottom border, - * while avoiding the default top, left, and right borders applied through global MuiTabs overrides. - * This is used to match our tab layout across pages like Account and StatusPage. - * - * @component - * @example - * - * - * - * - * * @param {string} value - The currently selected tab's value. * @param {function} onChange - Callback when a different tab is selected. * @param {React.ReactNode} children - Tab components to render inside the TabList.