Novu•15mo ago

How to change the color of the bell?

I wish to change the color of the bell icon of the notification center

24 Replies

@emilpearce are you using react/iframe?

@emilpearce this should work:

styles={{
          bellButton: {
            root: {
              svg: {
                color: 'red',
              },
            },
          },
        }}

styles={{
          bellButton: {
            root: {
              svg: {
                color: 'red',
              },
            },
          },
        }}

either from the iframe or React NovuProvider component

empe•15mo ago

And what if I want another SVG?

Gali Baum•15mo ago

@emilpearce You could have your own bell component https://docs.novu.co/notification-center/react/react-components#customizing-the-ui

React Component | Novu

Novu provides the @novu/notification-center a React library that helps to add a fully functioning notification center to your web application in minutes. Let's do a quick recap on how we can easily use it in your application.

empe•15mo ago

I want also: - Change the size of the bell - Change the color of the dot - Change the stroke-width of the dot styles = { bellButton: { dot: { color: 'white', }, root: { svg: { color: 'white', } } } @paweltymczuk can you help me here?

Paweł T.•15mo ago

styles={{
          bellButton: {
            root: {
              svg: {
                width: '40px',
                height: '40px',
              },
            },
            dot: {
               rect: {
                  fill: 'green',
                 strokeWidth: '2px'
               }
            }
          },
        }}

styles={{
          bellButton: {
            root: {
              svg: {
                width: '40px',
                height: '40px',
              },
            },
            dot: {
               rect: {
                  fill: 'green',
                 strokeWidth: '2px'
               }
            }
          },
        }}

@emilpearce this should do the thing

empe•15mo ago

empe•15mo ago

styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '40px',
          height: '40px',
        }
      },
      dot: {
        rect: {
          fill: '#1976d2',
          strokeWidth: '1px',
        }
      },      
    }   
  };

styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '40px',
          height: '40px',
        }
      },
      dot: {
        rect: {
          fill: '#1976d2',
          strokeWidth: '1px',
        }
      },      
    }   
  };

Paweł T.•15mo ago

@emilpearce the dot is not positioned properly, you have to adjust it some other values like:

top: calc(-3% - 10px);
right: calc(10% - 10px);

top: calc(-3% - 10px);
right: calc(10% - 10px);

10px assumes that the dot size is 20px, so it's half it's size

Prosper•15mo ago

@emilpearce @Pawan Jain any of you willing to write an article on this? It's a recurrent challenge.

Pawan Jain•15mo ago

Yes, I am working on an example app Hope to complete end of this week

Prosper•15mo ago

Ah, perfecto! thanks @Pawan Jain

empe•15mo ago

We need to have someone presenting all the possible variations of customisation 😄

styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white'
        }
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '#1976d2',
        '&:hover': { backgroundColor: 'rgb(221, 0, 49)' },
        '.some_class': { color: 'red' },
      }
    },
    layout: {
      root: {
        backgroundColor: '#1976d2',
      }
    },
    popover: {
      arrow: {
        backgroundColor: '#1976d2',
        border: '#1976d2',
      }
    },
  };

styles = {
    bellButton: {
      root: {
        svg: {
          color: 'white',
          width: '45px',
          height: '40px',
          fill: 'white'
        }
      },
      dot: {
        rect: {
          fill: 'rgb(221, 0, 49)',
          strokeWidth: '0.2',
          stroke: 'white',
          width: '3.5px',
          height: '3.5px',
        },
        left: '40%',
      },
    },
    header: {
      root: {
        backgroundColor: '#1976d2',
        '&:hover': { backgroundColor: 'rgb(221, 0, 49)' },
        '.some_class': { color: 'red' },
      }
    },
    layout: {
      root: {
        backgroundColor: '#1976d2',
      }
    },
    popover: {
      arrow: {
        backgroundColor: '#1976d2',
        border: '#1976d2',
      }
    },
  };

Prosper•15mo ago

Yes, I think we can all review Pawan's submission to ensure it has all the possible variations

empe•15mo ago

Yeah

empe•15mo ago

I want to change the text color and the cog icon, also, I wish to disable the option to modify the preferences

empe•15mo ago

Can any of you folks help me? That's my current code

Paweł T.•15mo ago

the cog icon could be updated with path like: header.cog and time text with notifications.listItem.timestamp the whole list of components could be find in this file: packages/notification-center/src/store/styles/styles-provider.types.ts

Prosper•15mo ago

Disable the option to modify the preference. You mean to prevent this from showing up?

empe•15mo ago

Yes

Paweł T.•15mo ago

there is a prop on the NotificationCenter component that allows to hide it: showUserPreferences like:

<NotificationCenter
  ...
  showUserPreferences={false}
/>

<NotificationCenter
  ...
  showUserPreferences={false}
/>

should do the thing

Prosper•15mo ago

you can also disable it from the dashboard

Paweł T.•15mo ago

it will disable just one template, but the preferences settings will be still visible in the NC

Prosper•15mo ago

Oh, I see.

Gaming

Programming

How to change the color of the bell?