Improve visibility of events by using colors and better icons

[lnlp]

Summary

Icons that indicate the type of an event in Live data views are difficult to differentiate at a glance. Sure the icons are different but they are not easy to differentiate at a glance.

It is probably possible to improve this by using a different (visually better) icon design. Using different colors for different icons will already help and I would like to this being used anyway.

This will be an important UX improvement (not just some goldplating) that makes scanning the events easier.

Why do we need this?

Makes scanning events 'at a glance' easier. Makes it easier on the eye to differentiate between different event types.

What is already there? What do you see now?

What is missing? What do you want to see?

1. Use of different colors for different event-type icons.
2. Improve the icon design so that they are easier to recognize and differentiate at a glance.

Environment

Console, not environment specific.

How do you propose to implement this?

Already described above.

How do you propose to test this?

-

Can you do this yourself and submit a Pull Request?

No

[KrishnaIyer]

This is a good request and sorry for the long wait.

Color Coding

Color coding is I think a good idea but we need to be careful with the colors. We need to be subtle here. cc @pierrephz

I propose the following 4 categories

1. Failure/Error: Events that end infail or abort. Ex: as.up.data.decode.fail or dcs.gateway.claim.abort.
2. Warnings: Events that end in warning. Ex: as.down.data.encode.warning
3. Success: Events that end in success. Ex: gs.down.tx.success
4. Informational: Every other event.

There may be few edge cases here (ex: is gs.disconnect a failure or informational? I think it's the latter) and some events may need to be renamed but let's start here.

Icons

I think the new icon set after the redesign is pretty good. Let's see if there's something that can be improved there.