[Hacktoberfest] Modals and Pop-ups Design for Mosaicra UI

[gautamankoji]

🚀 [Hacktoberfest] Modals and Pop-ups Design for Mosaicra UI

Issue Description: We are seeking contributors to design Modals and Pop-ups for the Mosaicra UI Library. Modals and pop-up components are essential UI elements used to display additional content, notifications, and dialogs without leaving the current page. Your contribution will focus on designing flexible, customizable, and accessible modals, dialog boxes, and overlays that align with Mosaicra UI’s design principles.

Components to Design:

1. Dialog Boxes
   • Standard modal dialog for alerts, confirmations, and input prompts.
   • Variations for different use cases (e.g., alert modals, confirmation dialogs, form modals).
2. Overlays
   • Background overlays that dim the main content when modals are active.
   • Support different opacity levels and colors based on content hierarchy.
3. Pop-up Modals
   • Lightweight pop-ups for notifications or small interaction elements.

Design Guidelines:

• Use the Mosaicra UI color scheme and ensure that modals are responsive across devices.
• Make modals customizable, allowing users to modify their size, colors, borders, shadows, and animations.
• Accessibility is key! Ensure the modals are keyboard-navigable, have proper focus management, and meet WCAG 2.1 standards (e.g., accessible labels, closing via keyboard).
• Modals should have smooth transitions and animations using Framer Motion or GSAP.
• Ensure that the modals work well with both light and dark themes.
• Incorporate close buttons and an option to close modals by clicking outside or pressing Esc.

Deliverables:

• A Figma file with designed modal components, dialog boxes, and overlays.
  • Include states for opening, closing, and interaction inside modals (e.g., buttons, forms).
  • Annotate designs with guidelines on animations, accessibility features, and customization.
• Provide examples of modal usage for different scenarios (e.g., login modals, confirmation dialogs, etc.).
• Ensure documentation within the design file, showing how these components can be customized and reused.

How to Contribute:

1. Fork the repository.
2. Create a new branch with a clear name for your feature (e.g., feature/modals-popups).
3. Design the Modals and Pop-ups in Figma and link your design file in your pull request.
4. Follow the Mosaicra UI design system guidelines and ensure the modals are reusable for different scenarios.
5. Submit your pull request titled: Design: Modals and Pop-ups.

Additional Information:

• This issue is part of Hacktoberfest, and accepted pull requests will count toward your Hacktoberfest contributions.
• Ensure your modals are scalable across all screen sizes (mobile, tablet, desktop).
• Feedback will be provided during the design process to help you refine your work.
• Join our Slack channel for real-time communication and assistance if you have questions or need guidance.

Tips:

• Consider inspiration from popular UI libraries like Material UI or Ant Design, but bring in Mosaicra’s unique style and aesthetic.
• Make use of motion design for transitions, using tools like Framer Motion or GSAP for smooth animations.

We’re excited to see how you can enhance Mosaicra UI with well-crafted modals and pop-ups. Happy designing! 🎉