Centralize and Standardize Modal Implementation

[mahid797]

Our current approach to modals relies on a ModalWrapper.tsx component and direct usage of the MUI Dialog in various places. This has led to duplicated code, inconsistent styling, and an overly large wrapper file. To keep our application maintainable, we need to centralize and standardize how modals are created, styled, and managed—similar to the improvements we did for toast notifications.

A well-structured, DRY solution should allow easy creation of new modal variations without duplicating layout or styling logic, ideally using smaller components and/or a global modal management approach.

---

Tasks

• Audit All Existing Modals
  Locate and list each modal usage across the codebase (including ModalWrapper.tsx and any direct MUI Dialog usages).

• Propose a Unified Modal Strategy

  • Decide on a centralized approach (e.g., a global provider vs. a reusable component pattern).
  • Determine how to handle variant-specific modals (e.g., upload, delete, invite) in a more generic fashion.
  • Outline how styling will remain consistent and how content will be injected or composed (e.g., separate components for each modal’s content).

• Create Modular Components

  • Break down the existing ModalWrapper.tsx into smaller, focused components.
  • Where appropriate, create or refactor components (e.g., UploadBox, InviteBox) into self-contained, reusable pieces.

• Implement the New Modal Architecture

  • Implement the proposed pattern (provider or otherwise).
  • Ensure it supports custom styling, form handling, and transitions.

• Refactor Existing Code

  • Migrate all current modals—both inside ModalWrapper.tsx and directly used MUI Dialogs—to the new standardized system.
  • Remove or significantly slim down ModalWrapper.tsx if it is no longer needed.

• Manual Testing

  • Verify that each modal displays correctly (open/close functionality, alignment, backdrop, etc.).
  • Test form elements (like file uploads, email fields) to ensure data is captured or reset as expected.
  • Check the browser console and terminal logs for errors or warnings during modal usage.

---

Guidelines & Notes

• Aim for DRY: Avoid repeating layout or styling logic in each modal.
• Maintain or improve custom MUI styling: Ensure each modal aligns with the current UI/UX design.
• Consider future needs: The final solution should be easily extended for new modal types or additional features.

---

Benefits

• Consistency: All modals share the same base layout, styling, and behavior.
• Maintainability: Simplifies updates, fixes, and onboarding for new developers.
• Scalability: Adds new modal types quickly, without rewriting boilerplate code.