Align input disabled, focus and hover state with figma designs

[peronczyk]

This task is related to recent WalletConnect modal feature. If user didn't have any ETH account the WalletConnect URI input should be disabled. But the disabled state does not match the figma designs: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=28292-295974&t=24HwgckDPVQi67PS-4

Also @onvisions noticed that if user clicked (focus in) any icon placed in the input's label section without clicking out (focus out) and then move the mouse in any direction the input looks focused but it shouldn't.

This is the current bad behavior:

https://github.com/user-attachments/assets/0828374a-0331-44a7-8aeb-837d1752e649

[Liubov-crypto]

A little bit different design compared to Figma:

@peronczyk please check it

[Liubov-crypto]

Also I have a question about hovering: Is the correct pattern recorded in the attached video?

[peronczyk]

A little bit different design compared to Figma:

@peronczyk please check it

Regarding the header: current task was only about the input styling. If you established that we have an issue in the current dev please create separate task. But I can say that it is not possible to display the connected app in the WalletConnect modal if user has no ETH account as he was not able to connect. So I guess the design is bad.

Also I have a question about hovering: Is the correct pattern recorded in the attached video?

No, the attached recording is about the current state. It shows the situation where the user hovers the icon but the input hovers also. And when the icon is clicked but the cursor moves up the field has darker background - like its active, but it shouldn't.

@Liubov-crypto

[Liubov-crypto]

@peronczyk LGTM.

I will create a separate task for wallet connect modal top part. But I agree that it is not possible to display the connected app in the WalletConnect modal if user has no ETH account as he was not able to connect