Fix NavBar Link, Adjust List Page Design

[g-lee2]

Description

Made changes to the Navbar by adding margin bottom, changing Navbar link color, changing Manage List to about, and making sure to change all routes from manage-list to about. There were changes made with the .Layout-main and .Layout in the Layout.css so that the content fills up more space. Made a few fixes the content in Accordion component to be more responsive. Additionally in the List page, added border and border radius to item cards (and the delete button) and other related issues regarding responsiveness.

Related Issue

closes #61

Acceptance Criteria

• Change Manage List to about in Navbar
• Make sure to change all routes from manage-list to about.
• Navbar needs margin bottom so it doesn't cover the content below.
• The links on the Navbar need to be changed to the page's beige theme color.
• The .Layout-main and .Layout in the Layout.css needs to be fixed so that the content fills up more space.
• Fix the content in Accordion component to be more responsive.
• Add border and border radius to item cards.
• Overall, fix minor design related issues regarding responsiveness.

Type of Changes

	Type
✓	✨ Enhancements

Updates

Before

After

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin gl-navbar-list-page-fix and check that branch out with git checkout gl-navbar-list-page-fix
• Run npm start in your terminal
• Click on any shopping list, and view changes to Navbar and List page (adjust screen size/mobile to view all changes)

[github-actions]

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

https://tcl-70-smart-shopping-list--pr62-gl-navbar-list-page-bkzocu35.web.app

_{(expires Tue, 09 Apr 2024 16:00:36 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7bb526f3a6607712c7f73ffd6c0dfff4c62b86d9}

[MiliMade]

Looks great! 💃

[chungleee]

noiceeee