Easier findability of the functionality to add blocks between other blocks

[clarkepaul]

We've had feedback that the initial functionality of adding blocks between other blocks is hard to discover but really loved. @newleeland has created some recommendations for how this can be improved here, approach still to be decided.

Two interactive prototypes to illustrate this
https://codepen.io/newleeland/pen/ormVYx

Prototype 1: Line design.

• Bigger cursor hitbox
• Smaller hover delay
• High contrast line

Prototype 2:

• Add block buttons always on
• However, can be less obvious this is adding a block

Implementation

• We're going for option 1

Pull request

• Make the HoverBar more visible #724

[newleeland]

@maxime-rainville just FYI
The key part of OPTION 1, isn't so much moving the plus to the middle. but the shorter delay time the removal of the grey line in favour of the the high contrast blue line on hover.

[maxime-rainville]

I'm ditching the time out all together and replacing it with a CSS delay instead.

That will make the component simpler and allow us to remove a bunch silly timeout logic.

[ScopeyNZ]

Yeah the CSS delay wasn't possible with the original implementation because there were instances where certain mouse movements would cause it to show immediately rather than after a delay.

[maxime-rainville]

The delay is currently at 200ms, which is already pretty small to begin with. The card calls for reducing even smaller.

I think in this context it's probably worth using CSS only and having it show immediately in some instance.

This is what it looks like so far https://www.youtube.com/watch?v=qIgJk0JAfrU

[robbieaverill]

Nice @maxime-rainville