Discussions

 View Only
Expand all | Collapse all

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

QuickBaseCoach Dev./Training

QuickBaseCoach Dev./Training01-23-2018 16:22

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

     
    Posted 01-23-2018 15:34
    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.


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

    Posted 01-23-2018 16:20
    It looks like the same color is being used for both Success and Primary classes


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

    Posted 01-23-2018 16:22
    I�m guessing that's a bug. I will report it.


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

    Posted 01-23-2018 16:34
    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.


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

    Posted 01-23-2018 16:55
    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".


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

    Posted 01-23-2018 16:59
    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. 


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

     
    Posted 01-25-2018 14:55
    Thanks Evan. That did the trick!


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

    Posted 01-23-2018 17:19
    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


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

    Posted 01-23-2018 20:05
    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
     


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

    Posted 01-23-2018 20:16
    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...


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

    Posted 01-25-2018 15:51
    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.


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

    Posted 01-25-2018 15:58
    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?


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

    Posted 01-23-2018 20:20
    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?


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

    Posted 01-23-2018 20:23


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

    Posted 01-23-2018 20:24
    Agree.


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

    Posted 01-23-2018 21:31
    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
     


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

    Posted 01-23-2018 21:40
    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.


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

    Posted 01-23-2018 21:44
    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...


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

     
    Posted 01-26-2018 07:13
    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...">https://i0.wp.com/www.salesforceben.com/wp-content/uploads/2017/11/Screen-Shot-2017-11-07-at-14.15.41.png">https://i0.wp.com/www.salesforceben.com/wp-content/uploads/2017/11/Screen-Shot-2017-11-07-at-14.15.4...


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

    Posted 01-25-2018 15:18
    >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.


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

    Posted 01-25-2018 15:24
    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.


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



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

    Posted 01-25-2018 16:09
    Thx Blake for taking the time to make that post,
    I voted my max 3 votes.