BUG: Improve Modal Overlay Design and Input Field Accessibility

[shantanu020]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

🐞 Bug Report: Improve Modal Overlay Design and Input Field Accessibility

Description:
The form submission modal overlay and input field design have several issues affecting user experience and accessibility:

1. Low Contrast on Modal Text:

   • The modal that appears after form submission has poor text visibility due to low contrast between the dark background and the text. This makes the "Thank You" message hard to read.
   • Expected Behavior: The text should be legible with proper contrast.
   • Suggested Fix: Increase the contrast by lightening the text or darkening the modal background.

2. Modal Overlay Issues:

   • The star rating from the underlying form remains visible through the modal, making the interface look cluttered.
   • Expected Behavior: The modal should completely overlay the background or blur the background content when active.
   • Suggested Fix: Ensure that the modal fully covers the form or apply a blur effect to the background.

3. No Clear Closing Option for Modal:

   • The modal does not provide an intuitive way to close it or proceed after submission.
   • Expected Behavior: A close button or automatic redirection should be available after submission.
   • Suggested Fix: Add a close button or automatically redirect the user after a brief delay.

4. Input Field Accessibility and Style:

   • The "Your Name" and "Destination/Service" fields lack validation and proper styling. Additionally, the contrast between the text and the input borders is low.
   • Expected Behavior: Input fields should have required validation and better styling for accessibility.
   • Suggested Fix: Implement input field validation and improve contrast for better readability.

5. Inconsistent Modal Text Alignment:

   • The text in the modal is not centered properly.
   • Expected Behavior: Text should be aligned for a clean and polished appearance.
   • Suggested Fix: Adjust text alignment within the modal.

Steps to Reproduce:

1. Fill out the form fields.
2. Submit the form.
3. Observe the issues with the modal and form design.

Expected Behavior:
The modal overlay and form design should be accessible, clear, and user-friendly.

Environment:

• Browser: Microsoft Edge

By addressing these issues, the overall usability and visual design of the form will be significantly improved.

Record

• I agree to follow this project's Code of Conduct
• I'm a GSSOC'24 contributor
• I want to work on this issue

[github-actions]

Thanks for creating the issue in BuddyTrail!
Before you start working on your PR, please make sure to:

• ⭐ Star the repository if you haven't already.
• Pull the latest changes to avoid any merge conflicts.
• Attach before & after screenshots in your PR for clarity.
• Include the issue number in your PR description for better tracking.
  Don't forget to follow @PriyaGhosal – Project Admin – for more updates!

We're excited to see your contribution as part of GSSOC Extended Edition 2024 and Hacktoberfest! 🎉
Happy open-source contributing!

[github-actions]

Thank you for creating this issue! 🎉 Your issue will soon be reviewed by either the PA or a mentor. Please note that Level 1 is temporary and can be changed during the review. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[github-actions]

Hello @shantanu020! Your issue #991 has been closed. Thank you for your contribution!