UI Improvements Tracker

[Roaster05]

Issue Description

This issue serves as a central tracker for all UI-related improvements reported for the extension/web app. Contributors should first comment on this issue before starting any work, outlining their understanding and proposed approach using the format provided below.

Contribution Process

1. Read through existing UI issues and understand the required improvements.
2. Comment on this issue with your approach before implementing any changes. Use the format below.
3. Wait for approval or feedback before proceeding with development.
4. Implement changes while ensuring consistency, responsiveness, and accessibility.
5. Submit a PR, linking it to this issue for tracking.

Comment Format (Use this when commenting before starting work)

/*
- Summary of the UI issue(s) you plan to work on.
- Your proposed approach to fixing them.
- Any dependencies or potential blockers.
- Wireframe/Snapshot of the UI before and after the change.  
- Estimated time required.
*/

Example Comment

/*
- Planning to fix button alignment issues on the settings page.
- Will adjust CSS flex properties and ensure responsiveness.
- No dependencies, but might need feedback on final styling.
- Estimated completion: 2 days.
*/

[bikas295]

/*
Summary of the UI issue(s) I plan to work on:

• Homepage Layout: UI elements appear uneven, leading to an inconsistent user experience.
• Quiz Page Button Alignment: Buttons on the quiz page are misaligned, affecting usability.
• Button Hover Effects: Hover effects are inconsistent across different buttons.
• Branding Gradient Consistency: The branding gradient lacks uniformity across the application.
• Typography Spacing: Text spacing is inconsistent, impacting readability.

My proposed approach to fixing them:

• Homepage Layout: Implement CSS Grid for a structured and responsive layout.
• Quiz Page Button Alignment: Utilize CSS Flexbox to ensure proper alignment.
• Button Hover Effects: Apply uniform CSS transitions to maintain consistency.
• Branding Gradient Consistency: Define a single gradient variable for branding elements.
• Typography Spacing: Standardize typography spacing using CSS variables.

Any dependencies or potential blockers:

• Dependencies: None
• Potential Blockers: Need confirmation on branding gradient and typography choices.

Estimated time required:
2+ days
*/

[ishaanxgupta]

@Roaster05
Enhance UI Loader
Summary of Issue:- Currently, the loader displayed during the quiz generation process is very basic. It is just a white circle with no animation or interactive design. This makes the user experience feel less engaging and outdated.
Improving the loader to a more visually appealing and animated design will enhance the overall user interface and provide a better experience for users while they wait for their quiz to be generated.
Proposed Solution:- Replace the current static loader with an animated loader.
Use a loader design that matches the project’s theme and colors.
A subtle animation indicating quiz preparation, such as a "Generating" animation with relevant icons.
Before:-
https://github.com/user-attachments/assets/449a6167-fd5c-42e3-981a-09845d569786
After:- https://github.com/user-attachments/assets/b0841a0a-ab2f-48b2-888b-7eecffd6c65d
Estimated Time Reqd:- 1 day

I had also raised a PR #135 will add a commit on top of it if this gets approved

[ishaanxgupta]

Enhance home page
Summary:- The current UI on the landing page, where features like "Doc/Audio Input," "In-depth Questions Gen," and "Dynamic Google Form Integration" are displayed, lacks interactivity. This makes the page appear static and less engaging to users. Adding an interactive hover-based expansion for larger screens will improve user experience and make the UI more dynamic and visually appealing.
Proposed Solution:-
Hover-based Animation for Large Screens:
Add a hover effect that expands the feature tiles when hovered over, making the content visually engaging.
Responsive Behavior:
Disable the hover animation on smaller screens (e.g., phones/tablets) to ensure compatibility and usability across devices.
before:-
after:- https://github.com/user-attachments/assets/4e94ef15-1874-49ed-81cb-b15b3ea29652

estimated time reqd:- 1 day

@Roaster05 Please have a Look, I had already implemented this after approval will raise the PR

[ishaanxgupta]

Feature:- Add a SidePanel View for Generated Quizzes

Proposed Solution:- Introduce a SidePanel View to provide users with an organized and enhanced experience when accessing their previously generated quizzes. This feature will improve accessibility and streamline navigation by displaying recent quizzes directly in a sidebar.
Reference issue #150
SS:- https://github.com/user-attachments/assets/705cb9e0-cda6-4fbd-a25b-aaf77d767567

Reqd days:- 1
have already worked on this in PR #152
Waiting for your approval

[flashpunch0-0]

Current behaviour :
The back button redirects to popup page
cons - what if someone wants to change the type of questions

popup page

home page

Proposed Implementation:
change the href from src/popup/popup.html to src/pages/home/home.html

the related Pull request is #255

[Roaster05]

@Roaster05 Enhance UI Loader Summary of Issue:- Currently, the loader displayed during the quiz generation process is very basic. It is just a white circle with no animation or interactive design. This makes the user experience feel less engaging and outdated. Improving the loader to a more visually appealing and animated design will enhance the overall user interface and provide a better experience for users while they wait for their quiz to be generated. Proposed Solution:- Replace the current static loader with an animated loader. Use a loader design that matches the project’s theme and colors. A subtle animation indicating quiz preparation, such as a "Generating" animation with relevant icons. Before:- https://github.com/user-attachments/assets/449a6167-fd5c-42e3-981a-09845d569786 After:- https://github.com/user-attachments/assets/b0841a0a-ab2f-48b2-888b-7eecffd6c65d Estimated Time Reqd:- 1 day

I had also raised a PR #135 will add a commit on top of it if this gets approved

/* Summary of the UI issue(s) I plan to work on:

• Homepage Layout: UI elements appear uneven, leading to an inconsistent user experience.
• Quiz Page Button Alignment: Buttons on the quiz page are misaligned, affecting usability.
• Button Hover Effects: Hover effects are inconsistent across different buttons.
• Branding Gradient Consistency: The branding gradient lacks uniformity across the application.
• Typography Spacing: Text spacing is inconsistent, impacting readability.

My proposed approach to fixing them:

• Homepage Layout: Implement CSS Grid for a structured and responsive layout.
• Quiz Page Button Alignment: Utilize CSS Flexbox to ensure proper alignment.
• Button Hover Effects: Apply uniform CSS transitions to maintain consistency.
• Branding Gradient Consistency: Define a single gradient variable for branding elements.
• Typography Spacing: Standardize typography spacing using CSS variables.

Any dependencies or potential blockers:

• Dependencies: None
• Potential Blockers: Need confirmation on branding gradient and typography choices.

Estimated time required: 2+ days */

include a wireframe

[Roaster05]

Enhance home page Summary:- The current UI on the landing page, where features like "Doc/Audio Input," "In-depth Questions Gen," and "Dynamic Google Form Integration" are displayed, lacks interactivity. This makes the page appear static and less engaging to users. Adding an interactive hover-based expansion for larger screens will improve user experience and make the UI more dynamic and visually appealing. Proposed Solution:- Hover-based Animation for Large Screens: Add a hover effect that expands the feature tiles when hovered over, making the content visually engaging. Responsive Behavior: Disable the hover animation on smaller screens (e.g., phones/tablets) to ensure compatibility and usability across devices. before:- after:- https://github.com/user-attachments/assets/4e94ef15-1874-49ed-81cb-b15b3ea29652

estimated time reqd:- 1 day

@Roaster05 Please have a Look, I had already implemented this after approval will raise the PR

its decent but personally i don't feel it provides much of a value at the moment and would recommend you to add this up as an inclusion to a seperate UI change

[Roaster05]

Feature:- Add a SidePanel View for Generated Quizzes

Proposed Solution:- Introduce a SidePanel View to provide users with an organized and enhanced experience when accessing their previously generated quizzes. This feature will improve accessibility and streamline navigation by displaying recent quizzes directly in a sidebar. Reference issue #150 SS:- https://github.com/user-attachments/assets/705cb9e0-cda6-4fbd-a25b-aaf77d767567

Reqd days:- 1 have already worked on this in PR #152 Waiting for your approval

isnt the sidePanel view already enabled?

[Roaster05]

Current behaviour : The back button redirects to popup page cons - what if someone wants to change the type of questions

popup page

home page

Proposed Implementation: change the href from src/popup/popup.html to src/pages/home/home.html

the related Pull request is #255

yeah this can be changed @Aditya062003 what do you think?

[ishaanxgupta]

Feature:- Add a SidePanel View for Generated Quizzes
Proposed Solution:- Introduce a SidePanel View to provide users with an organized and enhanced experience when accessing their previously generated quizzes. This feature will improve accessibility and streamline navigation by displaying recent quizzes directly in a sidebar. Reference issue #150 SS:- https://github.com/user-attachments/assets/705cb9e0-cda6-4fbd-a25b-aaf77d767567
Reqd days:- 1 have already worked on this in PR #152 Waiting for your approval

isnt the sidePanel view already enabled?

Nopes I had raised a PR for this long ago but side panel was not present which shows 5 latest quizes