Make tray icons more informative on network status

[Bosch-0]

Having tray icons that communicate more clearly the status of your bitcoin node is something I think would be a minor UX improvement. Below I've proposed three states.

Solid green = Network is fully syncd with most recent block.

Flashing green = Syncing with the Bitcoin network.

Solid red = Network has connectivity issues and is not syncing

Figma File

[GBKS]

Like the idea. How about a blue dot for syncing since flashing might get a bit annoying. I could also see the dots be a little smaller so they don't touch the "B".

[Bosch-0]

Like the idea. How about a blue dot for syncing since flashing might get a bit annoying. I could also see the dots be a little smaller so they don't touch the "B".

Blue seems like a bit of a random colour, how's bout a solid yellow? Though yellow may indicate an error which wouldn't be the case. I'll re-upload with the dots slightly smaller thanks :)

[GBKS]

I might have been thinking of blue because that's what Dropbox issues, got used to that over the years. You can see their sync icons here.

[Bosch-0]

I like there more detailed icons, could maybe do something similar I'll get some ideas up soon. A paused state if the user manually stops the sync is another one worth having.

[hebasto]

@Bosch-0 Please note that the tray icon color depends on the network (yellow for main network, green for testnet, and blue for regtest). It seems reasonable the additional icon element would compatible with the testnet at least:

[Bosch-0]

I'll do mockups for regtest and testnet too

[hebasto]

I'll do mockups for regtest and testnet too

I think you could skip regtest as there is no such public network.

[Sjors]

A flashing tray icon, when no user action is required, sounds annoying. When using colors, keep in mind that red-green color-blindness is pretty common. Perhaps only change the icon when there's a problem? E.g. only when the internet connection is otherwise fine and the user didn't disable the network themselves, you could show some general disconnection icon:

[Bosch-0]

Here is another iteration based on feedback provided.

Also added a sync paused state as well for when the user manually pauses the sync.

figma file

[Bosch-0]

@GBKS and myself have been working on a Bitcoin icon set that @jarolrod is looking to implement into the GUI. We have an icon designed by GBKS to represent a node which could be used for this. I kept things monochromatic for accessibility as well as most tray icons use this style so it's more consistent in general. Two states is enough imo. If the node isn't syncd (second image) the user can open the GUI to figure out why. Communicating all the other states in the tray like my previous designs is too complex and gets messy. Mockup below: