Update OwP patron-submitted form

sshetenhelm commented 3 months ago

Story Staff testers have commented that the current Open with Permission form looks too "testy," and suggests an updated design before finalizing the "final" MVP. We would like the design of the Open with Permission form to more closely align with the rest of Blacklight.

Current form:

Suggested changes

Update form header font to more closely align with Blacklight
Update buttons to more closely align with Blacklight
Update 'Continue' button spacing
Update text input boxes/spaced to more closely align with Blacklight (ex. the Advanced Search page)

Something like this:

Here's the code from the Advanced Search buttons with classes/etc., for your reference. We'd like the 'Submit request' button to look like the search / basic search buttons:

<div class="adv-search-sort-submit-buttons clearfix">
--
  | <input type="submit" name="commit" value="SEARCH" class="btn btn-primary lg-btn advanced-search-submit" id="advanced-search-submit2" data-disable-with="Search" aria-label="Search" role="button">
  | <button name="button" type="button" class="btn btn-primary lg-btn pull-right href-button" href="/catalog" aria-label="basic search" tabindex="0">
  | BASIC SEARCH
  | </button>    <button name="button" type="reset" class="btn btn-primary lg-btn pull-right" onclick="this.form.reset()" aria-label="clear form" tabindex="0">
  | CLEAR
  | </button>  </div>

And here's some info about the 'Clear Bookmarks' button, whose formatting we would like to use for the cancel button:

  |  
  | <a data-confirm="Are you sure you want to clear all saved items? You cannot undo this action." class="clear-bookmarks btn" rel="nofollow" data-method="delete" href="/bookmarks/clear">Clear All Saved Items</a>
  |  
  |

/* line 61, app/assets/stylesheets/customOverrides/sort_widget.scss */
.clear-bookmarks {
  background-color: #767676;
  color: white !important;
}

Acceptance

[x] Header ‘Request information’ updated to font: YaleNew-Roman
[x] Header ‘Request information’ updated to font color: 043669
[x] Text input box for Full name put under label
[x] Text input box Reason for request put under label
[x] Text input boxes have squared corners

Cancel button

[x] Text in all caps
[x] Button bg color is 767676
[x] Button has squared corners

Submit Request button

[x] Text in all caps
[x] Text color is 043669
[x] Button background color matches DCS background
[x] Button border is 1px, squared corners, color = cccccb (this might be wrong)