Updates: the tab bar icons and styling

[AjeshRPai]

Fixes #

Description

Updates the icons in bottom bar nav in JP/WP app

Dark	Light Mode

Sets the me icon to B&W or with color depending on the selected state

me_icon_tint.webm

Adds a pop animation to the bottom nav icon on selecting

Note: please ignore the badge position on notification icon. It has been moved to left of the icon as before

Screen_recording_20240103_232835.webm

To Test:

• Login to the JP/WP app
• Go to the dashboard
• Verify that the icons on the bottom bar as in the design P4DK0f5zK8F3Y1eifGqS39-fi-3:12381
• Verify new tab icons adapt to environment (light vs dark)
• Verify the icons animate when switching tabs
• Verify the me icon gets blacked out when not selected
• Verify notification icon shows the correct badge color when there are unread notifications (blue for WP, green for JP)

Regression Notes

1. Potential unintended areas of impact
   Bottom bar icons are not correct

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual testing

3. What automated tests I added (or what prevented me from doing so)
   N/A

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr19794-da60b59
	Commit	da60b59
	Direct Download	jetpack-prototype-build-pr19794-da60b59.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr19794-da60b59
	Commit	da60b59
	Direct Download	wordpress-prototype-build-pr19794-da60b59.apk

Note: Google Login is not supported on these builds.

[AjeshRPai]

cc: @zwarm Pinging you so that you are aware of this change

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

[AjeshRPai]

Hey @zwarm

I am adding you as a reviewer since Chris is not available for the review. The IOS PR for these changes is wordpress-mobile/WordPress-iOS#22325

The haptics for the nav bar items were already in a past PR.

[zwarm]

@AjeshRPai - I've tested the following
✅ Verify that the icons on the bottom bar as in the design
✅ Verify new tab icons adapt to environment (light vs dark)
🟡 Verify the icons animate when switching tabs
✅ Verify the me icon gets blacked out when not selected
✅ Verify notification icon shows the correct badge color when there are unread notifications (blue for WP, green for JP) - I had to turn notifications on to see the badge.

🟡 Verify the icons animate when switching tabs

• Technically it works; however it doesn't feel clean - sometimes the animation takes too long and the icon completely disappears. And sometimes in dark mode you don't see the animation at all. See my attached video. Pixel 5 Android 14

I am going to leave this PR in request changes status to give you a chance to respond. If this is the expected behavior, then I will go ahead and approve the PR. lmk. Thanks

screen-20240105-075306.mp4

[zwarm]

After syncing with @AjeshRPai , this PR will be merged and we'll take up any minor issues during beta week.