The current modal structure uses the overlay class directly for managing the modal window and its various states. This structure needs to be updated to improve code organization and readability by introducing a new up-window-container as the wrapper for the modal and overlay. The refactor aims to separate responsibilities between the modal content (up-window) and the overlay (up-window-container).

Proposed Changes:

1. Introduce up-window-container:

   • Refactor the modal structure by wrapping it with up-window-container, which will handle the overlay-related responsibilities like blur, grayscale, and the modal's active state.

2. Move the Overlay Outside of the Modal Logic:

   • Move overlay-related classes such as active, blur, grayscale, openingAnimation, and closingAnimation to the up-window-container to separate these concerns from the modal content.

3. New Structure:
   Replace the current structure with:

   <div
     #modal
     class="up-window-container"
     [class.active]="isOpen()"
     role="dialog"
     aria-labelledby="dialog-title"
     aria-describedby="dialog-description"
     aria-modal="true"
     [attr.aria-hidden]="!isOpen()"
   >
     <div
       class="overlay"
       (click)="closeWindow('overlay')"
       [class.fade]="openingAnimation"
       [class.fade-out]="closingAnimation"
       [class.active]="isOpen()"
       [class.blur]="blur"
       [class.grayscale]="grayscale"
     ></div>
   </div>

4. Code Simplification:

   • This new structure will provide better separation of concerns, making it easier to manage the modal's layout and overlay effects independently.

Benefits:

• Improved readability and maintainability of the modal component.
• Clear separation between the modal content (up-window) and the overlay (up-window-container).
• Easier to add future enhancements or animations to the overlay and modal.

Expected Outcome:
This refactor will result in cleaner code, better organization, and a more maintainable structure for the modal, especially for handling the active state, animations, and different visual effects (blur, grayscale).