Novu•2y ago

Change new notification dot in Notification center

I using the react plugin and have been trying to change the colour of the small red dot that appears on the react notification centre and the dot on unread notifications (they seem to be the same) I've try using the props on the NotificationBell

<NotificationBell
  unseenBadgeColor={"#283CD7"}
  unseenBadgeBackgroundColor={"#283CD7"}
  colorScheme={"light"}
  unseenCount={unseenCount}
/>

<NotificationBell
  unseenBadgeColor={"#283CD7"}
  unseenBadgeBackgroundColor={"#283CD7"}
  colorScheme={"light"}
  unseenCount={unseenCount}
/>

and using the INotificationCenterStyles styles.I can change the background colour but not the actual dot. Inspecting element i can see I need to change the fill on this

<rect x="1.5" y="1.5" width="13" height="13" rx="6.5" fill="url(#paint0_linear_1722_2699)" stroke="#FFFFFF" stroke-width="3"></rect>

<rect x="1.5" y="1.5" width="13" height="13" rx="6.5" fill="url(#paint0_linear_1722_2699)" stroke="#FFFFFF" stroke-width="3"></rect>

Any one had some luck changing this icon or colour?

2 Replies

Pawan Jain•2y ago

@turtles Yes I tried it is not working for me as well. @paweltymczuk anything we missing?

Paweł T.•2y ago

hey @turtles 👋 if it's not working please fill the issue on GH... Another way to style any component in the notification center is to use the styles prop on the NovuProvider, so you can do it like this:

<NovuProvider
   styles={{
      bellButton: {
         dot: {
            '> rect': {
                fill: 'green',
              },
         }
      }
   }}

<NovuProvider
   styles={{
      bellButton: {
         dot: {
            '> rect': {
                fill: 'green',
              },
         }
      }
   }}

docs: https://docs.novu.co/notification-center/custom-styling

Gaming

Programming

Change new notification dot in Notification center