Novu•2y 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•2y ago

And what if I want another SVG?

Gali Baum•2y 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•2y 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.•2y 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•2y ago

empe•2y 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.•2y 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•2y ago

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

Pawan Jain•2y ago

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

Prosper•2y ago

Ah, perfecto! thanks @Pawan Jain

empe•2y 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•2y ago

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

empe•2y ago

Yeah

empe•2y ago

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

empe•2y ago

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

Paweł T.•2y 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•2y ago

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

empe•2y ago

Yes

Paweł T.•2y 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•2y ago

you can also disable it from the dashboard

Paweł T.•2y ago

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

Prosper•2y ago

Oh, I see.

Gaming

Programming

How to change the color of the bell?