Header/Footer UI Design Update

[Ka-YT]

Updated specs for the TD header & footer, see linked document for images, notes, comments:

Design File

Header

Midlevel Mockup

General Style

• Black background #121212 (same as library website)
• TigerData Logo, clickable to tigerdata home/dashboard
• Consideration should be given for accessibility
• WCAG Guidelines
• E.g.

  Tiger Data

• Utility navigation with optional links and account actions in top right
  -- Potential options could include Contact Us, FAQ, ORCID@Princeton

Profile Drop Down
See: #6

• This features is models off of ORCID@Princeton
• Username will populate in the top right (either netid or pretty name)
• Drop down to logout
• A future feature could be a profile link or other user specific actions.

Footer

Midlevel mockup

General Style
Double Footer
Orange bard separating page content from footers
Grey bar between footers

Top Footer - Application Footer
Logos from patterns: Princeton University Library, Office of the Dean of Research, PRDS, and Princeton Research Computing
New logo appropriate for black background will need to be created for PRDS
Version statement

Bottom Footer - Princeton Footer
Link to Accessibility
Trustees copyright statement
Princeton logo with link to princeton.edu

[gnemade51]

Header and Footer Alignment and Resizing:

Header:

Measurements:

Footer:

Measurements:

Note: the 'Accessibility Help' link -> On Hover: Underline with 1px height and width covering text and icon with #FFF background color

Figma Link: https://www.figma.com/design/rgzEYTpnGl6l68moRSVwYg/Phase-1-UI-Details?node-id=149-1623&m=dev

[beth-german]

Continued in: pulibrary/tigerdata-app#975