[Improvement] Mode-Switching UI for Better Intuitiveness and Clarity

[yatikakain]

The current UI for switching between the two modes of operation in the extension (i.e., providing content to generate questions & answers and asking questions from the content) relies on a simple toggle button. While functional, this design lacks clarity and visual appeal, which can lead to confusion for new users. A more intuitive and user-friendly design would enhance the overall experience.

Current Problem:

• The toggle button is not clearly labeled, which can be confusing for users unfamiliar with the modes.
• Users are unable to visually differentiate between the two modes at first glance.
• The UI lacks any description or preview of what each mode does, which could improve usability.

Suggested Improvements:

• Replace Toggle with Dropdown or Tabs: Use a dropdown menu or tab system to clearly distinguish between "Question Generation" mode and "Ask from Content" mode.

• Add Descriptive Icons and Labels: Introduce icons with text labels to help users visually differentiate between the two modes.

• Mode Preview or Description: Display a short description of each mode when the user hovers over or selects a mode, explaining its functionality.

• Color-Coded Mode Selection: Use color schemes to visually indicate which mode is currently active, providing instant feedback to the user.

Benefits:

• Enhances the intuitiveness and usability of the extension.
• Helps users understand the purpose of each mode at a glance, reducing confusion.
• Improves the aesthetic appeal of the UI with a more modern and structured design.

I would like to work on this issue to implement the suggested improvements. Please assign it to me.

[Aditya062003]

I’ve assigned this issue to you.

[yatikakain]

@Aditya062003 please review the PR #55

[Aditya062003]

Great work, Merged! 🚀