Sm dg style header navigation

src/api/useAuth.jsx

@@ -21,7 +21,11 @@ export const SignInButton = () => (
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => (
-	<button type="button" onClick={() => auth.signOut()}>
+	<button
+		className=" bg-pale-green rounded-lg px-3 py-1 border-2 border-sage text-off-black"
+		type="button"
+		onClick={() => auth.signOut()}
+	>
 		Sign Out
 	</button>
 );

src/index.css

@@ -60,7 +60,6 @@ html {
 
 body {
 	background-color: var(--color-bg);
-	color: var(--color-text);
 	font-family:
 		-apple-system,
 		BlinkMacSystemFont,

src/views/Layout.jsx

@@ -1,20 +1,29 @@
 import { Outlet, NavLink } from 'react-router-dom';
+import { IoHome, IoList, IoCreate } from 'react-icons/io5';
 
 import './Layout.css';
 import { auth } from '../api/config.js';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
+import buddyLogo from '../../public/img/basket-buddy-logo.png';
 
 export function Layout() {
 	const { user } = useAuth();
+	const activeLink =
+		'Nav-link text-sage border-2 border-sage rounded-full bg-eggshell';
+	const link =
+		'Nav-link text-eggshell border-2 rounded-full border-vanilla  hover:text-sage hover:border-sage';
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
+				<header
+					className="Layout-header flex flex-col items-center  bg-eggshell
+				text-off-black"
+				>
+					<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
 					{!!user ? (
 						<div>
-							<span>Signed in as {auth.currentUser.displayName}</span> (
-							<SignOutButton />)
+							<span>Signed in as {auth.currentUser.displayName}</span>
+							<SignOutButton />
 						</div>
 					) : (
 						<SignInButton />
@@ -23,16 +32,25 @@ export function Layout() {
 				<main className="Layout-main">
 					<Outlet />
 				</main>
-				<nav className="Nav">
-					<div className="Nav-container">
-						<NavLink to="/" className="Nav-link">
-							Home
+				<nav className="Nav bg-brown">
+					<div className="Nav-container flex flex-row justify-around">
+						<NavLink
+							to="/"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoHome alt="Home" />
 						</NavLink>
-						<NavLink to="/list" className="Nav-link">
-							List
+						<NavLink
+							to="/list"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoList alt="List" />
 						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
+						<NavLink
+							to="/manage-list"
+							className={({ isActive }) => (isActive ? activeLink : link)}
+						>
+							<IoCreate alt="Manage List" />
 						</NavLink>
 					</div>
 				</nav>

tailwind.config.js

@@ -12,6 +12,7 @@ export default {
 			yellow: '#FEFAE0',
 			vanilla: '#FAEDCD',
 			'pale-green': '#E9EDC9',
+			'off-black': '#353839',
 		},
 		extend: {
 			fontFamily: {