Introduce page-header for dashboard-title and settings

[huong-li-nguyen]

Description

Context: There are currently some issues with the dashboard-title position:

• Current positions takes a lot of horizontal space if there are no controls/navigations
• Hierarchy is not clear as title is on the same level as nav-bar and page-title
  

Introduction of page-header:

• Solves for issues explained above
• Creates space for yet-to-come horizontal nav-bar
• Enables simple positioning of logo (squared and rectangular format)

Above solution required several CSS changes such that it looks good with the page-header as well, see code for more details

Layout Screenshots

Take a look at the Miro board - there are several screenshots that show you how it looks now here

Container Structure

https://miro.com/app/board/o9J_ldRDmCQ=/?moveToWidget=3458764572914015668&cot=14

Screenshot

In the Miro board there are more screenshots - adding a selected one here:

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[maxschulz-COL]

Starting having a look. I tried to understand these changes in the context of #205, but it was a little tricky to do as the graphic does not seem to match anymore. Do you think it makes sense to provide an update of that?

[huong-li-nguyen]

Starting having a look. I tried to understand these changes in the context of #205, but it was a little tricky to do as the graphic does not seem to match anymore. Do you think it makes sense to provide an update of that?

Sure, I've updated the PR description 👍 In general, it's best to check the attached Miro links, I've added screenshots of the layout everywhere so you can imagine how it will look like. This just adds another layer of outer containers and moves the dashboard title, settings and logo in the page-header container. The rest remains the same and will live in the page-main container. The settings container will move into the page-header or right-header depending whether the page-header exists or not.

[maxschulz-COL]

Lgtm! 🚀 The graphic really helped, I think its good to have it in a PR for public view 🙏

[nadijagraca]

I just had one small comment, but otherwise looks good. I like the new design with the dashboard title separated (makes much more sense and the hierarchy is clear). 🚀

[antonymilne]

This is great I think, definitely feels like a good solution to me 👍

As per a comment left on your other PR, I do wonder whether we should be changing some of these divs to more semantic elements, but it's really not important and definitely not worth doing now.