[Consumer UI Refresh] Create the Popover style Modal and switch to it for wide screens

If you haven’t already, check out our contributing guidelines for onboarding!

---

Now that the CreateMenu exists we need to display an alternate modal style depending on if we have a wide screen width. Here’s what it should look like.

Deliverables:

1. Create a new style of modal called a popover
2. It should not have a semi-transparent back drop like other modals
3. It should still close when tap outside and also close when tapping the x
4. It should be aligned with the FAB
5. It should only be visible when viewing past the responsive breakpoint

[marcaaron]

I’ve tried for a bit to get the hasBackdrop={false} prop to work and can confirm that it is not working on web.

I can’t see any reason why this shouldn’t work and see that you’ve opened an issue here. So, probably the best thing to do for now is proceed with the modal opacity 0 and hopefully we can resolve this in the future to improve the UX.

Thanks!

[marcaaron]

Correct. In that case, we will use the bottom_docked style menu like we are now.