Visually tweak blocktype div in Matrix titlebar

[thupsi]

While waiting for the upcoming Matrix field UI modes, I have been thinking of very simple suggestions for subtly enhancing the current fields' appearance from a usability perspective. I would like to post each one as a separate discussion, so here goes the first one:

The blocktype div in the titlebar of Matrix fields is styled as simple text, and this IMO causes at least three problems:

• Tthe blocktype is a little too subtle, and the Matrix chrome a little too heavy visually, causing one to have to "hunt" a little to pinpoint the exact blocktype of each block. The visual hierarchy is not immediately apparent. I'm talking about maybe a split second, but those add-up!
• When the Matrix field is collapsed, the blocktype blends visually with the preview
• When scrolling through multiple expanded Matrix blocks, there is not enough visual separation between blocks, so it becomes difficult to see where a block ends and another one begins. This maybe could (should?) be alleviated with other visual means, but a more prominent blocktype could help, as it would function as a visual indicator of the starting point of each Matrix block.

As a solution, I would like the blocktype to be a little more visually emphasized.

I remember seeing a discussion here, where the dev was using custom styling to do something like that, but IMO it was a little too much visual noise and did not blend with the current Craft UI.

I have made a "quick and dirty" styling mockup of my own:

It's just a heavier font weight, a little padding, and a border. I think that's subtle enough but adds a little clarity.

Any opinions on this? Thanks!

[brandonkelly]

Oh that looks great! We have a couple other subtle UI improvements we want to make for Matrix fields sooner than later, so I’ll make a note to play with this idea as well.