[App Profile] As a waste picker, I want to view my current level on my profile screen

[Andazu]

Description

Added the badges, level, and progress bar described in the figma. The progress bar has also been updated to handle a displayLabel parameter which is a boolean (which is set to true by default), this means that if it is set to false the progress text and percentage symbol next to the progress bar will not be shown.

Changes

• Added images for the badges from the figma
• Added a component called ProfileStatsBox which has the badges, level, and progress bar
• Added the colors from the badges to the tailwind config file so they can be used elsewhere if needed
• Added displayLabel parameter to the CustomProgressBar component, so the developer can choose to display the text next to the progress bar or not
• Removed the points and coin icon under the username on the profile screen as it has also been removed from the figma (also aligned the items around it to make up for the removed points icon)
• Made the text in the LogOutButton component bold as it is so in the figma

Related Issues

• The streak and position badges next to the points badge are not updated dynamically as it was not part of the PBI, the front-end for it was made in this PBI as it felt empty otherwise

Checklist

• [x] Code has been tested locally and passes all relevant tests.
• [x] Documentation has been updated to reflect the changes, if applicable.
• [x] Code follows the established coding style and guidelines of the project.
• [x] All new and existing tests related to the changes have passed. (on test fails because the test is broken, the function works as intended. The test have been ignored)
• [x] Any necessary dependencies or new packages have been properly documented.
• [x] Pull request title and description are clear and descriptive.
• [x] Reviewers have been assigned to the pull request.
• [x] Any potential security implications have been considered and addressed.
• [x] Performance impact of the changes has been evaluated, if relevant.

Screenshots (if applicable)

If mobile/frontend pull request, what version of the backend is it stable, and running on?

Branch: dev

Commit id: 41e84f68618b9d97620f1752647ea5b2de0d3921

Notes for Reviewers

If you have issues entering the profile page after getting this update, it is because you need to logout and in again so the async storage refreshes. If you want to logout without accessing the profile page, wipe the data on your emulator.

[Andazu]

i am aware of tests failing, im on it

[benceisonline]

tested it, everything works but spacing between level and progress bar is freaky and daily streak text field needs padding on iPhone sim

[benceisonline]

code looks good 🔥🔥🔥

[Andazu]

Luiza is requesting some changes to the layout of the screen, i will create a comment and let reviewers know when the changes have been comitted

[benceisonline]

See new screenshot for edit following product owner meeting, and check tiny updates. There is an ok amount of commented code on purpose for future dev :) 🐇🐇🐇