Improve the UI of Mentor Approval scene

[kumuditha_udayanga]

Hi all, this thread is to discuss about improving the UI of the Mentor Approval scene in the “Mentor-Confirmation” state.

Current Design

Suggested Improvements:

• Improve the radio buttons.

Feel free to add your suggestions and comments below. @EngTeam

[kumuditha_udayanga]

Progress Update:
I came up with two suggestions, please find the wireframes attached below and add your comments and suggestion below. @Gravewalker @anjisvj @jaye

1. Display each mentor in a card as in “Apply for a Mentor”, and the user can select one of those cards, click on confirm.

2. Remove the “Confirm” button and add a “Select” button in front of each mentor.

[Gravewalker]

I love the first design. Shall we move forward with that?

[anjisvj]

I also like the first design. Good job! @kumuditha_udayanga

[kumuditha_udayanga]

Great, I’ll start working on it.

[kumuditha_udayanga]

• I created the scene similar to the first wireframe above mentioned.
  

Suggestion:

• Shall we remove the ‘Confirm’ button and add a ‘onClick’ event to the card where it goes to the ‘confirmApproval’ modal. @Gravewalker @anjisvj

[anjisvj]

I think we can remove the confirm button. WDYT @Gravewalker ?

[akshika47]

I think the button is ‘fine’ to be there. That mitigates accidental clicks. Good for ‘Error Prevention’ What do you think?

[anjisvj]

That confirmation popup will be there anyway

[Gravewalker]

Yup let’s keep the confirm model, @kumuditha_udayanga can we add a blue border to the selected card?? Would look nice.

[anjisvj]

confirm modal is going to be there anyway. The popup will come when user clicks on a mentor instead of the confirm button

[Gravewalker]

I like the confirm button there. Like what @akshika47 has said it’ll mitigate accidental clicks.

[kumuditha_udayanga]

Sure! I’ll change it.

[kumuditha_udayanga]

I’ve sent the pull request, please review

Improve mentor confirmation UI