Add Background Blur to Input Fields in Edit Popups

[Bonapara]

Current behavior

Some input fields lack a backdrop filter and have a plain background color.

Current:

Desired:

Desired Behavior

Add the background blur to every field edit popup

backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%)
background: rgba(252, 252, 252, 0.5)

Fields to update (but do check if I missed any):

• Calendar field
• Domain name
• Address
• Json
• Left part of the phone number field

[greptile-apps[bot]]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To add the background blur to input fields in edit popups, update the styles in the relevant overlay components. Refer to OverlayBackground.ts for the backdrop filter and background styles. Specifically, add the following CSS to the input fields in the respective components:

backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
background: rgba(252, 252, 252, 0.5);

Update the following components:

• CalendarField.tsx
• DomainNameField.tsx
• AddressField.tsx
• JsonField.tsx
• PhoneNumberField.tsx (left part)

References

[shyamsundertard]

@Bonapara and @charlesBochet I'd like to work on this. Could you assign it to me, please?

[Bonapara]

Sure @shyamsundertard, thanks for contributing!

[charlesBochet]

@shyamsundertard FYI backdrop filters cannot be superposed in Chrome only one child should set it, this might be the cause of the issue

[shyamsundertard]

@shyamsundertard FYI backdrop filters cannot be superposed in Chrome only one child should set it, this might be the cause of the issue

Ok I'll take care about it.