fix: update overlay styles when switching address

[patricio0312rev]

[Galleries] Address Switching can break page

Summary

• Styles for Overlay component have been updated to match the design here.

Steps to reproduce

1. Run the app in local mode.
2. Make sure you have php artisan horizon running.
3. Connect a wallet with NFTs but don't sign anything.
4. Try to create a gallery, and select a pair of NFTs.
5. Before clicking on Publish, change your wallet in Metamask to one without NFTs and see the magic ✨

Checklist

• I checked my UI changes against the design and there are no notable differences
• I checked my UI changes for any responsiveness issues
• I checked my (code) changes for obvious issues, debug statements and commented code
• I opened a corresponding card on Clickup for any remaining TODOs in my code
• I added a short description on how to test this PR (if necessary)
• I added a storybook entry for the component that was added (if necessary)
• Documentation (if necessary)
• Tests (if necessary)
• Ready to be merged

[shahin-hq]

Removed extra spaces: 5a45a4e

[ItsANameToo]

won't this affect other pages as well? 🤔 in the design we have a slight visual of the background, but with this change you won't see that anymore on those pages. E.g. compare the following:

collections page on develop

collections page on this pr

I think we should instead look for the reason why the gallery page is lacking the backdrop in the outlined scenario as opposed to making this general adjustment

[patricio0312rev]

@ItsANameToo fixed this issue with the following:

• After testing, noticed that we had two implementations of the Overlay component at the same time: one was for AuthOverlay, which updates with every change in Metamask, and the other one was NoNftOverlay, which updates with the number of nfts that the user owns.

The problem I noticed was that when we changed our wallets, the AuthOverlay got updated, causing the AuthOverlay to make the blur effect disappear from the Overlay component, even if it was in use by NoNftOverlay.

• I saw two solutions for this:
  • I prevent the render of AuthOverlay in case the NoNftOverlay is active, this change was made using the new displayAuthOverlay prop in our LayoutWrapper component.
  • I think we can remove the blur from the layout, however, the useEffect hook that implements this logic, also manages the scrolling of the page, which could be an issue to handle if we just base on pure CSS.

Let me know what you think, for now, will move this ticket back to Ready for review. 🌟 💜

[patricio0312rev]

Video of the solution being implemented:

Screen.Recording.2023-10-05.at.08.23.31.mov