## Acceptance criteria

As an extension of the work packages <mention class="mention" data-id="43684" data-type="work_package" data-text="#43684">#43684</mention> and <mention class="mention" data-id="43704" data-type="work_package" data-text="#43704">#43704</mention> in some of the pages where the modal dialogues there is need for minor re-designs and changes:

1. **File picker / location picker:** New
2. **Delete file links:** New
3. **Remove file:** New
4. **Work package deletion:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The header section does not have divider.
* The text has been modified to include the name of the WP inside.
* The action button changed to “Delete” and now includes an icon.
5. **Invite user:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The action bar now contains the option button “Back” and the always present option to “cancel”
* The process has been simplified to only three steps instead of one step per each form field.
* Now the form fields “Name or email address”, “Role in project \[X\]” and “Invitation message” are in a single step.
* The guidelines texts in the “Role in project \[X\]” and “Invitation message” are now more generic (no user name).
* The last step now also includes the text from the field “Invitation message”.
* In the case of a placeholder user the text area for including an “Invitation message” is hidden.
6. **Log time:**
* Modal dialogs doesn’t include “X” button on the header anymore.
7. **Add widget:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The list in the middle doesn’t have dividers anymore as now is using the spot-list default component as base.
* There is an action bar with only one action “Cancel”.
8. **New Board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* There is an action bar with only one action “Cancel”.
* The new width is 60REM (960px) as 70REM is removed as width size.
9. **Board &gt; Configure this board:**
* Modal dialogs doesn’t include “X” button on the header anymore.
* The size of the modal depends on the content and not a fix height.
10. **Work package table &gt; Table settings:**  Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion Modal dialogs doesn’t include “X” button on the header anymore. Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion The height of the modal is now fixed depending on the highest tab option (in this case the tab “Display settings” in order to avoid flickering Begin of the insertionbehaviour.  
* End of the insertion Begin of the deletion behaviour.  \*End of the deletion The action bar is now grey and the order of the buttons is with the positive action in the Begin of the insertionright.  
* End of the insertion Begin of the deletion right.  \*End of the deletion The new width is 60REM (960px) as 70REM is removed as width size.
11. **Work package table &gt; Begin of the insertionExport:** 
* End of the insertion Begin of the deletion Export:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion There is an action bar with only one action “Cancel”.
12. **Work package table/Calendar/Board/Team planner &gt; Save Begin of the insertionas:** 
* End of the insertion Begin of the deletion as:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The divider in the content has been switched with the “Visibility settings” Begin of the insertionheader. 
* VisibilityEnd of the insertion Begin of the deletion header. \* “VisibilityEnd of the deletion settings” header font is Begin of the insertionreduced. 
* End of the insertion Begin of the deletion reduced. \*End of the deletion The action bar now includes two buttons “Cancel” and “Save”. Only the ”Save” includes icon.
13. **Work package table/Calendar/Board/Team planner &gt; Visibility Begin of the insertionsettings:** 
* End of the insertion Begin of the deletion settings:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The size of the modal depends on the content and not a fix height. Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion The action bar now includes two buttons “Cancel” and “Save”. Only the ”Save” includes icon.
14. **Help text:** Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The header section does not have Begin of the insertiondivider. 
* End of the insertion Begin of the deletion divider. \*End of the deletion The action bar now includes two buttons “Close” and “Edit”.
15. **Help &gt; Introduction Begin of the insertionvideo:** 
* End of the insertion Begin of the deletion video:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header anymore. Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion The header section does not have colour. Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion The action bar now includes two Begin of the insertionbuttons“Close”. 
* End of the insertion Begin of the deletion buttons“Close”. \*End of the deletion The text ”You can restart this video from the help menu” is now part of the description.
16. **My account &gt; Two-factor authentication &gt; Backup codes Begin of the insertionpassword:** 
* End of the insertion Begin of the deletion password:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The action bar now includes two buttons“Cancel” and “Confirm”.
17. **My account &gt; Two-factor authentication &gt; Delete Begin of the insertionauthentication:** 
* End of the insertion Begin of the deletion authentication:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore.  
* End of the insertion Begin of the deletion anymore.  \*End of the deletion The action bar now includes two Begin of the insertionbuttons “Cancel”End of the insertion Begin of the deletion buttons“Cancel”End of the deletion and “Confirm”.
18. **Administration &gt; Attribute help texts &gt; Preview help Begin of the insertiontext:** 
* End of the insertion Begin of the deletion text:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The header section does not have Begin of the insertiondivider.  
* End of the insertion Begin of the deletion divider.  \*End of the deletion The action bar now includes two buttons “Close” and “Edit”.
19. **Administration &gt; Enterprise Edition &gt; Delete Begin of the insertiontoken:** 
* End of the insertion Begin of the deletion token:** \*End of the deletion Modal dialogs doesn’t include “X” button on the header Begin of the insertionanymore. 
* End of the insertion Begin of the deletion anymore. \*End of the deletion The header section does not have Begin of the insertiondivider. 
* End of the insertion Begin of the deletion divider. \*End of the deletion All texts has been actualised to make the action Begin of the insertionclearer. 
* End of the insertion Begin of the deletion clearer. \*End of the deletion The action bar now includes two buttons “Cancel” and “Delete”. The second one now includes icon.
20. **Administration &gt; GDPR &gt; Review Begin of the insertionDPA:**
* End of the insertion Begin of the deletion DPA:**  \*End of the deletion Modal dialogs doesn’t include “X” button on the header anymore. Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion Now there is an action bar with the button “Close”.
21. **Administration &gt; Working days &gt; Change working days:**  Begin of the insertion
* End of the insertion Begin of the deletion \*End of the deletion This modal is new and tracked separately in <mention class="mention" data-id="42316" data-type="work_package" data-text="#42316">#42316</mention>.
22. **Administration &gt; API and webhooks &gt; Begin of the insertionwebhooks:**  
* FontEnd of the insertion Begin of the deletion webhooks:**  fontEnd of the deletion size and divider should change based on design specifications in Figma link below.

## Note

With this release all the modals that until now had a width of 70rem (1120px) have now 60rem (960px). With this change we avoid space problems with small desktops like 1020px width and visual problems.

## Visuals in Figma

https://www.figma.com/file/OkoRuig4pvpwIdA2LQZIL0/SPOT---Design-cases?node-id=0%3A1