SWF Viewer - States coloring

Motivation

Actually when a workflow is being opened, it fits into screen size by default, and depending on the number of states, it may result on states being really small, where user can't easily differentiate between types, as icons are also so small. For example:

Goal

The goal is to improve workflow's high level view and readability, by adding colors to states, depending on the state type.

Colors and it's appearance (thickness, size, alignment) should as it shown on the image below:

Colors by State:

1. Operation State = #0066CC
2. Callback State = #EC7A08
3. Parallel State = #4CB140
4. Event State = #F4C145
5. Switch State = #009596
6. Sleep State = #5752D1
7. Inject State = #8BC1F7
8. ForEach State = #8F4700

Here is some example of the resulting workflow:

Not a goal

Update icons to new one. This issue is solely about icons appearance and it's background, not icons themselves.

Actions

1. Perform changes in the states shapes in order to apply colors, thickness, size, alignment