Design System - Add containers

[pete-watters]

This issue is a new version of 4165 but with a more specific scope. The task is to implement a re-usable set of containers for page Header and Footer as per:

https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=5056-60851&mode=design&t=CbvgKq8c4jj6eRZE-0

The headers should be generic but will need to have some context provided as they will show different information in different views. e.g. in extension view, they need to show the network / account

This task relates to #4371 and builds upon #4165

[pete-watters]

@markmhendrickson : we had a call yesterday to clear up the scope of #4165 . We have split up the work into two issues #4370 and #4371

CC @mica000 @kyranjamie @fabric-8

[markmhendrickson]

Thanks @pete-watters – can this particular issue be closed or is there more that remains for it specifically?

[pete-watters]

This one needs to be open as the work isn't done yet. This one is closed correctly

#4165

[pete-watters]

As part of this task, consideration needs to be given to the colour of the header as per: #4253 (comment)

[markmhendrickson]

Related: #4615 (comment)

[pete-watters]

Checking my new PR and setting the extension + popup width to 390 seems to resolve this issue

As we begin to scale up, past 390px width it starts to look buggy and weird again. I will see if I can improve it at the next breakpoint but I'm unsure how important that is if it looks OK in the standard popup size

Kapture.2023-12-20.at.12.02.40.mp4

[mica000]

@pete-watters Would it work to set the header width to 100% of the view port?

[pete-watters]

@pete-watters Would it work to set the header width to 100% of the view port?

I can give it a try for the header, that will likely work. My point is do we want to have full responsiveness on all screens from sm 390px all the way to lg .

We could need to have an idea how the page responds at different widths. For example the header should stretch here but also the content width should extend too.

I'll get it working well in the main sizes and then see about the interim widths

[mica000]

My point is do we want to have full responsiveness on all screens from sm 390px all the way to lg .

Yes!!! that would be great: full responsiveness on all screens from sm 390px all the way to lg.

cc @fabric-8

[pete-watters]

I've been progressing well on this:

• making the home header consistent
• improving the page headers

Yesterday @mica000 and I were speaking as for some pages with a two column layout we need to make some slight design tweaks to help us make things more consistent. That overlaps with #4423

To give more context, for the key entry / password screens:

• most of the right column cards are fixed at 600px
• the password / unlock screen has a fixed width of 500px
• we don't have a specific header for those pages so we will work on that
• the password session lock / unlock screen also needs to work on extension / popup mode and look well

[fabric-8]

@pete-watters Michelly and I discussed header/footers the other day and would love to update the behaviour — Besides both being sticky, we'd also love to add a divider border to the header once content is scrolled — Here's a basic documentation of this change.

Please ping me if you have any questions or if there's the need for further discussion!

[markmhendrickson]

Note this work will fix the layout issues with the unlock screen during auth:

[pete-watters]

@fabric-8, OK that's no problem. Better to do it now.

I had the footer being sticky so I will update it to also have a sticky header with a border showing for both on scroll.

[mica000]

Note this work will fix the layout issues with the unlock screen during auth:

@markmhendrickson Indeed! Here are the designs covering the onboarding flows: https://www.figma.com/file/2stUYm67q6Tkwe31CshODA/Onboarding?type=design&node-id=1%3A16709&mode=design&t=UX0gMMYcB50sCJHM-1