After the results of both usability testings some UX/UI improvements has been designed in order to create a more complete and user friendly application. This changes imply the update on all screens of the app and will most likely close the scope of the current spike.

### Focus

Notifications centre

### Current implementation

OpenProject version 0.0.39

<img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116041/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116042/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116043/content">

### Acceptance criteria

Begin of the insertion* [ ]End of the insertion Begin of the deletion 1. End of the deletion Ensure the header is a 22px font in Regular, fgColor-onEmphasis. Begin of the insertion
* [ ]End of the insertion Begin of the deletion

2. End of the deletion A divider is missing between this view selector and the beginning of the list as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1085-263254&t=fMvAXNkqOl5XEgPG-4). Also, the change of colour to light blue on scroll is not necessary, it can be maintained with a white background. Begin of the insertion
* [ ]End of the insertion Begin of the deletion

3. End of the deletion Ensure the text of the _Unread/All_ selector is Medium. Begin of the insertion
* [ ]End of the insertion Begin of the deletion

4. End of the deletion Open the tab on the _Unread_ notifications and not in the _All_. Begin of the insertion
* [ ]End of the insertion Begin of the deletion

5. End of the deletion Add a floating button with the icon _op-read-all-24_&nbsp; to mark all notifications as read. When used show a snackbar for some seconds with the text _All notifications marked as read_ as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1004-216527&t=fMvAXNkqOl5XEgPG-4). Begin of the insertion
* [ ]End of the insertion Begin of the deletion

6. End of the deletion The notification rows have more margin on the right than on the left (_mentioned_ is further away from the screen margin than the other info). Begin of the insertion
* [ ]End of the insertion Begin of the deletion

7. End of the deletion The spacing and fonts of the work packages information seems to not be the same as in [the designs specified](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4). Begin of the insertion
* [ ]End of the insertion Begin of the deletion

8. End of the deletion Ensure the description texts inside of the empty status uses a 12px font in Regular, fgColor-muted. Also add the link to notification settings in the text. Begin of the insertion

End of the insertion Begin of the deletion


End of the deletion ### Open questions

* What is the aggregation time on notifications in the app? If I mention myself (which I don&#39;t know if it triggers a notification) I don&#39;t see the notification in the tab appearing immediately, is because there is some times where we check if there are notifications or not?

* How complex would it be to implement a long press selection to do bulk edit similar to what Gmail does? See the mockups for the concept here.


### Figma and visuals

https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=130-24392