Upgrading buttons.

[noone0212]

This pull request makes the following changes:

• Adding padding to buttons to make them look more attractive.

Testing checklist:

• [ ]

• I certify that I ran my checklist

Fixes ushahidi/platform#3906 .

Ping @ushahidi/platform

[noone0212]

After upgrading:

[rowasc]

@noone0212 this looks really nice, thanks! I find it much more intuitive now that Cancel actually looks like a button :)
@Angamanga any reason we would not want to make this change?

[Erioldoesdesign]

Honestly, this doesn't look that different to me and this is a matter of this contributors personal tastes for padding than an explicit user need.

This would really need to be intensely QA tested across platform to ensure this padding doesn't affect up any other layouts across media query sizes.

It also largely doesn't solve the larger legibility problems that the UI refresh https://github.com/ushahidi/platform/issues?q=is%3Aopen+is%3Aissue+label%3A%22UX%2FUI+debt%22 button piece would solve.

I would avoid amending padding until a whole piece of UI design work has been doen around buttons.

[rowasc]

Thanks @Erioldoesdesign for your feedback.
A few comments and questions.

To clarify on implementation: @noone0212 is using button-beta rather than button-link, making the app use the same class for all Cancel operations rather than a mix of classes, not adding a new type of padding. Right now, we seem to use them interchangeably.
Some user actions use -beta for cancel. Some use -link. It's not consistent at all. Why? I have no idea.

@Erioldoesdesign can you link to the specific Button readability improvement you mention? I saw one XD from Justin where he changed buttons colors and made them look like buttons, maybe that's it? But I can't really find a specific "button ticket" in those issues, and it would be helpful, especially because all the examples I find of screens with both buttons make them look like similar/like buttons rather than links (ie https://xd.adobe.com/view/df734ab2-a232-4bc5-4d68-70a24c1ee597-a942/screen/4279c4f5-9865-4d23-96fa-3302b0b1afd4/settings-surveys-name

https://cloud.githubusercontent.com/assets/1136279/24308421/e478baa4-1095-11e7-8332-e1142410e6f3.png ) .

ushahidi/platform#3891 @noone0212 is also flagging another issue here that they are interested in fixing, in case that's something you'd like to help out with, since it seems to also be related to "things being clickable" and maybe it's already completely solved in the ui-refresh.

While the UI refresh is not something we will be taking on anytime soon, it may be possible that some of the learnings and elements are applicable, I guess?

@noone0212 thanks again for your contribution, we really value everything you are doing <3

[Erioldoesdesign]

So after some digging I found some of the UI refresh tickets are in the Platform Pattern Library Repo
ushahidi/platform-pattern-library#205

and buttons here (helpfully not labelled so labelling now!)
ushahidi/platform#2789

The XD link does show the more accessible buttons but the .png file (https://cloud.githubusercontent.com/assets/1136279/24308421/e478baa4-1095-11e7-8332-e1142410e6f3.png) I think shows maybe a stop-gap making text darker? Idk a lot of our styling across platform has grown in a similar way to features where it's kind of ball of string like now...it's definitely worth anyone with capacity trying to sort out as they go.

So I was definitely confused as @noone0212 described 'Adding padding to buttons to make them look more attractive.' without the further context that you explained @rowasc I'm definitely pro using less classes/styles for the same elements/buttons so that we're not having lots and lots of classes for same/similar things. I would kindly suggest a little more explanation in the initial issue/pull request to add this context for folks like me that are OSS contributors that might miss some context that happens in other conversations?

ushahidi/platform#3891 happy to support this in whatever way I can, but it may be worth sync or a longer conversation on what problems it's trying to solve and then I can dig around for older designs or see what I need to build/piece together and/or usertest and work with @noone0212 on. Any more detail in the issue would be very, very helpful because 'Making fields more Intuitive.' is quite broad!

Also fields in the UI refresh is....here!
ushahidi/platform#2655
ushahidi/platform#2655

[noone0212]

@Erioldoesdesign for #1480 what I want to convey is, there is already a class button-beta which is already used in platform and i suggest to replace button-link with button-beta which looks better, in terms of design, to me.
for ushahidi/platform#3891 I want to suggest some way to make field look like a button. Even, when I first visited I got confused and not thought if fields are buttons and title and descriptions are clickable.

[rowasc]

@noone0212 hey can you fix the conflicts and then I can approve? Thanks

[noone0212]

@rowasc please check if conflicts are resolved or not. Thank you!

[rowasc]

LGTM ! Thanks @noone0212 🚀

[noone0212]

Reopening

[noone0212]

@rowasc please check.

[rowasc]

@Obadha2 can we test this next week? Not sure how we ended up with it stuck :( probably I forgot

[AmTryingMyBest]

QA'd, passes. 👍