feat(header-bar): reduce height and minor design changes

[cooper-joe]

Implements LIBS-545 / UX-144

---

Description

This PR makes visual changes to the HeaderBar component:

• reduce height to 40px
  • inner components are adjusted to compensate for the height reduction
• minor adjustments to base color and interaction colors (in order to improve readability of the slightly smaller text size)

---

Checklist

• API docs are generated
• Tests were added (Not sure why the 2 tests are failing?)
• Storybook demos were added

All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.

---

Screenshots

Before:

After:

[dhis2-bot]

🚀 Deployed on https://pr-1425--dhis2-ui.netlify.app

[cypress]

Passing run #3109 ↗︎

0

583

0

0

0

Details:

chore: fix headerbar cypress tests
Project: ui	Commit: e0be96364b
Status: Passed	Duration: 06:35 💡
Started: Nov 16, 2023 6:42 PM	Ended: Nov 16, 2023 6:49 PM

Review all test suite changes for PR #1425 ↗︎

[amcgee]

Tests should be fixed now - change looks good to me! This could be considered a breaking change depending on how people are using it (absolute positioning offsets) but I don't think we need to be strict about that. The alternative would be to do this change only in the global shell.. but not sure that's necessary

[cooper-joe]

The alternative would be to do this change only in the global shell

@amcgee and I discussed this further. This change will be deferred until the HeaderBar is moved to the global shell. Keeping this PR in draft as the design changes are approved.