## 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. **Filepicker / 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”.
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. Begin of the insertion**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. End of the insertion **Work package table Begin of the insertion&gt; TableEnd of the insertion settings**
* Modal dialogs doesn’t include “X” button on the header anymore.
* 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 behaviour.
* The action bar is now grey and the order of the buttons is with the positive action in the right.
* The new width is 60REM (960px) as 70REM is removed as width size.
Begin of the insertion11.End of the insertion Begin of the deletion 10.End of the deletion Begin of the insertion**Work package table &gt; Export:** _Needs to be discussed if we do an intermediate solution or we solve other Export problems reported with this._End of the insertion Begin of the deletion **Help text**End of the deletion
* Begin of the insertion_Modal dialogs doesn’t include “X” button on the header anymore._
* _The style and components used for this modal has been simplified and redesigned to make the functionality clearer and easier._
* _There is an action bar with the actions “Cancel” and “Export”._
* _The new width is 60REM (960px)._
12. **Work package table/Calendar/Board/Team planner &gt; Save as:**
* End of the insertion Modal dialogs doesn’t include “X” button on the header anymore.
* The Begin of the insertiondivider in the content has been switched with the “Visibility settings” header.
* “Visibility settings”End of the insertion header Begin of the insertionfont is reduced.
* 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 settings:**
* 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.
* The action bar now includes two buttons “Cancel” and “Save”. Only the ”Save” includes icon.
14. **Help text** \* Modal dialogs doesn’t include “X” button on the header anymore. \* The headerEnd of the insertion section does not have divider. Begin of the insertion\*End of the insertion Begin of the deletion
* End of the deletion The action bar now includes two buttons “Close” and “Edit”.
Begin of the insertion15.End of the insertion Begin of the deletion 11.End of the deletion **Help &gt; Introduction video** 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 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 buttons“Close” Begin of the insertion\*End of the insertion Begin of the deletion
* End of the deletion The text ”You can restart this video from the help menu” is now part of the description.
Begin of the insertion16.End of the insertion Begin of the deletion 12.End of the deletion **My account &gt; Two-factor authentication &gt; Backup codes password** 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 action bar now includes two buttons“Cancel” and “Confirm”.
Begin of the insertion17.End of the insertion Begin of the deletion 13.End of the deletion **My account &gt; Two-factor authentication &gt; Delete authentication** 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 action bar now includes two buttons“Cancel” and “Confirm”.
Begin of the insertion18.End of the insertion Begin of the deletion 14.End of the deletion **Administration &gt; Attribute help texts &gt; Preview 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 anymore. Begin of the insertion\*End of the insertion Begin of the deletion
* End of the deletion The header section does not have divider. Begin of the insertion\*End of the insertion Begin of the deletion
* End of the deletion The action bar now includes two buttons “Close” and “Edit”.
Begin of the insertion19.End of the insertion Begin of the deletion 15.End of the deletion **Administration &gt; Enterprise Edition &gt; Delete token** 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 header section does not have divider. Begin of the insertion\*End of the insertion Begin of the deletion
* End of the deletion All texts has been actualised to make the action clearer. 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 “Delete”. The second one now includes icon.

## 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