Improve component overlay to clearly indicate changes and (workflow) state

-{}Updated scope{}-

Overview of the components states

As a user I want to easily identify components that have unpublished changes or are new/not yet published on an experience page

Acceptance criteria:

• When a component as unsaved or unpublished changes (including having been moved) display a warning icon leading the component label
• When the component has been added and not published yet display a new icon leading to the component label
• [TBD] display an overlay with a remove icon leading to the label when a component has been removed & the page has not been published & the overlay is active (hide the component otherwise)

--{}Old scope{}--

See overview and mock-up

In summary:

• Hide container and component outlines for containers that the user is not authorised to edit
• Mark containers and components with changes with a 'changed' icon
• For xPages that are read-only (either an xpage with an outstanding, not-rejected 'request', scheduled for (de)publication, or an earlier version of an xpage, or an xpage that is part of a project and in review/approved):
  • hide container outlines
  • show only the outlines of components that have been changed,
  • use a dotted line for those component outlines
• Use a dotted line for components in locked containers on xpages and on hstpages too
• Change the container and component outline colors and widths as described in ###