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).
Problem
The UI for the
sortcomponent in CURATE requires updated styling for design system consistency and to also improve the UX.Solution
The updated
sortcomponent 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#A1A1A1but the selected value text should be#000000.The dropdown menu is the same width as the select field. The row hover state should be
#E5E5E5always. 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