added about to navbar and removed button like the design

src/components/CreateList.tsx

@@ -64,7 +64,11 @@ export function CreateList({ user, setListPath }: Props) {
 					/>
 					<br />
 					<div className="custom-button-wrapper">
-						<Button aria-label="Create new shopping list" type="submit">
+						<Button
+							className="custom-button"
+							aria-label="Create new shopping list"
+							type="submit"
+						>
 							Create List
 						</Button>
 					</div>

src/components/authenticated/AuthenticatedNavBar.tsx

@@ -32,6 +32,14 @@ export function AuthenticatedNavBar() {
 						>
 							Manage List
 						</Nav.Link>
+						<Nav.Link
+							as={NavLink}
+							to="/about"
+							aria-label="About"
+							eventKey={"3"}
+						>
+							About
+						</Nav.Link>
 					</Nav>
 				</Navbar.Collapse>
 				<SignOutButton />

src/styles/global.scss

@@ -26,7 +26,7 @@ body {
 	text-align: center;
 	border: none;
 	padding: 0.5rem;
-	width: 13rem;
+	width: max-content;
 
 	&:hover {
 		background-color: $secondary-blue;

src/views/Layout.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import { User } from "../api";
 import { AuthenticatedNavBar, UnauthenticatedNavBar } from "../components";
-import Button from "react-bootstrap/Button";
 
 import "./Layout.scss";
 
@@ -11,22 +10,12 @@ interface Props {
 }
 
 export function Layout({ user }: Props) {
-	const navigate = useNavigate();
 	return (
 		<div className="Layout">
 			<header className="Layout-header">
 				{user ? <AuthenticatedNavBar /> : <UnauthenticatedNavBar />}
 			</header>
 			<main className="Layout-main overflow-auto">
-				{user && (
-					<Button
-						className="custom-button m-2"
-						onClick={() => navigate("/about")}
-						aria-label="Navigate to the about application page."
-					>
-						about
-					</Button>
-				)}
 				<Outlet />
 			</main>
 		</div>

src/views/unauthenticated/UnauthenticatedHome.scss

@@ -36,6 +36,6 @@
 	align-items: center;
 }
 
-.custom-button-wrapper button {
-	@extend .button;
-}
+// .custom-button-wrapper button {
+// 	@extend .button;
+// }

src/views/unauthenticated/UnauthenticatedHome.tsx

@@ -27,8 +27,10 @@ export function UnauthenticatedHome() {
 
 			<article>
 				<h5 className="heading-text">New to GrocerEase?</h5>
-				<div className="custom-button-wrapper">
+				<div className="custom-button-wrapper justify-content-evenly">
 					<Button
+						className="custom-button"
+						type="button"
 						onClick={() => navigate("/about")}
 						aria-label="Navigate to the about application page."
 					>