SideBarButton set text below the icon

[BaraMGB]

this would fix #3234 (comment)

[mikobuntu]

👍 great job :)

[tresf]

Unrelated to this PR, but the side-tabs needs more contrast from each other. The description is indistinguishable from the two icons. @RebeccaDeField

[mikobuntu]

@tresf something like this design in my mockup could work?

[tresf]

@tresf something like this design in my mockup could work?

👍

[BaraMGB]

something like this design in my mockup could work?

I guess this one can easily made in the styles.css

[mikobuntu]

@BaraMGB Yes i was thinking the same. I could probably dig out my css book and have a look to see how to do this, well along with qtcreator :) , tho I hope the experts step in and do this i.e @RebeccaDeField et all :)

[BaraMGB]

in the styles.css line 497 changed to:
background: #2f353b;
looks like:

Should I add this to this PR?

[mikobuntu]

@BaraMGB did adding the background conflict with the original PR, as i see the icon is now below the text in your last image?

[BaraMGB]

I changed the styles.css in master for be quick. ;)

[BaraMGB]

looks not bad.

[tresf]

Better but still requires more contrast. The Instrument Buttons are about as close as we should allow (despite the similarities in color, they have additional bevel and shading which makes them standout from the background).

[RebeccaDeField]

This is looking good, people :) I do agree with @tresf that if we are adding this to enhance the contrast, we might want to step up the contrast a bit more on that label.

[RebeccaDeField]

Here are some colors that should work well for the sidebar tab.

Horizontal gradient:
Stop 1: #4b525b
Stop 2: #2f333a

Should look something like this

@BaraMGB

[BaraMGB]

Thanks to @RebeccaDeField 👍

[tresf]

@BaraMGB code style formatting... You've used spaces instead of a tab.

[tresf]

Just one minor code formatting change, then we can merge this.

[BaraMGB]

done ;)