## **Acceptance criteria**

* The current browser modal is substituted with this implementation.
* The modal is composed with this elements in order from top to down:
* Header: with a title in this case "Remove file link" / "Delete attachment" _(text needs to be checked)_.
* Divider: full width.
* Content of the modal: in this case a simple Begin of the insertiontext:
* End of the insertion Begin of the deletion textEnd of the deletion "Are you sure you want to unlink this file Begin of the deletion link? This file will still be accessible in Nextcloud but will be removedEnd of the deletion from Begin of the insertionthis work package? Unliking does not affectEnd of the insertion the Begin of the insertionoriginal file and only removes the connection to this work package."End of the insertion Begin of the deletion files list in OpenProject."End of the deletion _(text needs to be checked)._
* It might change depending of the modal (eg. cards on boards, text fields in backup Begin of the insertioncodes...). End of the insertion Begin of the deletion codes...).End of the deletion
* Action bar with always two actions:
* "Cancel" button to cancel the process.
* Action button in this case "Remove link" / "Delete attachment" (it might change the style of the button if Begin of the insertionthe action isEnd of the insertion Begin of the deletion its aEnd of the deletion destructive or not).
* This modal will be added to the Begin of the insertiondesign system.End of the insertion Begin of the deletion DS.End of the deletion
* The alert modal when a work package is deleted will follow this implementation Begin of the insertionto keep things coherent.End of the insertion Begin of the deletion for coherence reasons.End of the deletion
* Other modals that are blocking the complete screen UI will also Begin of the insertionfollowEnd of the insertion Begin of the deletion be followingEnd of the deletion this implementation Begin of the insertionto maintain coherence:End of the insertion Begin of the deletion for coherence reasons:End of the deletion
* Invite user
* Delete work package
* Work package table settings
* Add widget
* New board (type)
* Help > Introduction video
* My account > Two-factor authentication > Backup codes password

## Out of scope

* Substitute all the other browser modals until it has been analysed the impact and places where this happens.
* Substitute other modals that are still not happening on a modal state (ruby on rails implementation delete user from admin settings).

## Visual

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37178/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37179/content">

## Figma

https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?node-id=2307%3A66252