[KD] Stylize Header and Navbar

[piecanoe]

Description

This code stylizes the header, navbar, and sign-in/sign-out button using the Aisle Be There brand colors and font.

Related Issue

Closes #80
Sub-Issue #14

Acceptance Criteria

• Stylize the navbar with the brand colors

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

Updates

Before

After

Signed out

Signed in

Testing Steps / QA Criteria

1. From 'Home' page, make you're signed out.
2. Click the "here" to learn more link to navigate to the 'About' page.
3. You should see a "Sign In" button at the top right. Hover over the button to see that it changes to a darker purple.
4. Click "Sign In" to sign in.
5. Once you're signed in, the "Sign In" button should change to a "Sign Out" button with your user profile image. Hover over the button to see that it changes to a darker purple.
6. While still signed in, click on between the "lists" and "about" nav links to see that the active page is underlined while the other nav links are not.
7. Click on "Aisle Be There" in the header to verify it navigates you to the home page.

[github-actions]

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

https://tcl-69-smart-shopping-list--pr82-kd-stylize-navbar-6225o3cz.web.app

_{(expires Sat, 13 Apr 2024 00:56:13 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[krsnamara]

Very exciting to see the app starting to take shape design wise.

[krsnamara]

Looking at the deployed it appears that this overrides the button styles in index making the text in the signin/signout button black. Suggestion is to remove this line

[piecanoe]

Thanks for catching that. I'll remove that line and also change the text color of 'button' in index.css to '--color-white' so it applies to all buttons in both light and dark mode.

[krsnamara]

Added a comment and suggestion to delete text

[amalyam]

Good work, looks really nice! One suggestion to bring app name and navbar items a little closer to the center, things feel a bit close to the edge and navbar items feel a bit far apart.

Also, sign out button looks right for me in chrome, but looks like this in fIrefox:

I'm not sure what's causing the difference between the two browsers, would have to do more digging. Maybe @mxmason has thoughts?

[amalyam]

update to comment above^: after setting the firefox window width to the narrowest it can be, the signout button looks fine, so I guess it's how the button is scaling up at full view? I also see now how setting the location of the app name and navbar items closer to the center might be tricky to have it both look good at the narrowest screen size and full view without getting into media queries, so probably doesn't make sense for now unless you wanted to play around with that if you have time.