Problem

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

Solution

The updated sort component should be in a dialogue box (filled: #FFFFFF > outlined: 1px #D9DDE9). The titled of the dialogue should be "Sort Data" (text-colour: #000000) with close functionality.

The box contains a select field, 2 radio buttons and 1 checkbox 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.

Once a user clicks off, the select field returns to original state with select field value remaining.

The radio button has 2 states: selected (colour: #02FFAD) and unselected (colour: #D3D3D3) - styled as Material UI default. Only one can be selected - sort by descending should be selected by default.

The checkbox has 2 states: selected (colour: #02FFAD) and unselected (colour: #D3D3D3). This is a toggle - should be unselected by default.

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

Once a user has clicked the button, the dialogue should close. The sorted data is decided into sections via text (size: 18px > colour #000000) and divided by a line (outline: 1px #949494).

Adobe XD: https://xd.adobe.com/view/dfadac64-eaae-4c33-a8d1-1309d4bc1f24-8afe/

Considered Alternatives

N/A