Updated Process Documenter UI

Following please find proposed changes to the Process Documenter UI in response to our usability research results.

Note: These are rough mockups. The font, font size, pop-up size, button size, blue bar width and all other formatting should match the standard ProcessMaker Designer UI.

Page

Current UI

Proposed UI

Changes

Process Documenter

Added blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker
Deleted settings icon bc it didn't work
Deleted percentage bar bc users were confused
Changed Review > Preview
Reordered Designer and Preview so they are in the correct order
Added Process Documenter in bold in the middle so the user knows where they are
Changed buttons from white buttons to white text w/ light blue lines between the links - w/ blue background (links should look and function like Designer UI below)

Added blue bar to Process Inspector to be consistent with the Designer UI and to differentiate as a heading
Bold Key and Value titles to differentiate them from content below

New Section Pop-up

Changed current pop-up style to Designer pop-up UI to be consistent
- Added blue bar to top of pop-up with darker blue x to close window
- Capitalized New so pop-up title now reads 'Create a New Section'
- Changed white Cancel and Save buttons to a red Cancel button and green Save button
- Deleted Required (Count in %) since we are not currently using the progress bar
- Pop-up UI should match this pop-up

Preview Page

Added blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker
Changed 'Return to EasyDoc' button text to 'Process Documenter'
Added Preview in bold so users who where they are
Changed buttons from white buttons to white text w/ light blue lines between the links w/ blue background to be consistent with the Designer and Process Documenter UI

When user scrolls over another button it becomes bold to signify that its clickable