How to change the color of the bell?

empe · 2023-04-16T12:50:15.065Z

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

P

Pawan Jain•4/16/23, 1:18 PM

@emilpearce are you using react/iframe?

P

Paweł T.•4/16/23, 1:39 PM

@emilpearce this should work:

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

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

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

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

either from the iframe or React

NovuProvider

NovuProvider

NovuProvider

NovuProvider component

PPaweł T.@emilpearce this should work: ``` styles={{ bellButton: { ...

E

empeOP•4/16/23, 1:54 PM

And what if I want another SVG?

Eempe And what if I want another SVG?

G

Gali Baum•4/16/23, 1:57 PM

@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.

E

empeOP•4/18/23, 9:24 AM

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',
}
}
}

E

empeOP•4/18/23, 9:25 AM

@paweltymczuk can you help me here?

P

Paweł T.•4/18/23, 9:34 AM

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'
               }
            }
          },
        }}

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'
               }
            }
          },
        }}

P

Paweł T.•4/18/23, 9:34 AM

@emilpearce this should do the thing

PPaweł T.``` styles={{ bellButton: { root: { svg: { ...

E

empeOP•4/18/23, 2:25 PM

E

empeOP•4/18/23, 2:25 PM

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',
        }
      },      
    }   
  };

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',
        }
      },      
    }   
  };

P

Paweł T.•4/18/23, 2:47 PM

@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);

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

P

Prosper•4/19/23, 10:24 AM

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

P

Pawan Jain•4/19/23, 10:24 AM

Yes, I am working on an example app

P

Pawan Jain•4/19/23, 10:24 AM

Hope to complete end of this week

P

Prosper•4/19/23, 10:25 AM

Ah, perfecto! thanks @Pawan Jain

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

E

empeOP•4/19/23, 10:29 AM

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

E

empeOP•4/19/23, 10:31 AM

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',
      }
    },
  };

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',
      }
    },
  };

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

P

Prosper•4/19/23, 10:31 AM

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

PProsper Yes, I think we can all review Pawan's submission to ensure it has all the possi...

E

empeOP•4/19/23, 10:31 AM

Yeah

E

empeOP•4/19/23, 11:26 AM

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

E

empeOP•4/19/23, 11:26 AM

Can any of you folks help me?

Eempe ```javascript styles = { bellButton: { root: { svg: { ...

E

empeOP•4/19/23, 11:26 AM

That's my current code

P

Paweł T.•4/19/23, 11:33 AM

the cog icon could be updated with path like:

header.cog

header.cog

header.cog

header.cog and time text with

notifications.listItem.timestamp

notifications.listItem.timestamp

notifications.listItem.timestamp

notifications.listItem.timestamp

P

Paweł T.•4/19/23, 11:33 AM

the whole list of components could be find in this file:

packages/notification-center/src/store/styles/styles-provider.types.ts

packages/notification-center/src/store/styles/styles-provider.types.ts

packages/notification-center/src/store/styles/styles-provider.types.ts

packages/notification-center/src/store/styles/styles-provider.types.ts

Eempe I want to change the text color and the cog icon, also, I wish to disable the op...

P

Prosper•4/19/23, 11:41 AM

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

PProsper Disable the option to modify the preference. You mean to prevent this from showi...

E

empeOP•4/19/23, 11:54 AM

Yes

P

Paweł T.•4/19/23, 11:55 AM

there is a prop on the

NotificationCenter

NotificationCenter

NotificationCenter

NotificationCenter component that allows to hide it:

showUserPreferences

showUserPreferences

showUserPreferences

showUserPreferences

P

Paweł T.•4/19/23, 11:56 AM

like:

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

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

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

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

P

Paweł T.•4/19/23, 11:56 AM

should do the thing

P

Prosper•4/19/23, 11:57 AM

you can also disable it from the dashboard

PProsper you can also disable it from the dashboard

P

Paweł T.•4/19/23, 11:58 AM

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

PPaweł T.it will disable just one template, but the preferences settings will be still vi...

P

Prosper•4/19/23, 11:58 AM

Oh, I see.

How to change the color of the bell?

Similar Threads

Similar Threads

Similar Threads