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

Declared variants for the vertical version of tabs in the theme.

Browse Source
This commit is contained in:
Skorpios
2025-03-06 17:16:45 -08:00
parent e76c3853f3
commit 5e730acd47
2 changed files with 74 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
View File

@@ -182,39 +182,11 @@ const NotificationIntegrationModal = ({
value={tabValue}
onChange={handleChangeTab}
aria-label="Notification tabs"
sx={{
backgroundColor: theme.palette.primary.main,
'& .MuiTab-root': {
alignItems: 'flex-start',
px: 2,
fontSize: '0.9rem',
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
border: 'none',
borderBottom: 'none',
borderRight: 'none',
'&.Mui-selected': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.tertiary.main, // Match the hover background color
opacity: 1,
border: 'none',
borderBottom: 'none',
borderRight: 'none'
},
'&:hover': {
backgroundColor: theme.palette.tertiary.main,
border: 'none'
}
},
'& .MuiTabs-indicator': {
backgroundColor: 'transparent'
}
}}
>
<Tab label="Slack" />
<Tab label="Discord" />
<Tab label="Telegram" />
<Tab label="Webhooks" />
<Tab label="Slack" orientation="vertical" />
<Tab label="Discord" orientation="vertical" />
<Tab label="Telegram" orientation="vertical" />
<Tab label="Webhooks" orientation="vertical" />
</Tabs>
</Box>

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

@@ -328,35 +328,61 @@ const baseTheme = (palette) => ({
},
MuiTab: {
styleOverrides: {
root: ({ theme }) => ({
fontSize: 13,
color: theme.palette.tertiary.contrastText,
backgroundColor: theme.palette.tertiary.main,
textTransform: "none",
minWidth: "fit-content",
paddingY: theme.spacing(6),
fontWeight: 400,
borderBottom: "2px solid transparent",
borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
"&:first-of-type": { borderTopLeftRadius: "8px" },
"&:last-child": { borderTopRightRadius: "8px", 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,
},
"&:hover": {
borderColor: theme.palette.primary.lowContrast,
},
}),
root: ({ theme }) => ({
fontSize: 13,
color: theme.palette.tertiary.contrastText,
backgroundColor: theme.palette.tertiary.main,
textTransform: "none",
minWidth: "fit-content",
paddingY: theme.spacing(6),
fontWeight: 400,
borderBottom: "2px solid transparent",
borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
"&:first-of-type": { borderTopLeftRadius: "8px" },
"&:last-child": { borderTopRightRadius: "8px", 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,
},
"&:hover": {
borderColor: theme.palette.primary.lowContrast,
},
}),
},
},
variants: [
{
props: { orientation: 'vertical' },
style: ({ theme }) => ({
alignItems: 'flex-start',
padding: theme.spacing(2),
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
border: 'none',
borderBottom: 'none',
borderRight: 'none',
'&.Mui-selected': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.tertiary.main,
opacity: 1,
border: 'none',
borderBottom: 'none',
borderRight: 'none'
},
'&:hover': {
backgroundColor: theme.palette.tertiary.main,
border: 'none'
}
}),
},
],
},
MuiSvgIcon: {
styleOverrides: {
root: ({ theme }) => ({
@@ -366,13 +392,23 @@ const baseTheme = (palette) => ({
},
MuiTabs: {
styleOverrides: {
root: ({ theme }) => ({
"& .MuiTabs-indicator": {
backgroundColor: theme.palette.tertiary.contrastText,
},
}),
root: ({ theme }) => ({
"& .MuiTabs-indicator": {
backgroundColor: theme.palette.tertiary.contrastText,
},
}),
},
},
variants: [
{
props: { orientation: 'vertical' },
style: {
"& .MuiTabs-indicator": {
display: 'none',
}
},
},
],
},
MuiSwitch: {
styleOverrides: {
root: ({ theme }) => ({