Improve the UI of Mentor Approval scene

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

Current Design
Screenshot 2021-07-05 at 10.34.53

Suggested Improvements:

  • Improve the radio buttons.

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

1 Like

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.

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


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

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

Great, I’ll start working on it.

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


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

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

1 Like

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


That confirmation popup will be there anyway

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

1 Like

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


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


Sure! I’ll change it.

I’ve sent the pull request, please review