fix(modal): use non-transform properties to prevent modal from blurring

[crookse-cl]

Summary

I noticed the Modal component is blurry on some screens while working with the ConnectButton component. Looked into it and noticed it uses transform CSS properties. Although using these properties in conjunction with Framer Motion are probably more performant than CPU-rendered methods, I'm proposing we move the Modal component away from transform CSS properties and use a combination of width, flexbox, and position CSS properties to create the same effect, but with a higher level of accessibility. Thoughts?

Changes made

• Removed transform CSS properties
• Combined BackgroundLayer and Wrapper into a single ModalScreen component
  • This change also renames Wrapper to ModalAnimator discussed in the next bullet below
• Added ModalAnimator to only provide animations for the modal
  • The modal contents are now contained in a ModalContents component which provides the styles that the Wrapper component provided (background color, border radius, etc.)
• Added class names to the components (e.g., modal-screen) to identify them faster in dev tools. Wondering if these names should be more unique?

Cons to the above changes

• When the Modal changes from desktop to mobile version on window resize events, the animation isn't as smooth as it is in the original implementation. However, my argument for this being an ok thing is users aren't really going to be resizing their windows and seeing this jumpiness from desktop to mobile version all the time.
• Rendering tasks are moved more towards the CPU

How to test

• Pull down the branch
• Build the lib
• Import the ConnectButton component from the built lib
• Test the component in Chrome, Safari, Firefox, etc.
  • Behvaior should be the same as it is in the main branch

Questions

• I have a TODO on line 95 in the Modal.tsx file. I see the opacity stops at 0.4, but it's causing the opacity animation to pause. Wondering if the 0.4 value is intentional as a workaround for something, so I added a comment instead of changing the value.
  • Steps to reproduce the pause are: Click the ConnectButton component and immediately click the BackgroundLayer component when it appears.
  • It seems the hidden variant is applied at the same time the shown variant is running and it causes the Modal to stay on the screen with a 0.4 opacity.

Other topics for discussion

• Reduced Motion
  • With accessibility in mind, maybe we look into introducing a reduced motion version of the modal as well.
• Mobile viewport orientation accomodation
  • I noticed the Modal component's mobile version is triggered on window width. This means mobile devices oriented in landscape mode might not trigger the mobile version which could cause the Modal component to go outside the bounds of the viewport. Maybe we look at:
    • locking the position of the Modal component so that it only works in portrait mode;
    • expanding the Modal to be the width and height of the entire viewport at specific heights/widths; or
    • some other option to make the Modal component more cross-compatible and/or feeling more native to the device it's being shown on

[7i7o]

Comments on topics raised:

TODO on line 95 in Modal.tsx: Yes, we should add that as an issue to fix because it happens in the package already

Reduced Motion: Nice feat to add. Would love to see some OSS contrib there 😊

Mobile viewport orientation: We can talk about choices. Also an issue that could be added to the repo.