[landing] Update WalletConnect CSS override
Summary:
The WalletConnect modal has been reskinned. I redid our CSS override to make sure that the border between our bottom sheet and the WebView on native is clean.
Because the new modal uses even more DOM shadow roots, I was unable to override the CSS from our project. I needed to move the CSS override to occur inside the shadow root.
To make sure the border was clean, I had to force the modal to be flush with the top of the frame. I did that by eliminating padding and using align-items: flex-start.
I also had to eliminate the border-radius at the top of the modal. I was able to do this by overriding a CSS variable.
Depends on D9435
Test Plan:
I tested the WalletConnect modal:
- Tested iOS and Android physical devices
- Tested in a public staging environment (comm.domains)
- Tested the QR code scan feature on web
- Tested expanding to see "All wallets"
- Tested selecting a wallet (Rainbow)
- Tested searching for a wallet by typing a query
Some videos of the testing can be seen in the final diff in the stack.
Reviewers: rohan, atul, ginsu
Reviewed By: atul
Subscribers: tomek, wyilio
Differential Revision: https://phab.comm.dev/D9436