Unify Button styles and availability across donations, distributions etc

[mdworken]

We should cleanup the way we use buttons regarding edit, view, print, etc etc. Examples of things to fix:

• Light Blue mean 'edit' in some parts of the app but 'print pdf' in others
• When/where we have edit/print buttons can be inconsistent
• Icons are used for some of the buttons in the rows on the Index page, but are not for others. This should be a little more deliberate.

[armahillo]

YES PLEASE.

I was trying to do this with the styleguide but just haven't had time (cf. #241) : https://github.com/rubyforgood/diaper/wiki/Styleguide

My thoughts on this from before

Colors

• "danger" / warm colors (yellow, orange, red) for destructive / not-easily-reversible actions
• "safe" / cool colors (blue, green, amethyst) for actions that are non-destructive or are "forward motion" in the user journey
• transparent / neutral-tone (gray, black, white) for actions that are cancelling / backing out of the current path; in-progress work can be lost, but database should remain unchanged from any work performed in that flow; also for actions that do not advance or retreat the current flow (PDF printouts, if PDF printing isn't the terminal step, would probably fit here?)

Positioning

• controls that advance the current journey should be right-aligned, preferably on the bottom of the controlset
• controls that reverse the current journey to a previous step should be left-aligned
• controls that affect the dataset at-hand (ie. filters, etc) should be at the top, above the dataset
• controls that are row-record-specific should be in the right-most column, in a group

I'll add more if I can remember anything further

[seanmarcia]

We should probably unify the font-awesome icons in our buttons as well. Some buttons have icons and others don't.

[armahillo]

• [ ] Update the Styleguide with decisions made for this Issue

[armahillo]

My recommendation, right now -- please discuss / pushback if you disagree:

• btn-success for button / a.btn that save data to the database. Pair with an appropriate icon. (Is the floppy-disk "Save" still understood? Or should we do a checkmark or something?)
• btn-success for button / a.btn that upload data, paired with the standard upload icon: [|^]
• btn-danger for button / a.btn that are destructive / delete data / would be difficult to reverse. Pair with a trash icon for deletion, or an appropriate contextual icon otherwise.
• btn-primary for button / a.btn that patch/put/modify existing data in the database, or that do not change the database at all, but just advance a workflow. An icon can be used here if desired.
• btn-secondary for button / a.btn that cancels, aborts, clears or steps backwards in a workflow and ideally does not hit the database at all, explicitly. An icon can be used here if desired.

Icons are mandatory for any buttons that use red or green (for colorblindness).

All button text should be a present-tense verb that clearly indicates the intent of the action. (Mostly, these should be intuitive). Should be a single word, though if you think there's a good case for multiple words, then feel free to bring it up for discussion.

• Buttons that submit a form and move forwards in the workflow should be at the bottom right, rightmost positioning.
• Buttons that are at the top of the form can be left or right-aligned (as necessary) but should only affect the presentation of the form being viewed -- either filtering, or otherwise changing the context of the view.
• Buttons that reverse the workflow or cancel / abort, should be left-aligned (or if that looks weird, at least "to the left" of the advancing button)
• Submit buttons or primary-action buttons should be set to btn-lg size to have a large hit-target and be obvious.
• Internal form controls (filters, etc) can be btn-md,
• Row-buttons can be btn-sm as necessary

[armahillo]

This looks like a good list to start on for evaluation

aaron@toph:~/Documents/Code/rails/diaper/app/views$ grep -lR btn *

• [x] adjustments/index.html.erb
• adjustments/_form.html.erb deleted -- we no longer do editing of adjustments
• [x] adjustments/new.html.erb
• [x] admin/organizations/_organization_row.html.erb
• [x] admin/organizations/edit.html.erb
• [x] admin/organizations/index.html.erb
• [x] admin/organizations/new.html.erb
• [x] admin/users/index.html.erb
• [x] admin/users/new.html.erb
• [x] admin/canonical_items/edit.html.erb
• [x] admin/canonical_items/_canonical_item_row.html.erb
• [x] admin/canonical_items/new.html.erb
• [x] barcode_items/index.html.erb
• [x] barcode_items/_form.html.erb
• [x] barcode_items/_barcode_item_row.html.erb
• [x] dashboard/index.html.erb
• [x] dashboard/_getting_started_prompt.html.erb
• devise/invitations/edit.html.erb
• devise/registrations/edit.html.erb
• [x] diaper_drive_participants/_diaper_drive_participant_row.html.erb
• [x] diaper_drive_participants/index.html.erb
• diaper_drive_participants/_new_modal.html.erb
• [x] diaper_drive_participants/_form.html.erb
• [x] distributions/edit.html.erb
• [x] distributions/index.html.erb
• [x] distributions/_distribution_row.html.erb
• [x] distributions/show.html.erb
• [x] distributions/new.html.erb
• [x] donations/_donation_form.html.erb
• [x] donations/index.html.erb
• [x] donations/_donation_row.html.erb
• [x] donations/show.html.erb
• [x] donations/_barcode_modal.html.erb
• [x] donation_sites/index.html.erb
• [x] donation_sites/_import_donation_site_modal.html.erb
• [x] donation_sites/_form.html.erb
• [x] donation_sites/_donation_site_row.html.erb
• [x] items/_item_row.html.erb
• [x] items/_header.html.erb
• [x] items/_form.html.erb
• layouts/navigation/_header.html.erb this appears to be a reference file
• layouts/navigation/_sidebar.html.erb this appears to be a reference file
• [x] layouts/_lte_admin_navbar.html.erb
• [x] layouts/_lte_navbar.html.erb
• [x] line_items/_line_item_fields.html.erb
• [x] organizations/edit.html.erb
• [x] organizations/show.html.erb
• [x] partners/index.html.erb
• [x] partners/approve_partner.html.erb
• [x] partners/show.html.erb
• [x] partners/_form.html.erb
• [x] partners/_partner_row.html.erb
• [x] purchases/_purchase_row.html.erb
• [x] purchases/index.html.erb
• [x] purchases/_purchase_form.html.erb
• [x] purchases/show.html.erb
• [x] purchases/_barcode_modal.html.erb
• [x] requests/_request_row.html.erb
• [x] requests/show.html.erb
• [x] shared/_table_row_form.html.erb
• static/index.html.erb
• [x] storage_locations/_storage_location_row.html.erb
• [x] storage_locations/index.html.erb
• [x] storage_locations/show.html.erb
• [x] storage_locations/_form.html.erb
• [x] transfers/index.html.erb
• [x] transfers/_transfer_row.html.erb
• [x] transfers/new.html.erb
• [x] users/index.html.erb
• [x] users/new.html.erb (can this be deleted? I think we're just doing invites now, right?)