mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-23 18:19:51 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2050 from bluewave-labs/refactor/fe/tabs

Browse Source 
Unify tab styles with CustomTabList component
This commit is contained in:
Gorkem Cetin (BWL)
2025-04-11 09:22:01 -04:00
committed by GitHub
parent 211195f7b3 5c160f1844
commit 4d307c9580
4 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/Components/Tab/index.jsx Normal file
View File

@@ -0,0 +1,36 @@
import { Box, useTheme } from "@mui/material";
import { TabList } from "@mui/lab";
import PropTypes from "prop-types";
/**
* CustomTabList component
* @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();
return (
<Box
sx={{
borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
}}
>
<TabList value={value} onChange={onChange} {...props}>
{children}
</TabList>
</Box>
);
};
CustomTabList.propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
children: PropTypes.node,
};
export default CustomTabList;

37
src/Pages/Account/index.jsx
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
import { useNavigate } from "react-router";
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";
@@ -59,29 +59,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>
<CustomTabList 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}
/>
))}
</CustomTabList>
<ProfilePanel />
{user.role.includes("superadmin") && <PasswordPanel />}
{!hideTeams && <TeamPanel />}

37
src/Pages/StatusPage/Create/Components/Tabs/index.jsx
View File

@@ -1,11 +1,12 @@
// 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";
// Utils
import PropTypes from "prop-types";
import CustomTabList from "../../../../../Components/Tab";
const Tabs = ({
isCreate,
@@ -26,28 +27,20 @@ const Tabs = ({
const theme = useTheme();
return (
<TabContext value={TAB_LIST[tab]}>
<Box
sx={{
borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
<CustomTabList
onChange={(_, selected) => {
setTab(TAB_LIST.indexOf(selected));
}}
aria-label="status page tabs"
>
<TabList
onChange={(_, tab) => {
setTab(TAB_LIST.indexOf(tab));
}}
>
{TAB_LIST.map((tab, idx) => {
return (
<Tab
key={tab}
label={TAB_LIST[idx]}
value={TAB_LIST[idx]}
/>
);
})}
</TabList>
</Box>
{TAB_LIST.map((tabLabel, idx) => (
<Tab
key={tabLabel}
label={tabLabel}
value={tabLabel}
/>
))}
</CustomTabList>
{tab === 0 ? (
<Settings
tabValue={TAB_LIST[0]}

15
src/Utils/Theme/globalTheme.js
View File

@@ -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,21 +375,13 @@ 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,
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,
borderRadius: 0,
},
"&:hover": {
borderColor: theme.palette.primary.lowContrast,
@@ -442,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,
},