Edit opacity from 0.8 to 0.5 and remove forBackdropFilter

[jss475]

Update for #4836

• edit primary and secondary transparency opacities from 0.8 to 0.5
• remove forBackdropFilter from themes
• update components referencing transparency/primary and transparency/secondary to have the following backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%)

[FelixMalfait]

Thanks a lot @jss475! Your PR looks great. But I think we need to fix dark mode, it becomes even more obvious now with the changes you made

@Bonapara can you confirm adjustments we should make to dark mode?

After:

Before:

[Bonapara]

Dark mode should look like this:

To do:

• Remove the hardcoded background on search inputs that makes it look darker (Set background: transparent).
• Remove the border-top on the input when It's at the top of the menu:

• Make the input 36px instead of 38px+ (with the border)

Current behavior ↓

[FelixMalfait]

Would you mind handling those changes in the PR @jss475 🙏? Thanks a lot

[jss475]

Yup you got it @FelixMalfait!

[jss475]

@Bonapara I hardcoded the background for the ObjectFilterDropdownFilterSelect component to have background: transparent, made border-top: none, and edited the height to be 36px.

Should I have conditionally made the background transparent only in dark mode and have a different conditional to make border-top none when its at the top position?

Also, is the intended behavior to have a small padding on the bottom if there is no text that matches the filter text?

[Bonapara]

Hi @jss475,

I think background:transparent should be in both light and dark mode. Also, can you check if we need to add a border-bottom to the menu header if you remove the border-top on the search?

Regarding the padding, it should be 8px left and right, and the height should be fixed to 36px:

You can inspect this component:

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

Thanks!

[jss475]

Hey @Bonapara!

You got it! I had to add a bottom-border for the menu header. I've updated it with the latest commit.

Thanks!