Save/cancel buttons for changeset save are very difficult to distinguish

[jancborchardt]

This is how it currently looks:

A few problems with the Save/Cancel buttons:

• usually the confirm function is on the right. I nearly clicked cancel here, and was a bit afraid of losing my edits
• they both have the same color
• they both have the same visual importance

Here’s my proposal:

1. Switch them around so Cancel is left and Save is right.
2. Use a different »empty« style for the cancel button since it’s not the primary action. This is similar to the user dropdown and the »empty« / inactive buttons up top (History etc)
3. Change the color to grey to make it less present.

Here’s the CSS rules for the cancel button:

background: #fff;
border: 1px solid #999;
color: #999;

[bhousel]

Thanks for the suggestions.. I agree with all of it, and I frequently hit the wrong button too.

• As of 2016, Save on the right is more common, so we should switch the placement
• We should use a secondary action style for cancel.
  (Note that Save is initially grey and disabled if there is no changeset comment)

[jancborchardt]

Yeah, I also thought about if the change button being grey is the best idea. An alternative is to use the blue color of the save button as border and text color for the cancel button.

[jancborchardt]

@bhousel thanks a lot! Very cool improvements :)