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

Work package creation

### 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/116122/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116120/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116119/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116127/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116125/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116126/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116123/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116118/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116121/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116124/content">

### Acceptance criteria

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The top header turns blue when scrolling. It should maintain the white colour.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The top header has the title aligned to centre instead of left.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The creation sheet page has a grey background and it should be white.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The Cancel button on the bottom has blue text and black border. Border should be _borderColor-default_ and text _fgColor-muted_. The _Save_ button should be green when active.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Bring _WP status_ and _Parent_ as chips on top. By default when opening the creation sheet status should be set as _new_ and parent to _No parent_.
* [ ] All fields of the _Details_ section of work packages should be brought on top of the tab bar. Set _Priority_ to _Medium_ by default.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Tab bar has a divider on the top and not in the bottom. Move the divider to the bottom of the tab bar.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Limit the height of all bottom sheets to match its content. Also ensure that the font and text colour used inside of the bottom sheets is as [designed](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1048-249463&t=xi3CAOiSg42CS7Ei-4).
* [ ] There is an excessive scroll bellow the last field. Ensure there is no big white space below the last field in the tabs.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Implement the following new Features:

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Work package</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Status</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Version</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56740</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56740:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56740:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56741</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56741:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56741:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56742</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56742:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56742:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56743</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56743:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56743:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56744</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56744:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56744:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56745</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56745:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56745:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56746</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56746:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56746:version</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">##56747</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56747:status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:56747:version</p></td></tr></tbody></table></figure>

### Figma and visuals

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