Redesign Not saved message on Save button and make tooltips

[novoselt]

Concerns/nitpicks:

• It is not clear what is the point of "Save" button at all given that things get saved automatically. When one should use it and what does it do? Some hover tip would be nice, maybe with a link to a doc page.
• When there is "Not saved" message, it is not clear what to do and whether one should be concerned at all. A different hover would be very useful as well to calm the user down or give some useful hints on what to do or not to do.
• Having red "Not saved" message on green "Save" button is strange, especially if it is not clickable.
• With the message on, the button changes its size and moves other elements around, trying to click on it just when the message disappears makes you click on another button.

Suggested changes:

• add hover tips
• keep the size of the button fixed
• for "Not saved" state make the whole button red and remove "Save", maybe break "Not saved" into two lines to fit into the same width?
• when the button is small and square, maybe display some "X" icon or some other bright red image but keep the size of the button the same
• perhaps make the button blinking in the "Not saved" state? It is quite important to be aware of it.
• I would even consider some bigger banner, to make sure that users are aware of what is going on AND have some instructions on how to behave.

[novoselt]

I actually don't know - what should I be doing when there is a "Not saved" message? And, perhaps equally important - what I should NOT be doing? Should I refresh the browser and hope that things will work, or should I NOT refresh the browser because I will lose work?

It would be very helpful to have some hover tip, especially since it is impossible to click the button and force saving!