Improve streamfield UI

[siimonevans]

Changes:

• Added hover interactions to action buttons and the ‘+’ buttons
• Increased padding outside and within Streamfield blocks
  • So that elements can breathe
• Increased size of icons for better legibility and moved to top of the blocks
  • Our rationale is that now that they stick as you scroll (very nice :)), they are of more value at the top so that as you scroll and blocks come into view, you instantly see the icon (when centered you don’t see it initially, especially on long blocks)
  • Moving the label alongside action buttons is more inline with the collapsible view
• Removed the right column (moved block label up to sit to the right of action buttons)
  • This is to make use of this space when streamfields are nested. We are however still using a max-width on the content area, as going full width on wider screens makes for a poor editor experience - particularly writing long blocks of text (very long reading-line)
• Reduced size of ‘+’ icon
  • Just a bit to reduce visual weight of these
• Re-styled and re-aligned the Add block buttons in the panel
  • Again, when they were all teal, it felt visually heavy. Prefer use of teal in the hover state
  • We also use a grid to lay these out in a more scannable way

[siimonevans]

@thibaudcolas please review :)

[thibaudcolas]

👏 I'll have a look but most likely only next week!

[BertrandBordage]

Thank you @SimonDEvans! As discussed on Slack and in the last core team meeting, I merge this with some changes. What I will do is remove the SIMPLE layout completely, as agreed unanimously by the core team. So the layout setting is removed and COLLAPSIBLE is the only possible layout.