issue: Improvement needed for the UI of Media permission card

[kaali001]

Describe the bug
As of now the Media permission card doesn't looks great, It needs some improvement.

To Reproduce
Steps to reproduce the behavior:

1. Go to chat page
2. Click on join button
3. See the media permission card

Below is the sample of Media permission card in the Figma design as per expected UI , But its only a sample so you can make changes
according to your creativity, but please inform about the final design you are making before making a PR.

Figma Design Link

[Suman-Jyoti-Phukan]

Hello @kaali001, sorry for responding late. I was quite busy past few days, you can assign me the task or you can open the issue for others. Thank you.

[kaali001]

@Suman-Jyoti-Phukan, Go ahead.

[kaali001]

Any update ?

[Suman-Jyoti-Phukan]

Hey,Sorry!! The last couple of weeks were quite hectic for me. I'm working on it and most probably i'll push the pr tomorrow.

[kaali001]

Any Update ?

[Suman-Jyoti-Phukan]

Hi @kaali001,

I hope this message finds you well. Apologies for the delay—I’ve been quite occupied with relocating for a new job, which unfortunately delayed my progress on the changes. I’ve now incorporated the updates, and I’d greatly appreciate it if you could take a moment to review them and share your feedback.

Looking forward to hearing your thoughts!

[kaali001]

Hey @Suman-Jyoti-Phukan ,

Great to hear about your progress, And for this issue our requirements have been changed a bit. Actually now we have to take user Name and languages as input so that further it can be used. This part is likely to be implemented on the UserPermisson.tsx component.

It can be modified as given steps :

1. Change the title Media Access Permissions to something which suits better.
2. Add a step progress completion bar on below the title , because now it would consist two part:
   • one for taking Input of user's name and A dropdown or multi-select option for users to select the languages they are learning.
   • second part for media permissions (camera and microphone).
3. Step-based Interaction: The component should display part one first and only after they are filled, activate a "Next" button to proceed to media permissions (camera and microphone).

Acceptance Criteria

1. User Input for Name:

   • A text input box to collect the user's name.
   • Basic validation to ensure the input is not empty before proceeding.

2. Preferred Language Selection:

   • A dropdown or multi-select input to let users pick one or more languages they are learning.
   • Provide a list of commonly learned languages (e.g., English, Spanish, French, etc.).

3. Step-by-Step Flow:

   • On opening the UserPermission popup, display the name and language input fields.
   • Enable the "Next" button only after both fields are filled.
   • On clicking "Next," render the existing media permissions UI for camera and microphone.

4. UI Enhancements:

   • Maintain a user-friendly and responsive design consistent with the existing UI.
   • Add appropriate error handling and tooltips for invalid input.

5. State Management:

   • Store the name and selected languages in the state and pass them as props or emit them as events to the parent component for further use.

Proposed Changes to UserPermission

• Add state variables for userName and preferredLanguages.
• Update the UI to display the new input fields as the first step.
• Introduce a step-based flow where the media permission UI is displayed only after completing the first step.
• Validate user input and manage form state to enable or disable the "Next" button.

[Suman-Jyoti-Phukan]

Hey, can you provide the Figma design for this? I’m currently short on time, and it would be a great help if you could share it. Thanks in advance

[kaali001]

I have made a sample UI as per requirement , You can fix where ever it needed to implement. check the figma design Link