Enhance Confirmation Modal Design

[Yashgabani845]

Current Behavior

The current confirmation modal has a basic design with minimal styling and functionality. It only shows a simple "Confirm" button and close (X) option without proper visual hierarchy or user-friendly elements. The design lacks UI patterns and clear visual feedback for user actions.

Desired Behavior

The confirmation modal should be enhanced with:

• Clear visual hierarchy with a proper title and confirmation message

• Two distinct buttons: "Cancel" and "Confirm" for better user choice

• Visual icons (like add file icon) to improve user understanding

• Proper spacing and padding for better readability

• Hover effects and transitions for better interactivity

• Accessible design patterns following WCAG guidelines

Screenshots / Mockups

Implementation

1. Update the modal container with proper positioning and overlay
2. Add colours which are matching the theme in model
3. Implement proper button styles with hover effects
4. Add necessary icons using inline SVG
5. Implement proper spacing and typography
6. Add smooth transitions for opening/closing

Environment

• Operating System: [e.g., Windows, macOS, Linux]
• Browser (if applicable): [e.g., Chrome, Firefox, Safari]
• Version of Software/Project: [e.g., v1.0.0]

Additional Information

This enhancement will improve the user experience by providing clear visual feedback . The new design will maintain consistency with other parts of the application while providing a more professional and polished look.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[Yashgabani845]

@walterbender what is your thought on this, should i work on this ?
i can design the model which matched with theme of the website

[walterbender]

Sure. I think it will make it more obvious what is going on. And whereas it is a modal action, making it a dialog is appropriate.

[MildPXL]

Hi, I can work on this, i'm a product designer, you can view my portfolio here: https://www.notion.so/mildpxl/Hi-I-m-Precious-2c1a831f761c4df1a7deb9705f6a1600?pvs=4