UI Redundancy with Close Options in Manage Features Modal after Org is Created in OrgList.tsx #1380
Assignees
Labels
Comments
|
Congratulations on making your first Issue! 🎊 If you haven't already, check out our Contributing Guidelines and Issue Reporting Guidelines to ensure that you are following our guidelines for contributing and making issues. |
|
@rishav-jha-mech @aashimawadhwa Your comments please |
|
@harshpreet14 you are right, for this modal both cancel and cross icon is redundant, you can modify this modal and remove the cancel button. The behaviour should be like this
Since this modal is related to creation, make sure the header of the modal is in Primary Colour and its text is in white colour, |
|
Thankyou, working on it. Would raise a PR by tonight. |
harshpreet14
added a commit
to harshpreet14/talawa-admin
that referenced
this issue
Jan 6, 2024
Addressed the issue of UI redundancy as discussed in Issue PalisadoesFoundation#1380. What: - Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option. Impact: - Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`
|
This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue. |
palisadoes
pushed a commit
that referenced
this issue
Jan 22, 2024
… Features' modal. (#1393) * Fix: Addressed the issue of UI redundancy as discussed in Issue #1380. What: - Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option. Impact: - Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * reverted changes made to package-lock.json file * Fix:Replacing Modal Buttons with Bootstrap buttons. Changes Made: -Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI. -Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css. -Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling. -Implemented a new test to verify the functionality of the 'Go to Plugin Store' button. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /src/screens/OrgList/OrgList.test.tsx` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * fixed redundant test id- modalOrganisationHeader replaced with pluginNotificationHeader accodrdingly fixed tests * Update OrgList.test.tsx
Devesh326
pushed a commit
to Devesh326/talawa-admin
that referenced
this issue
Jan 25, 2024
…anism in the 'Manage Features' modal. (PalisadoesFoundation#1393) * Fix: Addressed the issue of UI redundancy as discussed in Issue PalisadoesFoundation#1380. What: - Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option. Impact: - Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * reverted changes made to package-lock.json file * Fix:Replacing Modal Buttons with Bootstrap buttons. Changes Made: -Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI. -Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css. -Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling. -Implemented a new test to verify the functionality of the 'Go to Plugin Store' button. Tests: - Tested the individual file by running this command: `npm run test --watchAll=false /src/screens/OrgList/OrgList.test.tsx` - Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx` * fixed redundant test id- modalOrganisationHeader replaced with pluginNotificationHeader accodrdingly fixed tests * Update OrgList.test.tsx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
In the 'Manage Features' modal, users are presented with two options to close the modal: a clickable 'X' icon and a 'Cancel' button. This presents a UI redundancy that could potentially lead to user confusion. The issue is observable in the OrgList.tsx component on both the
developandmainbranches.To Reproduce
Steps to reproduce the behavior:
Expected behavior
A single, intuitive method should be available for closing the modal to streamline the user experience.
Actual behavior
The modal features both an 'X' icon and a 'Cancel' button, offering two similar methods for closing which can be confusing.
Screenshots
Additional details
I'd like to inquire with the maintainers whether the presence of both close options was an intentional design choice. If one of them is to be removed to resolve this UI redundancy, could the maintainers advise which they would prefer? The 'X' icon offers a common modal dismissal pattern, while the 'Cancel' button provides explicit instruction, which might be more accessible. I would be more than happy to work on resolving this. Please assign this issue to me, and I will ensure to make the changes in accordance with the project's design principles.
Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359
The text was updated successfully, but these errors were encountered: