After UI update, class='Vibrant Success' button is blue instead of green. How can I make the button green again?

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Acknowledged
I like the new UI update but after the update, buttons using  class='Vibrant Success' in Rich Text Field are blue instead of green. How can I make the button green again? Thanks.
Photo of Ken

Ken

  • 292 Points 250 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
It looks like the same color is being used for both Success and Primary classes
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
I’m guessing that's a bug. I will report it.
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 10,978 Points 10k badge 2x thumb
Vibrant Success has been adjusted by the update to also display as a blue in line with the branding. However it is still possible to display a button in green (or another color with the hex code for it). You can do so using the formula below:

"<a class='Vibrant Success' style='border:1px solid #6BBD57; background-color:#6BBD57'>Vibrant Success</a>" 

That one above will now show the button in green and if you adjust the hex color it will update to the button to the corresponding color.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
OK, thx for the tip (seriously as I never knew you could choose a color), but man-o-man I have countless Vibrant Success buttons implemented with countless clients on countless apps.  Any chance that decision can be reconsidered?  Green was typically used for something positive like "Save" or "Add".
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 10,978 Points 10k badge 2x thumb
Yeah I was happy to learn that trick as well. I went through a bunch of my own apps to update the buttons to match the color schemes I was using for my reports and fields. I tend to like to use some non conventional color palettes.

As for the feedback on the Vibrant Success change I am going to pass that one on along with the other feedback I have been seeing on here about the UI changes and the color updates to our PD Team that is looking into the release changes. 
Photo of Ken

Ken

  • 292 Points 250 badge 2x thumb
Thanks Evan. That did the trick!
That's ridiculous. The class is supposed to define the formatting, including the color. To have the work around is great, but you now have two classes that have the same format. That's a dev 101 no no
Photo of Sam Jones

Sam Jones, Employee

  • 2,330 Points 2k badge 2x thumb
Hey All,
Our initial thought was to change all of Vibrant Success, including the Save and New Record buttons, to be blue. We received feedback from customers tested with that in many cases they have text on their forms literally saying "Click the big green button to save this record". So, we preserved the green for those two instances, but shifted to the blue color scheme for the rest. 

Personally, I think it's an issue if you need to spell out the color of the save button to get people to click it, but for this release we didn't want to alter functionality at all, only change styling, so this is the compromise we arrived at.


Sam Jones
QuickBase Product Manager
 
Photo of Matthew Neil

Matthew Neil

  • 31,678 Points 20k badge 2x thumb
Bootstrap (Twitter); Success = green
https://v4-alpha.getbootstrap.com/components/buttons/
330 Million Users

Angular (Google); Primary = Blue
https://material.angularjs.org/latest/CSS/button
1.2 Billion Users

3- Quick Base; Success = Blue ...
600K Users...
(Edited)
Sam, 

The level of instruction needed (i.e. 'Push the green button') is indicative of the technical level of the "lowest common denominator" user utilizing applications built on Quick Base. We - the whole community, not just my company - build applications for users that have a difficult time understanding what the address bar or a browser is and can rarely differentiate between Quick Base and the applications built on it. And when your team pulls stunts like eliminating a fairly common standard (i.e. Success button = Green) it looks as though your team has forgotten this and makes our lives that much more difficult.
It's especially ludicrous that you would keep the green buttons for yourself, but change the success class to blue. If you're keeping the +New and Save buttons as green, what's the real reason to get rid of the Success class?
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
Sam,

My cheat notes to myself are that if you paste this formula into a formula rich text field, you get all the known easy colours.  (ie before I knew that we could actually specify a colour

List("&nbsp;",
    "<a class='Vibrant'>Vibrant</a>", // regular grey button
    "<a class='Vibrant Alert'>Vibrant Alert</a>", // yellowish
    "<a class='Vibrant Danger'>Vibrant Danger</a>",  // red
    "<a class='Vibrant Primary'>Vibrant Primary</a>", // blue
    "<a class='Vibrant Snowy'>Vibrant Snowy</a>",  // white
    "<a class='Vibrant Success'>Vibrant Success</a>" // green
)

So I just made the field again in a test app, and all the buttons continue to work except that the Vibrant Success turned Blue like the Vibrant Primary.

I read your post above a couple of times, but I'm still not understanding why you felt OK to retain all those other colours (which I appreciate), but not the Green.  Given that it arguably takes coding to specifically choose a button colour (ie a basic day to day admin should not know that formula, only coders or keeners who use this forum), why would that be changed?

Was it that the designers felt that purple and green do not mix well?  But now we are sort off off the purple for any custom headers, so does that argument still hold on Day 2 of the New UI?
Photo of Dan

Dan

  • 1,380 Points 1k badge 2x thumb
Agree.
Photo of Sam Jones

Sam Jones, Employee

  • 2,330 Points 2k badge 2x thumb
It was a push to reduce the number of colors we're using, and bring our brand into the product. If you look at our marketing site, it's all Purple and Blue. We were going for consistency. 

Sam Jones
QuickBase Product Manager
 
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
Well, I guess I just suggest that the decision to defeat that 1 colour be reconsidered in light of backing off forcing Quick Base branded colours on us on Day 2 and given that Vibrant buttons are specifically chosen by colour by the app developer.

 I guess the work around is to use Evan's method for any apps where the users notice and care.
Photo of Dan

Dan

  • 1,380 Points 1k badge 2x thumb
Yes, it still seems odd to remove the green coloring where it was intentionally defined, especially considering that the green hasn't been fully removed, but still exists on the add and save buttons...
Photo of Rick S

Rick S

  • 34 Points
Most users don't go to the Quick Base marketing site. The consistency should be focused on making the user experience consistent with the app's use case and customer's brand. I would like to see something like this: https://i0.wp.com/www.salesforceben.com/wp-content/uploads/2017/11/Screen-Shot-2017-11-07-at-14.15.4...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,894 Points 20k badge 2x thumb
>It was a push to reduce the number of colors we're using

But is clashes with commonplace UX design principles. Green hints at PROCEED and SUCCESS actions while Blue hints at DEFAULT or PRIMARY actions.

Both Bootstrap and Zurb use similar color schemes for their buttons.

Twitter Bootstrap Buttons
https://v4-alpha.getbootstrap.com/components/buttons/#examples

Zurb Foundation Buttons
https://foundation.zurb.com/sites/docs/v/5.5.3/components/buttons.html#button-colors

In any event I am no fan of conventions. QuickBase should have more affordances to customize styles through partials. A partial is a small fragment of  HTML that can carry its own style and content and possibly substitute data into the HTML through a template of some sort. So instead of the interface asking for a single branding color which is hard-coded into the page the interface should asks for a partial - a fragment of HTML that can include styles, images, text content etc.

Users want partials not purple.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
I agree with Dan.  We would like our Green back please without me needing to survey all my clients to ask if they have any buttons which are now blue which they seem to recall used to be green.  I would not bother doing that so that they will just stay blue unless someone complains.  But that is a very nuanced thing to notice that inconsistency.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 62,316 Points 50k badge 2x thumb
Thx Blake for taking the time to make that post,
I voted my max 3 votes.