Content
View differences
Updated by Oleksii Borysenko 7 months ago
**As** a user
**I want to** have a cleaner mobile app UI
### **Acceptance criteria**
**General:**
* [x] [ ] Follow the [designs provided here](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=1-4558) to update the UI of the app.
* [x] [ ] Follow the [designs provided here](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=0-1) to implement the scroll behaviour of the new top bar.
* [x] [ ] Ensure the OS elements (Wi-Fi status, clock…) have the correct colour in the app to have contrast with the background
**Global modules:**
* [x] The bottom bar to navigate between modules is updated to a more modern one as [designed in Figma](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=1-4558).
* [x] The headers of the top bar should be size 24px while all the sub-headers inside the content of the pages should be 20px. Only the days on the time tracking are 16px.
* [x] The blue top bar is removed and substituted with a more clean and transparent header.
* [x] The header now contains the title, the specific actions of the module, the search, and the user avatar.
* [x] The floating buttons are removed, and the actions are now done through the top bar.
* [x] The background colours of the pages are white, besides the home screen that uses the muted colour.
* [x] The actions on lists are aggregated all into a horizontal scrolling bar on top of the list with the order: search icon, view toggle (if existing), query selectors, filters, sorting, and grouping.
**Projects module:**
* [ ] All specific changes of the time tracking module are done in the scope of <mention class="mention" data-id="68307" data-type="work_package" data-text="###68307">###68307</mention>
**Time tracking module:**
* [ ] All specific changes of the time tracking module are done in the scope of <mention class="mention" data-id="67905" data-type="work_package" data-text="###67905">###67905</mention>
**Work packages module:**
* [ ] In a work package detail, there are no longer floating buttons with the main actions. These are transported to the top bar.
* [ ] The three dots menu on the top bar should always offer the actions (in order):
* [ ] Share
* [ ] Add attachment
* [ ] Log time
* [ ] Start timer
* [ ] Watch work package
* [ ] Set reminder
* [ ] Delete (if user has permissions)
* [ ] In the edit mode of a work package details, ensure the bottom bar with the confirmation buttons uses the colour muted as background.
* [ ] In the edit mode of a work package details, transform the chips for project, type, and status to full round chips.
**Global search:**
* [x] Update the search to look [Primer style as designed here](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=59-12764&t=KlJGMtocLIAJyKOJ-4).
* [x] The actions on lists are aggregated all into a horizontal scrolling bar on top of the list.
### **Technical notes**
* ###
**I want to** have a cleaner mobile app UI
### **Acceptance criteria**
**General:**
* [x]
* [x]
* [x]
**Global modules:**
* [x] The bottom bar to navigate between modules is updated to a more modern one as [designed in Figma](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=1-4558).
* [x] The headers of the top bar should be size 24px while all the sub-headers inside the content of the pages should be 20px. Only the days on the time tracking are 16px.
* [x] The blue top bar is removed and substituted with a more clean and transparent header.
* [x] The header now contains the title, the specific actions of the module, the search, and the user avatar.
* [x] The floating buttons are removed, and the actions are now done through the top bar.
* [x] The background colours of the pages are white, besides the home screen that uses the muted colour.
* [x] The actions on lists are aggregated all into a horizontal scrolling bar on top of the list with the order: search icon, view toggle (if existing), query selectors, filters, sorting, and grouping.
**Projects module:**
* [ ] All specific changes of the time tracking module are done in the scope of <mention class="mention" data-id="68307" data-type="work_package" data-text="###68307">###68307</mention>
**Time tracking module:**
* [ ] All specific changes of the time tracking module are done in the scope of <mention class="mention" data-id="67905" data-type="work_package" data-text="###67905">###67905</mention>
**Work packages module:**
* [ ] In a work package detail, there are no longer floating buttons with the main actions. These are transported to the top bar.
* [ ] The three dots menu on the top bar should always offer the actions (in order):
* [ ] Share
* [ ] Add attachment
* [ ] Log time
* [ ] Start timer
* [ ] Watch work package
* [ ] Set reminder
* [ ] Delete (if user has permissions)
* [ ] In the edit mode of a work package details, ensure the bottom bar with the confirmation buttons uses the colour muted as background.
* [ ] In the edit mode of a work package details, transform the chips for project, type, and status to full round chips.
**Global search:**
* [x] Update the search to look [Primer style as designed here](https://www.figma.com/design/9zXQagoG1YlIhWCnbPGC69/Mobile-app---Navigation?node-id=59-12764&t=KlJGMtocLIAJyKOJ-4).
* [x] The actions on lists are aggregated all into a horizontal scrolling bar on top of the list.
### **Technical notes**
* ###