To resolve the issue of poor contrast on the Notes & Tasks 'block menu', you'll need to adjust the color and background properties to ensure they match the desired specifications. Here are the steps to implement the desired behavior:

1. Update Background and Text Color:

   • Navigate to /packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts and /packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts.
   • Ensure the transparent-secondary background matches the desired transparency and color.

2. Adjust Menu Item Styles:

   • In /packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx, update the MenuItemSelectColor component to use text-secondary for text color and transparent-secondary for background color.

3. Apply Backdrop Filter:

   • Add the following CSS to the menu's container style: backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);.
   • This can be done in a styled component or directly within the component's style attribute, depending on how styles are managed in the project.

These steps specifically target the contrast issue by aligning the menu's appearance with the desired aesthetic, ensuring it matches other menus in terms of text color, background, and overall visual effect.

References

twentyhq/twenty/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
twentyhq/twenty/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
twentyhq/twenty/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx

Ask Greptile

@Bonapara can I take it?

Sure, thanks @its-id! 🙏