1163: Button consistency

Owned by Paulina Borowa (Unlicensed)
Last updated: Oct 28, 2016
Test Case #:1163

Test Case Name: Button consistency

System: OpenLMIS

Subsystem: blue

Test case designed by: Paulina Borowa

Design Date:28.10.2016

Short description: 

In OpenLMIS there is a large variation in button sizes and little variation in button colors, which doesn't provide a strong visual hierarchy. To fix this, we will:

  • remove all button sizes, and have buttons set to 1em (to always match the size of surrounding text.
  • All button padding should be `padding: 0.5em 1em;`
  • make default button color be gray (not green)
  • make 'primary-action' button color green
  • make 'delete/remove' button color dark red

These colors should be implemented as SASS variables, to allow for easy extension and tweaking.

Any primary actions should be on the right side of any form or toolbar. (ie float:right) — buttons that should be considered primary are:

  • "Sign In"
  • "Submit" "Authorize" "Approve"

"Save" should not be considered a primary action button.

The Openlmis UI Styleguide should reflect these changes, along with all application pages that have been implemented when the ticket was created.

                                                                                                                                                   

Pre – conditions:

                                                                                                                                                                                                                                                       

Step


Action

Expected system response

Comment

1

               Go on: host/public/#/login.    

                                                                                                                            

                                                 

2

Log in with 
relevant data to administrator account

Check if:

  • Sign in is ok (right side and green)




3

Select Requisition → Create/Authorize


4

Select Program field for example: Family Planing and click to Procced button



5

Check if:

  • Submit button is ok (green and right side)
  • Save is ok (grey and left side)
  • Save button is ok (Requisitions> Approve) (grey and left side)
  • gradient is added to save button.


OpenLMIS: the global initiative for powerful LMIS software