Display QR code scanner messages in the scanner box

superhero-com / superhero-wallet

Superhero is a multi-blockchain wallet to manage crypto assets and navigate the web3 and DeFi space. Currently supporting Bitcoin, Ethereum and æternity blockchains.

https://wallet.superhero.com

ISC License

40 stars 38 forks source link

Display QR code scanner messages in the scanner box #3051

Closed peronczyk closed 5 months ago

peronczyk commented 5 months ago

This task is about refactoring the QR Code Scanner modal so the messages informing about the lack of camera access would be displayed in the camera box instead above it. This allows to:

have the modal title to be visible no matter if user has the camera access - useful since we use this modal for scanning different QR codes.
not show the spinner all the time.

Also the side spaces are now smaller to allow the scanner to be bigger.

Before:

After:

@onvisions

Liubov-crypto commented 5 months ago

LGTM. I managed to disable the camera in Chrome extension and got a proper modal for a second (screen from a video recording):

onvisions commented 5 months ago

@peronczyk @Liubov-crypto

Styling of text and warning icon updated for consistency.
Top Scan icon appearance updated to match similar items.

Designs: Scan QR modal-2 Scan QR modal-1

Figma reference link: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=31920-189838&t=Q3Abg2TTxChnOcj6-0

peronczyk commented 5 months ago

I've updated the messages colors.

Regarding the icon background color it's not that easy. Right now we can set 2 predefined variants to icon: danger and success which adds corresponding background color. But we are not able to set any BG color.

Also those success/danger variants changes the border color for the icon. I suggest to create separate task for this and create some kind of list of variants or options so it would be easier to develop it.

@onvisions