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

Show file tree
Hide file tree
Changes from 3 commits
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
34 changes: 34 additions & 0 deletions src/base/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,37 @@
// import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';

// export function Tabs(props: MuiTabsProps): JSX.Element {
// return (
// <MuiTabs
sudhanshutech marked this conversation as resolved.
Show resolved Hide resolved
// {...props}
// 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;

import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';

export function Tabs(props: MuiTabsProps): JSX.Element {
Expand Down
6 changes: 4 additions & 2 deletions src/theme/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import { MuiOutlinedInput } from './components/outlinedinput.modifier';
import { MuiPagination } from './components/pagination.modifier';
import { MuiSvgIcon } from './components/svgicon.modifier';
import { MuiSwitch } from './components/switch.modifier';
import { MuiTab } from './components/tab.modifier.ts';
import { MuiTab } from './components/tab.modifier';
import { MuiTabs } from './components/tabs.modifier';

export const components: Components<Theme> = {
MuiAppBar,
Expand All @@ -38,5 +39,6 @@ export const components: Components<Theme> = {
MuiSwitch,
MuiButtonGroup,
MuiButton,
MuiListItem
MuiListItem,
MuiTabs
};
18 changes: 18 additions & 0 deletions src/theme/components/tab.modifier.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Components, Theme } from '@mui/material';
import { GRAY } from '../colors';

export const MuiTab: Components<Theme>['MuiTab'] = {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: 'transparent',
color: theme.palette.text.primary,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we not have any token to use it in here?

'&.Mui-selected': {
backgroundColor: 'transparent',
color: theme.palette.mode === 'dark' ? GRAY : GRAY
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I've set it to none. I couldn't find a token that makes it transparent so I updated it to 'none'.

},
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.04)'
}
})
}
};
22 changes: 0 additions & 22 deletions src/theme/components/tab.modifier.ts.ts
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions src/theme/components/tabs.modifier.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Components, Theme } from '@mui/material';
import { GRAY } from '../colors';

export const MuiTabs: Components<Theme>['MuiTabs'] = {
styleOverrides: {
root: {
width: '100%',
marginLeft: 0
},
indicator: ({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? GRAY : GRAY
})
}
};
Loading