Correct style of "Change Color" in Notes block menu

[Bonapara]

Current Behavior

The "Change color" menu item, accessible via the 6 dots menu on the left side of the "Enter text or type '/' for commands" prompt, exhibits two issues:

• The chevron icon is not aligned to the right edge.
• The chevron is colored as Text/Secondary.

Desired Behavior

• The chevron should be aligned to the right edge of the menu.
• The chevron color should match the Text/Tertiary.

[harshit078]

Hi @Bonaparam, can I take this up ?

[Bonapara]

Sure @harshit078, thanks for contributing!

[harshit078]

Hi @Bonapara, going through the issue I found out that BlockNote allows custom css using mantine but for chevron-right and color to secondary there are no such support. It seems that this component is built-in component in BlockNote and can't be changed. What are your views on it ?

[Bonapara]

Thanks for having a look @harshit078. Is it possible to hardcode the change? @lucasbordeau do you have any idea on this?

[harshit078]

I did tried to hardcode and implement it but couldn't get the desired results. @lucasbordeau Is there something you could suggest or throw a light on ?

[charlesBochet]

@harshit078 I think it's on our side, looks like it's CustomSideMenuOptions

[FelixMalfait]

I just checked and this seems fairly difficult, it involves replacing https://github.com/TypeCellOS/BlockNote/blob/786bd8b310fa6483f6cdae28393d682296d296ae/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/BlockColorsItem.tsx#L18 by our custom component which means more to maintain on our side and risk of conflicts as we update BlockNote. I think we should close this and maybe reconsider in 1 year but this is a high cost-to-impact task