4 Replies
Pawan Jain
Pawan Jain5mo ago
@priyanka Taking this as reference https://github.com/novuhq/examples/blob/main/novu-angular-notification-center/src/app/styles.ts#L118 Did you try below code in for styles variable?
notifications: {
root: {
'.nc-notifications-list-item': {
backgroundColor: secondaryColor,
},
},
listItem: {
layout: {
borderRadius: '7px',
color: primaryTextColor,
'.mantine-Avatar-root': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'.mantine-Avatar-image': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'div:has(> .mantine-Avatar-root)': {
border: 'none',
width: '20px',
height: '20px',
minWidth: '20px',
},
},
timestamp: { color: secondaryTextColor, fontWeight: 'bold' },
dotsButton: {
path: {
fill: primaryTextColor,
},
},
unread: {
'::before': { background: unreadBackGroundColor },
},
buttons: {
primary: {
background: primaryButtonBackGroundColor,
color: primaryTextColor,
'&:hover': {
background: primaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
secondary: {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
'&:hover': {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
},
},
},
notifications: {
root: {
'.nc-notifications-list-item': {
backgroundColor: secondaryColor,
},
},
listItem: {
layout: {
borderRadius: '7px',
color: primaryTextColor,
'.mantine-Avatar-root': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'.mantine-Avatar-image': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'div:has(> .mantine-Avatar-root)': {
border: 'none',
width: '20px',
height: '20px',
minWidth: '20px',
},
},
timestamp: { color: secondaryTextColor, fontWeight: 'bold' },
dotsButton: {
path: {
fill: primaryTextColor,
},
},
unread: {
'::before': { background: unreadBackGroundColor },
},
buttons: {
primary: {
background: primaryButtonBackGroundColor,
color: primaryTextColor,
'&:hover': {
background: primaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
secondary: {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
'&:hover': {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
},
},
},
priyanka
priyanka5mo ago
Thanks @Pawan Jain , the above code snippet helped me quite a lot. I am also looking to change the fontcolor of unread notifications using the below code snippet but the color change is not being reflected, am i missing something. unread: { '::before': { background: '#256489' }, background: "#256489", fontColor:'#ffffff' }, @Support
Pawan Jain
Pawan Jain5mo ago
it should be color: "#ffffff"
priyanka
priyanka5mo ago
@Pawan Jain I tried that as well, even color is not working.
Want results from more Discord servers?
Add your server
More Posts