Annotation Group Flyout Design Suggestions

[MichaelMarcialis]

In viewing the visualize library annotation group flyout recently, I noticed a handful of small design nitpicks that I thought I'd call out here. None of these are necessarily required for implementation before the Borealis theme, but the following suggestions should integrate with the new theme a bit better. Changes include:

Annotation List Changes

• Remove the background color, padding, and border radius from the annotation list container.
• Expand the reorderable drop zone to the bleeding left and right edges of the "Edit annotation group" section.
• Change the padding of the reorderable drop zone to 4px 24px.
• Change the margin of the reorderable drop zone to 0 -24px.
• Change the background color of the reorderable drop zone to $euiColorBackgroundLightSuccess.
• Change the text "Add annotation" to "Add or drag-and-drop an annotation".

Preview Changes

• Change the preview section background color to $euiColorBackgroundBaseSubdued.
• Remove white background color from the visualization.

Before

After

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)