[Uni Merge] Style fixes pt. 1

[W3stside]

Summary

Closes #339

WIP

Pointing at unimerge but will go after and into develop

[W3stside]

NetworkSelector dropdown only looks strange on non-mobile emulated sizes. this is my mobile view:

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[elena-zh]

Hey @W3stside , great job!

However, I can find some issues not fixed:

1. Still. I see a light boarder for the Connect header button
   
   
   Compare with the button that is exists on the Prod now:
   
   
2. I still see that Networks in the selector are not aligned (icons). Or we should leave it as it is?
   
3. Can we align arrow pointing to the recipient field better to be in line with the arrow above?
   
4. Still Network selector exceeds right screen boarder in mobile devices
   
5. Still network selector is opened 'on hover' event instead of the 'on-click' as we currently use on Prod. So when I press on the network selector twice, it remains opened until I remove a mouse from it.

Thanks

[fairlighteth]

Something I noticed:

• A weird delay on desktop, when clicking the ellipsis (...) menu button. Here I move my mouse and immediately click:

Screen.Recording.2022-04-06.at.14.17.14.mov

[fairlighteth]

@elena-zh Personally I'd leave 2) and 3). At least for now for the sake of merging.

[elena-zh]

@fairlighteth , OK! Once we merge this PR, I will create separate issues for these cases (unless we decide to leave it as it is)

[W3stside]

thanks @elena-zh

2 is how uniswap does it so i'm going with the It's just the UNI way ™️
3 is actually an improvement on production 😂 (agree its weird anyhow)

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[alfetopito]

Regarding Elena's points 2, 3 and 5:
(edit: removed screenshot as it's related to something else. Now I don't remember what I meant to put here 🤷 )

Meaning, it's intentional, and inherited from Uniswap.
In yet another words, it's a feature not a bug ;)

[alfetopito]

Thanks for the fixes!

Only note is to apply some of the changes to the mod files rather than originals otherwise they will likely be wiped on next update

[elena-zh]

OK then!
But let fix please case 1 and 4: connect to a wallet button still does not look good. Besides, it is not a good UI/UX experience when the network selector exceeds right screen boarder in mobile devices.. =)

[W3stside]

OK then! But let fix please case 1 and 4: connect to a wallet button still does not look good. Besides, it is not a good UI/UX experience when the network selector exceeds right screen boarder in mobile devices.. =)

but it doesnt for me, only does in emulated chrome
@elena-zh u see this on ur mobile device or on web eumlated?

[fairlighteth]

but it doesnt for me, only does in emulated chrome
@elena-zh u see this on ur mobile device or on web eumlated?

It at least happens on iOS simulator as well:

But this effect has been removed in our latest release (glowing effect). If it's still present here then we should be careful about not accidentally introducing it again.

[fairlighteth]

Also the extra border that appears in 'Connect a wallet' can be seen on iOS (xCode simulator). I think the issue is two competing background colors (not even padding/margin).

[W3stside]

@elena-zh @fairlighteth addressed issues 1 and 4 please post merge review

[elena-zh]

@W3stside , the button and the network selector's position look good now!
Thanks!