Refresh: Refactor transition component

[craigcook]

Using an SVG mask for the pixel transition element has the drawback of requiring a solid fill color to overlap the content of the previous element. It also requires sufficient bottom padding on the previous element to allow for that overlap. In practice this has proven problematic.

So instead of it being a mask on the top edge we think it'll be more practical and flexible for it to be its own component again, still with an SVG mask, but it can sit between elements and not try to overlap them. It'll mean we need some presentational classes for different color combinations but that's fine (it's a presentational anyway element).