Consistent styles for page header

[marko-lisica]

Goal

User story
As a Fleet user,
I want to see consistent styles for the page header (where the teams dropdown lives) in the UI
so that I can have a consistent experience.

Context

• Product designer: @marko-lisica
• More context in conversation here.

Changes

Product

• [ ] UI changes: Figma link

Engineering

• [ ] Database schema migrations: TODO
• [ ] Load testing: TODO

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Requires load testing: TODO
• Risk level: Low / High TODO
• Risk description: TODO

Manual testing steps

1. Step 1
2. Step 2
3. Step 3

Testing notes

Confirmation

1. [ ] Engineer (@____): Added comment to user story confirming successful completion of QA.
2. [ ] QA (@____): Added comment to user story confirming successful completion of QA.

[noahtalerman]

Currently, page headers across the product aren't consistent. Different spacing, title sizes, etc.

@ghernandez345 and @marko-lisica what are some example of inconsistent page headers?

[marko-lisica]

Currently, page headers across the product aren't consistent. Different spacing, title sizes, etc.

@ghernandez345 and @marko-lisica what are some example of inconsistent page headers?

@noahtalerman There are a lot of small inconsistencies in spacing. For example, on the Controls page, the spacing between the team selector and tabs is much smaller than on the software page. The same issue exists for the queries and policies pages because there is a description that has some margin at the bottom. On the query details page title is not bold, while on all other details pages, it is.

Those are some of the inconsistencies I found by quickly scanning the UI. If we had a component, it would allow us to define spacings and rules that can be reused across pages, making maintenance easier in the future.

[noahtalerman]

@marko-lisica thanks! Do we already have designs for the header in Figma?

If so, maybe we don't need to wait for feature fest. We can pull this one into a story and estimate it.

[marko-lisica]

@noahtalerman We have some designs from Mike T. but I would like to revisit them since they were done a long time ago. I think we should pull this to the design sprint first.

[noahtalerman]

Hey @marko-lisica heads up, I updated this issue to use the user story template and moved your original issue description here:

Problem

Currently, page headers across the product aren't consistent. Different spacing, title sizes, etc.

Potential solutions

Create reusable and composable component that will make it possible to use same component on each page.

[noahtalerman]

Hey @marko-lisica! The UI changes look good to me but it looks like we might be missing some places in the UI that would get the same font changes?

For example, the dashboard currently has cards w/ bold and smaller headers:

As well as the Software tab on the Host details page:

I think we want to be consistent. Not sure how you want to handle this. Whether we spec all the places we want to change in Figma or in the issue description it's up to you.

Hey @mike-j-thomas please let us know if you have any feedback on the updated font styles.

As for these kinds of dev notes, are the referring to props in the frontend (.tsx) component?

If so, I think we let's loop in Gabe to make sure he understands that.

I'm not sure what this means (maybe the engineering team will?):

[mike-j-thomas]

Hey @mike-j-thomas, please let us know if you have any feedback on the updated font styles.

Hey @noahtalerman, I'm not clear on what headings I should be looking at. Are you specifically referring to "Current versions" and "Target"? If so, these are correct. These are consistent with the headings throughout the other settings pages. The bold, smaller headings are for dashboard cards.

[marko-lisica]

As for these kinds of dev notes, are the referring to props in the frontend (.tsx) component?

I'm not sure what this means (maybe the engineering team will?)

@noahtalerman I'll align with Gabe, to make sure all dev notes are understandable and feasible

[marko-lisica]

Hey @noahtalerman, I'm not clear on what headings I should be looking at. Are you specifically referring to "Current versions" and "Target"? If so, these are correct. These are consistent with the headings throughout the other settings pages. The bold, smaller headings are for dashboard cards.

Hey, @noahtalerman & @mike-j-thomas I recorded a loom about title sizes, to describe my thinking and to ask you for feedback.

https://www.loom.com/share/2397b7ef69f34efdb1632e2de1080975?sid=2c6f2343-cdde-423f-8521-fc85d55e31c1

[mike-j-thomas]

Thanks, @marko-lisica. I see what you are referring to now. cc @noahtalerman

So, after a bit of back and forth, I think we should be strict with consistency and stick to only two heading styles:

• 24px regular for all page titles (including query, policy, software, vulnerability, and modal titles)
• 16px bold for all card titles and section titles (settings and controls sections, etc)

And then consider retiring the M-size 20px text style, because I can't see any need for it.

Here's why (I also dig into some knock-on effects with margin and paddings that should be considered, as well as some other contributors to overall inconsistency (hense the duration)): https://www.loom.com/share/c0b725f682ae4ec886dd8fd192d4b9db?sid=d44f7d07-29f1-4c12-9d01-538099cdae5c

[marko-lisica]

Thanks for the feedback @mike-j-thomas. Since this story is related to page headers I filed feature request to track this. Once it gets prioritized I will think through this and revisit your video.

[georgekarrv]

Hey team! Please add your planning poker estimate with Zenhub @ghernandez345 @gillespi314