Problem

The UI for the metadata feature in CURATE requires updated styling for design system consistency and to also improve the UX.

Solution

The updated metadata feature should be in a container (filled: #FFFFFF > outlined: 1px #D9DDE9). The titled of the dialogue should be "Metadata" (text-colour: #000000) with close functionality.

The content of the container is: metadata type (colour: #A1A1A1) and metadata values (colour: #000000). There is some minor wording changes.

The metadata values for assignees has 2 colours: annotation complete (colour: #000000) and annotation not complete (colour: #A1A1A1). The user can hover over these values and a tooltip indicates this.

The metadata may have a lot of content but it should not fall off the page! The container should have a gap of ~14px between the icons and the icons should have a gap of ~14px between the annotation progress. In this instance the metadata container should have a scroll functionality.

Adobe XD: https://xd.adobe.com/view/56374559-953f-4a01-9549-8160cf9817db-0364/

Considered Alternatives

I considered a couple routes to how to handle when a lot of metadata (mainly labels and assignees) are attached to one image. We could possibly have an expandable dropdown which after so many characters is cut off with an arrow to indicate user interaction.