Polish header, top navigation, and side navigation UI

[NevilleS]

Description

The current header, top navigation, and side navigation could all use a polish pass to bring more inline with the ideal designs. See the attached Figma reference for details.

Requirements

• Header matches the ideal design
• Top navigation matches the ideal design
• Side navigation matches the ideal design

Mockups

See Figma masters for reference: https://www.figma.com/file/dmEwdK3xZwjKfGVQ9t66xe/Fides-v.2-Master-Working-Files?node-id=4444-120398&t=vBt9oGooRD7ykQ41-0

Implementation Notes/Details

A couple notes from my inspection of the Figma file...

• Header is 48px high with logo vertically aligned
• Header logo is 26px high
• Header has both a help button & account button
• No visible border between header & top nav
• Top nav is 48px high with 40px horizontal padding, 8px vertical padding
• Top nav font size is 14px (sm), font weight 500 (md)
• Top nav button padding is 12px horizontal, 4px vertical
• Top nav gap is 4px between links
• Side nav fonts are 16px (md) for heading, 14px (sm) for links
• Side nav gap is 16px between heading and links container
• Side nav links are ~28px high (20px line height, 4px vertical padding, 12px left padding)
• Side nav links border is 1px gray.300 (#CBD5E0)

[Roger-Ethyca]

moving to done.