Add transition to navigation user bar button and brand logo

What does this MR do and why?

Add transition to navigation user bar button and brand logo

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After
CleanShot_2024-01-16_at_10.51.18	CleanShot_2024-01-16_at_11.06.57

How to set up and validate locally

1. Use tab and mouse to select items in navigation
2. CSS transition should be the same
3. note: user-bar-button uses box-shadow for inset border which impacts :focus ring transition

Related to #434904 (closed)