Improved menu item button design

[Bonapara]

trafficstars

Current Behavior

• Menu item's icon buttons look too large.
• its background color in dark mode seems odd.

Desired Behavior

In menu items, replace "floating buttons" with tertiary "light icon buttons":

https://github.com/twentyhq/twenty/assets/19412894/f61314cb-968d-410c-9b20-e8839f2acb5e

Also, replace the "icon group buttons" with multiple "light icon buttons" placed side by side, with a 2px gap between them:

https://github.com/twentyhq/twenty/assets/19412894/fe8e5acb-a27d-4ac9-9589-f32b68f0e584

Make sure the gap between the text and buttons is 4px. The icon buttons should never be on top of the text as their background is transparent.

Update the revised Menu Item component:

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=2979-174004&mode=design&t=9XKex9M2nYivWERq-11

Credits ;)

Thanks to @Kanav-Arora 🙌

[CzhCN0]

@Bonapara I believe I can complete this optimization. However, how do we intend to handle the possibility of overflowing text?

[Kanav-Arora]

@Bonapara I believe I can complete this optimization. However, how do we intend to handle the possibility of overflowing text?

Hi @CzhCN0 In this issue we'll be replacing floating button with light icon buttons so text will not overflow currently its not overflowing but being overlayed by floating buttons. So there's a prebuilt component for light icon buttons

[CzhCN0]

Hi @CzhCN0 In this issue we'll be replacing floating button with light icon buttons so text will not overflow currently its not overflowing but being overlayed by floating buttons. So there's a prebuilt component for light icon buttons

Hi @Kanav-Arora Thank you for your response. I have pushed the code; please take a look and let me know if I misunderstood anything.

[Kanav-Arora]

Hi @CzhCN0 looks good to me but @charlesBochet reviews and merge the code. But great work with LightButtonGroup