added light background for better hover visibility on dark theme

[abdullah5361k]

fixes: #7969

What does this PR do?

Apply a lighter background color to enhance the hover effect in dark mode.

[abdullah5361k]

@Bonapara Could you please review this pull request? I'm unsure why the last one didn't work as expected.

[Bonapara]

Thanks @abdullah5361k, can you also add back the hover on the view switcher dropdown?

CleanShot.2024-10-25.at.09.37.30.mp4

[abdullah5361k]

Thanks @abdullah5361k, can you also add back the hover on the view switcher dropdown?

@Bonapara Sure, I’ll. Apologies for the delayed response—I'm currently doing an internship with a daily 70-kilometer commute each way, which sometimes delays my replies.

[abdullah5361k]

@Bonapara, could you please take a look at my pull request and provide feedback?

[Bonapara]

Hi @abdullah5361k, thanks, looks good to me!

[Bonapara]

Thank you for contributing, and good luck with your internship! What are you doing?

[abdullah5361k]

Thank you for contributing, and good luck with your internship! What are you doing?

Thank you! I’m currently involved in projects focused on web development.

[Devessier]

I'm reviewing it and found many duplicated components in the codebase.

• The packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx component is declared to be used across the application
• This component has been duplicated (and customized) at several parts:
  • https://github.com/abdullah5361k/twenty/blob/704af6cddf5b9713a7b32723337632415e782129/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx#L17-L18
  • https://github.com/abdullah5361k/twenty/blob/704af6cddf5b9713a7b32723337632415e782129/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx#L22
• The packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx and packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx components are almost the same and may be unified.

[Devessier]

Hi @abdullah5361k, I reviewed your PR. Your fix worked well! The components you modified weren't well structured; we shouldn't rely on a css filter to apply different colors to the background and the text on hover. It's much more predictable to set explicit colors. That's the refactor I made. Thank you a lot for your time!

[oss-gg]

Awarding abdullah5361k: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/abdullah5361k

[abdullah5361k]

Hi @abdullah5361k, I reviewed your PR. Your fix worked well! The components you modified weren't well structured; we should rely on a css filter to apply different colors to the background and the text on hover. It's much more predictable to set explicit colors. That's the refactor I made. Thank you a lot for your time!

Thank you, @Devessier , for the feedback.