Sm dg style header navigation

[sdmisra]

Description

This PR adds styling to our header and navbar at the bottom of the app, according to our prototype / mockup styling.

Related Issue

Closes Issue #57

Acceptance Criteria

• Logo/Header
• Navigation Bar
• Buttons: Navigation Bar
• (After Sign In) Header text: Signed in As
• (After Sign In) Button: Sign Out

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

1. Navigate to deployment below
2. Confirm that header, logo and nav buttons are in same style as

Note: There is spacing added to the 'Signed in as' and button next to it on our other PR (home page styling) as well as the background color changed to eggshell on the body as well (those changes not represented in these screenshots).

[github-actions]

Visit the preview URL for this PR (updated for commit 465c131):

https://tcl-68-smart-shopping-list--pr62-sm-dg-style-header-n-iz0izrev.web.app

_{(expires Fri, 12 Apr 2024 22:44:23 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 8cb5d089a99ba9972009993f4dd31796b0cbda84}

[andiedoescode]

It's looking great! Cant' wait to see the other styling you guys did integrated together with this batch.

Thought: We'll need to incorporate the text-off-black into our end of the styling for consistency. It's certainly nicer than black black.

[etiry]

Looking good!