NodeUI header updates

[ZygintasBudrys]

As NodeUI user I would like to see updated NodeUI header that would include:

• Node Status
• Node Quality
• NAT Status
• Next auto settlement

Tasks to be done:

• Updated design for mobile and web view (current design to be supplemented by the missing info form the list above). Responsible person @Skaiste
• Updated Tooltip text (that would be enough for user to understand the meaning of particular indicator and for more information a link included to help page/article). Responsible persons @andzej + @arturas and @savannah to help with creating text attractive to users
• Dedicated help pages/articles created for each indicator (Node Status, Node Quality, NAT Status). The pages should explain what are possible values, what is their meaning and weather user should be taking any troubleshooting steps to improve. Responsible Person @andzej + @arturas and @savannah to help with preparing text.
• Development (updating NodeUI with new designs, tooltip text, links)

Agreed standards

1. Node Quality indicator
   Good (Green) if quality value 0.75 - 3.0
   Normal (Orange) if quality value <0.75 - 0.5
   Poor (Red) if quality value <0.5
2. Node status "Monitoring failed" color indicator (Orange color not Red)
3. Node status "Pending" to be added after it is developed on infra level

Tooltip texts

https://docs.google.com/document/d/17d3pz2ZY3vUCG-au9YtO7HlKkipcXbcwLZrwZsDJOtM/edit

Visuals

https://www.figma.com/file/aF3dmdLXWXIcabsGo6NpsT/MystNodes?type=design&node-id=158-718&mode=design&t=NnOE2dDnY48wTyU0-0

UAC

NodeUI version: 2.12.1-rc0

[ZygintasBudrys]

Additional requirements:

• When node is offline, the quality color indicator should turn grey.