Skip to content

Commit 48d4eae

Browse files
nebula-aacnebula-aac
authored
Merge pull request #470 from sudhanshutech/add/refactor/comp
refactor: Add and Refactor theme components
2 parents eb7b8fd + aa7613d commit 48d4eae

8 files changed

Lines changed: 170 additions & 29 deletions

‎src/theme/components.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Components, Theme } from '@mui/material';
22
import { MuiAppBar } from './components/appbar.modifiter';
3+
import { MuiButton } from './components/button.modifier';
34
import { MuiCard } from './components/card.modifier';
45
import { MuiCheckbox } from './components/checkbox.modifier';
56
import { MuiCollapse } from './components/collapse.modifier';
@@ -8,13 +9,14 @@ import { MuiDrawer } from './components/drawer.modifier';
89
import { MuiFormLabel } from './components/formlabel.modifier';
910
import { MuiIconButton } from './components/iconbutton.modifier';
1011
import { MuiLink } from './components/link.modifier';
12+
import { MuiListItem } from './components/listitem.modifier';
1113
import { MuiMenu } from './components/menu.modifier';
1214
import { MuiMenuItem } from './components/menuitem.modifier';
1315
import { MuiOutlinedInput } from './components/outlinedinput.modifier';
1416
import { MuiPagination } from './components/pagination.modifier';
1517
import { MuiSvgIcon } from './components/svgicon.modifier';
18+
import { MuiSwitch } from './components/switch.modifier';
1619
import { MuiTab } from './components/tab.modifier.ts';
17-
import { MuiToggleButton } from './components/toggle.modifier';
1820

1921
export const components: Components<Theme> = {
2022
MuiAppBar,
@@ -32,5 +34,7 @@ export const components: Components<Theme> = {
3234
MuiPagination,
3335
MuiSvgIcon,
3436
MuiTab,
35-
MuiToggleButton
37+
MuiSwitch,
38+
MuiButton,
39+
MuiListItem
3640
};

‎src/theme/components/button.modifier.ts‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
import { Components, Theme } from '@mui/material';
2-
import { CARIBBEAN_GREEN, KEPPEL, WHITE, buttonDisabled } from '../colors';
2+
import { CARIBBEAN_GREEN, WHITE, buttonDisabled } from '../colors';
33

44
export const MuiButton: Components<Theme>['MuiButton'] = {
55
styleOverrides: {
6-
root: {
7-
borderRadius: '3px',
8-
textTransform: 'none',
9-
'&.Mui-disabled': {
10-
backgroundColor: buttonDisabled.main,
11-
color: WHITE
12-
}
13-
},
14-
contained: {
15-
backgroundColor: KEPPEL,
16-
'&:hover': {
17-
backgroundColor: CARIBBEAN_GREEN,
18-
color: WHITE
19-
}
20-
},
21-
outlined: {
22-
'&:hover': {
23-
backgroundColor: CARIBBEAN_GREEN,
24-
color: WHITE
25-
}
6+
root: ({ theme }) => {
7+
const {
8+
palette: {
9+
secondary: { main }
10+
}
11+
} = theme;
12+
return {
13+
'&.MuiButton-contained': {
14+
color: WHITE,
15+
backgroundColor: main,
16+
'&:hover': {
17+
backgroundColor: CARIBBEAN_GREEN
18+
}
19+
},
20+
'&.MuiButton-outlined': {
21+
border: `1px solid ${main}`,
22+
'&:hover': {
23+
backgroundColor: CARIBBEAN_GREEN,
24+
color: WHITE
25+
}
26+
},
27+
'&.MuiButton-contained.Mui-disabled': {
28+
color: buttonDisabled.main,
29+
backgroundColor: buttonDisabled.main
30+
}
31+
};
2632
}
2733
}
2834
};

‎src/theme/components/input.modifier.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Components, Theme } from '@mui/material/styles';
2+
import { CARIBBEAN_GREEN } from '../colors';
3+
4+
export const MuiInput: Components<Theme>['MuiInput'] = {
5+
styleOverrides: {
6+
root: {
7+
'&:before': {
8+
borderBottom: '2px solid rgba(0, 0, 0, 0.5)'
9+
},
10+
'&.Mui-focused:after': {
11+
borderBottom: ` 2px solid ${CARIBBEAN_GREEN}`
12+
},
13+
'&:hover:not(.Mui-disabled):before': {
14+
borderBottom: `2px solid ${CARIBBEAN_GREEN}`
15+
}
16+
}
17+
}
18+
};

‎src/theme/components/listitem.modifier.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Components, ListItemProps, Theme } from '@mui/material';
2+
import { DARK_SLATE_GRAY, PATTERNS_BLUE } from '../colors';
3+
4+
export const MuiListItem: Components<Theme>['MuiListItem'] = {
5+
variants: [
6+
{
7+
props: { variant: 'menu' } as ListItemProps,
8+
style: {
9+
textTransform: 'none',
10+
margin: '.5rem 0rem .5rem .5rem',
11+
padding: '0rem',
12+
color: DARK_SLATE_GRAY,
13+
fontSize: '.9rem',
14+
fill: DARK_SLATE_GRAY,
15+
'&.Mui-selected': {
16+
fontWeight: 'bold',
17+
color: DARK_SLATE_GRAY,
18+
fill: DARK_SLATE_GRAY,
19+
'&:hover': {
20+
color: DARK_SLATE_GRAY,
21+
'& svg': {
22+
fill: DARK_SLATE_GRAY
23+
}
24+
}
25+
},
26+
'&:li:has(> .MuiMenuItem)': {
27+
backgroundColor: 'green'
28+
},
29+
'& svg': {
30+
marginRight: '.75rem',
31+
paddingLeft: '0rem',
32+
marginLeft: '0rem'
33+
}
34+
}
35+
},
36+
{
37+
props: { variant: 'submenu' } as ListItemProps,
38+
style: {
39+
textTransform: 'none',
40+
margin: '.0rem 0rem 0rem .5rem',
41+
justifyContent: 'center',
42+
alignItems: 'center',
43+
color: DARK_SLATE_GRAY,
44+
fontSize: '.9rem',
45+
fill: DARK_SLATE_GRAY,
46+
'&.Mui-selected': {
47+
fontWeight: 'bold',
48+
backgroundColor: PATTERNS_BLUE,
49+
color: DARK_SLATE_GRAY,
50+
fill: DARK_SLATE_GRAY,
51+
'&:hover': {
52+
color: DARK_SLATE_GRAY,
53+
'& svg': {
54+
fill: DARK_SLATE_GRAY
55+
}
56+
}
57+
},
58+
'& svg': {
59+
marginRight: '.5rem'
60+
}
61+
}
62+
}
63+
]
64+
};

‎src/theme/components/outlinedinput.modifier.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
import { Components, Theme } from '@mui/material';
2-
import { defaultPalette } from '../colors';
2+
import { outlinedInputClasses } from '@mui/material/OutlinedInput';
3+
import { CARIBBEAN_GREEN, KEPPEL } from '../colors';
34

45
export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
56
styleOverrides: {
7+
notchedOutline: {
8+
borderColor: 'rgba(0, 0, 0, 0.5)'
9+
},
610
root: {
7-
'&:hover $notchedOutline': {
8-
borderColor: defaultPalette.keppel[3]
11+
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
12+
borderColor: CARIBBEAN_GREEN
913
},
10-
'&$focused $notchedOutline': {
11-
borderColor: defaultPalette.keppel[3]
14+
[`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
15+
borderColor: CARIBBEAN_GREEN
16+
},
17+
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
18+
borderColor: KEPPEL
19+
},
20+
'&:hover .MuiOutlinedInput-notchedOutline': {
21+
borderColor: KEPPEL
1222
}
1323
}
1424
}

‎src/theme/components/switch.modifier.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Components, Theme } from '@mui/material';
2+
import { CARIBBEAN_GREEN, CHARCOAL } from '../colors';
3+
4+
export const MuiSwitch: Components<Theme>['MuiSwitch'] = {
5+
styleOverrides: {
6+
root: {
7+
'& .MuiSwitch-switchBase': {
8+
color: CHARCOAL,
9+
'&:hover': {
10+
backgroundColor: 'rgba(60, 73, 79, 0.06)'
11+
}
12+
},
13+
'& .MuiSwitch-switchBase.Mui-checked': {
14+
color: CARIBBEAN_GREEN,
15+
'&:hover': {
16+
backgroundColor: 'rgba(0, 211, 169, 0.06)'
17+
}
18+
},
19+
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
20+
backgroundColor: CARIBBEAN_GREEN
21+
}
22+
}
23+
}
24+
};

‎src/theme/components/textfield.modifier.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Components, Theme } from '@mui/material';
2+
import { CARIBBEAN_GREEN } from '../colors';
3+
4+
export const MuiTextField: Components<Theme>['MuiTextField'] = {
5+
styleOverrides: {
6+
root: {
7+
'--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
8+
'--TextField-brandBorderHoverColor': CARIBBEAN_GREEN,
9+
'--TextField-brandBorderFocusedColor': CARIBBEAN_GREEN,
10+
'& label.Mui-focused': {
11+
color: 'var(--TextField-brandBorderFocusedColor)'
12+
}
13+
}
14+
}
15+
};

‎src/theme/components/toggle.modifier.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Components, Theme } from '@mui/material';
22
import { CARIBBEAN_GREEN, CHARCOAL } from '../colors';
33

4-
export const MuiToggleButton: Components<Theme>['MuiToggleButton'] = {
4+
export const MuiSwitch: Components<Theme>['MuiSwitch'] = {
55
styleOverrides: {
66
root: {
77
'& .MuiSwitch-switchBase': {

0 commit comments

Comments
 (0)