Update navigation bar and app bar

[ltseng]

Companion issue to https://github.com/techmatters/terraso-product/issues/470 for the purpose of tracking the actual engineering work. This is up to date as of 12/8/2023, but I encourage whoever is assigned this task to examine that issue as well as the Figma designs for any changes, particularly if there has been a new design release in the meantime.

Specific changes are:

• Changing the color of the app bar to the darker green
• Changing the colors of the navigation bar to white fill with orange/brown icons
• navigation bar should not display on individual site and project screens (conflicts with tab slider)
• add back arrow to site and project top level screens
• use back arrow to close deeper level screens in site and project (such as add and manage team members, site reports, data inputs)
• use X to close sheets that are self-contained, and overlay the underlying screen (such as soil info sheet, maybe texture/color guides, etc...)
• add transitions for each (back arrow slides screen to right, close arrow slides sheet down)

Affected screens (including notes for "App bar and nav bar updates" next to each section):

• Home Screen
• Project Management
• Site Creation
• Site Dashboard
• Managing a Site
• Slope

[CourtneyLee333]

@ltseng Please wait! Design work is not done yet!

[ltseng]

Design work is done now

[CourtneyLee333]

Adding a note here about responsiveness to the device settings for text and display size. When I turn those settings to large on my phone, the navbar gets blown out and I can't see all the items. Ideally, the text and display size can get increased, but only to a level that allows the items to all display and have their proper touch target size and spacing. If it's not feasible to take this approach, the navbar will need to be non-responsive to the device settings. This will need to account for translation as well, and we likely need to pay more attention to that in the future.