Update Compare Annotations Styling

[joshuajames-smith]

Problem

The UI for the compare annotations feature in CURATE requires some polishing to the styling for design system consistency and to also improve the overall platform UX.

Solution

The updated view annotations feature should be in a dialogue box (filled: #FFFFFF > outlined: 1px #D9DDE9). The titled of the dialogue should say "View Annotations" (text-colour: #000000) with close functionality.

The box contains text and 2 select field divided by a line (outline: 1px #D9DDE9) with a disabled button as standard (fill: #D3D3D3 > border-radius: 6px > text-colour: #595959).

The hover state for the select field outline should change colour to indicate user interaction (outline: #02FFAD).

When the select field is clicked by a user, the outline should change colour to indicate user interaction (outline: #000000) with the custom arrow icon pointing up. The placeholder text should be #A1A1A1 but the selected value text should be #000000.

The dropdown menu is the same width as the select field. The row hover state should be #E5E5E5 always. The selected value should be marked with a tick icon to the left. Any users who HAVE NOT marked their annotations as complete should be greyed out (colour: #A1A1A1) with hover state tooltip - this should NOT be clickable.

Only once a user has selected a 2 users should the button become active (fill: #02FFAD > border-radius: 6px > text-colour: #000000). A user must click the button to view annotations otherwise clicking away will cancel the action.

Adobe XD: https://xd.adobe.com/view/5c7c725c-c68e-4dee-8790-cc6e500735ae-092f/

Considered Alternatives

N/A