Visual issues on mobile version

[tuliomir]

Below are some issues found for the new UI during the QA process for the v0.21.0 release:

Note: The smallest device viewport used for the mobile version emulation is the iPhone SE ( 375px x 667px ).

1) Mobile Search when on light theme

( #359 ) The input color is white, with a white background, making the contents unreadable

2) Mobile Token Details info

( #360 ) The informative tooltip is not showing properly in the mobile version, when it is clicked

3) Mobile DAG screen with menu is larger than viewport

( #364 ) When the DAG screen is being displayed, clicking on the menu makes the screen larger that the viewing area, creating a lateral scroll

4) Token Details have no tx pagination

( #365 ) The current UI has pagination for the transacions inside the "Token Details" screen. This was not added on the Figma, and should be present.

5) Mobile Network Screen "Synchronizing" not very useful

( ℹ️ This is a suggestion for future improvement on Figma, not an issue to be fixed now ) The "Synchronizing" icon appears very fast and is barely clickable on mobile. We could consider another way to exhibit this information.

6) Amount of actions should have parenthesis

( #366 ) In the Transaction Details screen, when viewing a nano contract. For example, in the print below ( from this transaction ), the text displayed should be "Actions (2)"

7) Text alignment on feature details

( #367 ) When visiting the Features screen and clicking on the "Column description" box, the resulting visualization is not aligned properly

8) Footer should be always be at the bottom of the screen

( #368 )

9) Token balance texts should be fully bold

( #369 ) Currently only the token symbol is displayed in bold. Also, check if the fonts are the same on tx details / inputs display. Check figma for precise info.

10) Network Screen, "Reload Data" button has no click feedback

( ℹ️ This is a new behavior that still needs to be better defined )

11) Statistics Screen, "seconds ago" should be "synced at"

Being dealt with at #348

12) "Decode" and "Push Tx" texts under the button are too bold

( #372 ) Refer to figma for precise data.

13) "Features" screen has a hover interaction with the rows, but is not clickable

( ℹ️ This is a new behavior for the new UI )

14) Clickable accordeon components

( ℹ️ This is a new behavior, identical to the one on item 13 )On the accordeon components (tx and blocks details), we should make the whole line clickable instead of only the icon on the right? So the user could just click and open/close without pointing to the icon.

15) Error feedback should be centralized

( #377 ) This is an adjustment over #352 . The behavior there was inherited from the last UI, but should now be centralized according to Figma.

16) Token selectbox behind other visual elements

( #376 ) In the Address Details screen, using an address with many tokens ( mainnet sample ), the token selection box sometimes moves behind the UI.

17) Network synchronization bars

( #375 ) On the Network screen, when a fullnode is still synchronizing, the bars have rounded borders inside. They should only have rounded borders on the outside

18) Maximum Width

( #371 ) The maximum width should be around 1400px. Expanding the screen further should only increase lateral borders, not the screen elements.

19) Sizes and bold amounts on Token Details

( #373 ) Check the Figma for the bold and font sizes on the Token Details screen. Some are inconsistent

20) Transaction Details title on Mobile

( #374 ) On the presentation, the title "Transaction Id" should be "Tx Id" for the mobile version. See figma for details.

21) NFT Preview positioning is not optimal

( ℹ️ This needs a new Figma design ) In the previous UI, the NFT preview was exhibited in a third column. In the new UI it shows in a second row instead. ( Sample NFT Address )

[obiyankenobi]

When there are tokens on a tx, the Tokens section should be extended by default (not collapsed).