Closed danilo-leal closed 1 week ago
https://deploy-preview-42180--material-ui.netlify.app/
No bundle size changes (Toolpad) No bundle size changes
Generated by :no_entry_sign: dangerJS against 2eb24c720c4ec54576b184299c8f5b2b571bfc49
@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.
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).line-height: 1
. The text inside is currently misaligned.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
.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.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.<kbd>
element.Screenshot of the suggested changes attached:
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
@colmtuite Okay, most of the things have been tackled already! Quick thoughts on some of them, though:
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.
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:
--MuiDocs-header-height
var size from 64px to 57px