[docs-infra] Tigthen up the header design

[danilo-leal]

• [x] I have followed (at least) the PR section of the contributing guide.

This also includes the website header! The main purpose of the changes below is to carve a few height pixels out and fine-tune spacing and sizing a bit. Here's a summary:

• Remove "MUI Core" from the product switcher label—we want to reduce mentions to "Core"
• Reduce the --MuiDocs-header-height var size from 64px to 59px
• Fine-tune icon button style definitions

[mui-bot]

Netlify deploy preview

https://deploy-preview-42180--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 2eb24c720c4ec54576b184299c8f5b2b571bfc49

[colmtuite]

@danilo-leal Had a peek 👀. I've got some notes, I didn't mean for it to be this long, but it's mostly multiple points talking about the same small details.

1. The controls inside the header are misaligned; they're closer to the top of the viewport than to the header's bottom border.
2. A few things that are probably contributing to any difficulty in center-aligning things: the header is split into two sections, in terms of how it's coded, there seems to be no need for that? It's set to flex-direction: column, when it's a row. There seems to be no need for the min-height and height, if you just remove those properties (and rely on the padding), the misalignment goes away (and the header is now a height that fits into an 8px scale).
3. I would reduce the padding even further to 8px. That brings the header to 48px (plus the border).
4. The search button needs line-height: 1. The text inside is currently misaligned.
5. The magnifying glass icon is 20px, but the icon button icons are 18px. All icons should be consistently sized for good visuals, but also so we can use consistent spacing values properly. I would set all icons to 16px.
6. The magnifying glass icon is much closer to the left edge of the button than the "Search..." label is to the icon.
7. Related to previous point: the search button's padding-left value is 4.8px. This is very odd, we shouldn't have weird decimal values like this, all spacing/sizing should be uniform and consistent. I'd set this value to 8px, and text label's margin-left value to 4px.
8. The logo is currently 30px x 32px, which is weird, and again can cause issues with alignment. All svgs should be square.
9. The search button's border is opaque, and not clipped, so it's conflicting with the button's shadow, causing things to look muddy. If we set box-sizing: border-box; background-clip: padding-box on the search button, and make the shadow transparent (something like rgb(18 20 21 / 12%)), then the shadow will bleed through and prevent muddiness.
10. Related to previous point: The search button just has a single outset shadow. Shadows don't render properly in browsers, and to fix that, you can blend multiple shadows together to create a smoother effect. Gradients work the same way. The shadow is also quite opaque, which contributes to muddiness. Something like rgb(66 69 75 / 6%) 0px 1px 2px 0px, rgb(66 69 75 / 6%) 0px 1px 4px -1px, rgb(66 69 75 / 6%) 0px 2px 8px -4px will look smoother. Now you could also remove the bottom inset shadow, which was intended to produce a similar effect, if I understand correctly.
11. Related to previous point: I would then set the same shadow/border treatments on the icon buttons.
12. I'd make the search button text label lighter so it looks more like a placeholder.
13. The search button and icon button hover styles are very stark compared to the normal state. I'd make them much more subtle.
14. The "⌘K" inside the search button should be a <kbd> element.
15. I'd make the version number 400 weight and also light gray, to differentiate it from the product switcher menu button, and introduce some hierarchy between them. To reinforce the flow that you first choose the product, then choose the version.

Screenshot of the suggested changes attached:

[colmtuite]

Oh also, I forgot to mention the header's background blur. Was that removed in this PR? I don't see it in the changes. I thought that was a kinda cool vibe

[danilo-leal]

@colmtuite Okay, most of the things have been tackled already! Quick thoughts on some of them, though:

• 2: The header is split into two because it uses the mobile drawer structure (where the drawer collapses in a mobile breakpoint and other items are shown) for the desktop layout. I think I’ve cleared up some of those unnecessary CSS, though, so it should feel better now!
• 5: I’ve standardized the icon sizes to 18px as 16px looked way too small for these Material Icons — they don’t look as good as 18px imo. Things is that they mostly don’t have an internal bounding box that all icons respect, and thus, for example, the GitHub logo icon looks bigger than the notification icon.
• 8: Will change the Material logo SVG in a later PR.
• 10: I have seen other folks talk about multiplying shadow values, and I’m always torn when the component is super small, and the shadows are meant to be subtle. I haven’t pushed those values specifically yet, and I wouldn’t say I am already perfectly happy with the current values, too… they’re, hopefully, feeling a bit better as I’ve tweaked them here, but we’ll maybe iterate a tiny more. I’ll eventually create a PR to set them aside as a shadow token so we can pass it along to other components more easily.
• 15: It Felt like font-weight 400 for that button made it look disabled rather than second-order of hierarchy, so I used text.secondary, which is a bit darker (and passes contrast).

PS: I still couldn't figure out why the version button don't have the icon animation and the product switcher button has... even though the color is different, that CSS is defined at the size level, and they have the same size. Dunno 🤷. Will probably fix that later to merge this one faster.