ODK-X Survey: Redesign the delete dialog box

[teelda]

When a returning user clicks on the list of forms created, there is a button that allows the user to either delete or edit an instance. The delete button opens up the dialog box shown in the screen shot below and this doesn't conform to modern design and the ODK-X design Guidelines

Why the dialog box needs to be improved:

• There's no hierarchy in the current design for a high risk action such as deleting an instance.
• Dialogs help users act on information, so the call to action should be stated clearly.
• The design can be updated in line with the ODK-X Design Guidelines

Design Guidelines: Colours, icons and other user interface elements, all conform to the ODK-X Design Guidelines

[Cveman1]

I think you should make your issue more descriptive for posterity. See how it is laid out by @maprehensive in #359 and #360.

[Cveman1]

Take a look at the guidelines for dialogues from Material Design here, and take a cue on what's best for this dialogue.

Also, make one of the buttons less prominent than the other.

[teelda]

@Cveman1 @maprehensive This is the updated dialog based on the feedback I got and the material design system guide you shared.

For the second dialog design, I followed the placement of the text buttons as seen in this Dialog example shown in Material design 3 Design system

I suggested this because deleting an instance is a high risk action. Placing the cancel button first would allow the users decide if they want to carry out the action or not, which gives the user more control and prevents error.

[maprehensive]

Moving back to In Consideration since there's no one assigned.

[medinasheriff]

Hello @maprehensive, @Cveman1, My name is Medina Sheriff, I am a 2024 outreachy applicant. I will like to give this issue a shot if it's still open and valid. Can I have it assigned to me? Thank you.

[maprehensive]

@juayuohcarineneng19 has submitted a PR for this issue: https://github.com/odk-x/app-designer/pull/212