Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(tabs): add styling to tabs #833

Closed
wants to merge 9 commits into from
+33 −24
Closed

style(tabs): add styling to tabs #833

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5537f6b
style(tabs): add styling to tabs
SAHU-01 Dec 2, 2024
2863a5e
Merge branch 'layer5io:master' into master
SAHU-01 Dec 16, 2024
cefdbaa
feat(ui): style moved to modifier
SAHU-01 Dec 16, 2024
90bf8df
feat(ui): removing unwanted code
SAHU-01 Dec 16, 2024
a14cf68
Merge branch 'layer5io:master' into master
SAHU-01 Dec 16, 2024
8a0b38d
feat(ui): updating theme
SAHU-01 Dec 16, 2024
f29f608
Merge branch 'master' of https://github.com/SAHU-01/sistent
SAHU-01 Dec 16, 2024
b348333
feat(ui): updating theme
SAHU-01 Dec 16, 2024
ea815b8
Merge branch 'layer5io:master' into master
SAHU-01 Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion src/base/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,33 @@
import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';

export function Tabs(props: MuiTabsProps): JSX.Element {
return <MuiTabs {...props} />;
return (
<MuiTabs
{...props}
sudhanshutech marked this conversation as resolved.
Show resolved Hide resolved
sx={(theme) => ({
width: '100%',
marginLeft: 0,
'& .MuiTabs-indicator': {
backgroundColor:
theme.palette.mode === 'dark'
? theme.palette.background?.default
: theme.palette.background?.brand?.hover
},
'& .MuiTab-root': {
backgroundColor: 'transparent',
color:
theme.palette.mode === 'dark' ? theme.palette.text.default : theme.palette.text.default,
'&.Mui-selected': {
backgroundColor: 'transparent',
color:
theme.palette.mode === 'dark'
? theme.palette.background?.brand
: theme.palette.background?.brand?.default
}
}
})}
/>
);
}

export default Tabs;