Novu•2y ago

React - Little bit confused about new INotificationCenterStyles we can pass in

Hey I saw its now discouraged to pass in a theme to the <PopoverNotificationCenter /> and we should pass in a style object to the <NovuProvider />. Previously if I wanted to change the brand colour in front of unread notifications I could pass in a theme to the PopoverNotificationCenter like this

const theme: INovuThemePopoverProvider = {
    light: {
        notificationItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            }
        }
    }
}

const theme: INovuThemePopoverProvider = {
    light: {
        notificationItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            }
        }
    }
}

How would I do this using the new using the INotificationCenterStyles interface? I had a quick play around but didn't get very far. Here's what I'm passing into the <NovuProvider>

const novuStyles: INotificationCenterStyles = {
    header: {
        title: {
            fontSize: FontSize.NormalLarge,
            fontWeight: 600,
        },
        markAsRead: {
            fontSize: FontSize.Small,
        },
    },
    notifications: {
        listItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            },
        },
    },
};

const novuStyles: INotificationCenterStyles = {
    header: {
        title: {
            fontSize: FontSize.NormalLarge,
            fontWeight: 600,
        },
        markAsRead: {
            fontSize: FontSize.Small,
        },
    },
    notifications: {
        listItem: {
            unread: {
                notificationItemBeforeBrandColor: "#3498db",
            },
        },
    },
};

I can see the header part working but I missing something for the notification part. Thanks in advance

3 Replies

Pawan Jain•2y ago

I think notificationItemBeforeBrandColor is available in theme not in style

Paweł T.•2y ago

@turtles hey, the INotificationCenterStyles allows you to write just the CSS in JS, but it defines the object structure that you need to pass to apply the styles for a particular part of the notification center component. So if you would like to update the :before pseudo item you should be able to do it like this:

const novuStyles: INotificationCenterStyles = {
    ...
    notifications: {
        listItem: {
            unread: {
                ':before': {
                   background: '#3498db'
                }
            },
        },
    },
};

const novuStyles: INotificationCenterStyles = {
    ...
    notifications: {
        listItem: {
            unread: {
                ':before': {
                   background: '#3498db'
                }
            },
        },
    },
};

turtles•2y ago

Makes sense. Thanks guys

Gaming

Programming

React - Little bit confused about new INotificationCenterStyles we can pass in