From 3cce62824db1f5c29be947ab81543c76559db184 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Wed, 2 Oct 2024 10:21:51 -0700
Subject: [PATCH 01/12] add navbar styles, and icon for mobile screens

---
 src/api/useAuth.jsx  |  2 ++
 src/views/Layout.jsx | 66 ++++++++++++++++++++++++++++++++++----------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
index c17b778..3f51761 100644
--- a/src/api/useAuth.jsx
+++ b/src/api/useAuth.jsx
@@ -12,6 +12,7 @@ export const SignInButton = () => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
+		className="m-0"
 	>
 		Sign In
 	</button>
@@ -24,6 +25,7 @@ export const SignOutButton = () => (
 	<button
 		type="button"
 		onClick={() => auth.signOut() && window.location.reload()}
+		className="m-0"
 	>
 		Sign Out
 	</button>
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index c4ceaf8..9053ae3 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -24,24 +24,62 @@ export function Layout() {
 	return (
 		<>
 			<div className="Layout">
-				<header className="Layout-header">
-					<h1 className="font-extrabold">SnapShop</h1>
-				</header>
-				<nav className="Nav">
+				{/* <header className="Layout-header">
+				
+				</header> */}
+				<nav className="Nav navbar">
 					<div className="Nav-container">
-						<NavLink to="/" style={handleActive}>
-							Home
-						</NavLink>
+						<div className=" navbar-start">
+							<h1 className="font-extrabold">SnapShop</h1>
+						</div>
+						<div className="space-x-8 dropdown navbar-end ">
+							<NavLink to="/" style={handleActive}>
+								Home
+							</NavLink>
 
-						<NavLink to="/list" style={handleActive}>
-							List
-						</NavLink>
+							<NavLink to="/list" style={handleActive}>
+								List
+							</NavLink>
 
-						<NavLink to="/manage-list" style={handleActive}>
-							Manage List
-						</NavLink>
+							<NavLink to="/manage-list" style={handleActive}>
+								Manage List
+							</NavLink>
 
-						{user ? <SignOutButton /> : <SignInButton />}
+							{user ? <SignOutButton /> : <SignInButton />}
+						</div>
+
+						<div className="space-x-8 dropdown ">
+							<button className="btn btn-square btn-ghost">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									className="inline-block h-5 w-5 stroke-current"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										d="M4 6h16M4 12h16M4 18h16"
+									></path>
+								</svg>
+							</button>
+							<div className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+								<NavLink to="/" style={handleActive}>
+									Home
+								</NavLink>
+
+								<NavLink to="/list" style={handleActive}>
+									List
+								</NavLink>
+
+								<NavLink to="/manage-list" style={handleActive}>
+									Manage List
+								</NavLink>
+
+								{user ? <SignOutButton /> : <SignInButton />}
+							</div>
+						</div>
 					</div>
 				</nav>
 

From c2518fd577c141b494f6dd47963e6d318cea2ae9 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Wed, 2 Oct 2024 10:34:21 -0700
Subject: [PATCH 02/12] add responsive styling

---
 src/views/Layout.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 9053ae3..2e24171 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -32,7 +32,8 @@ export function Layout() {
 						<div className=" navbar-start">
 							<h1 className="font-extrabold">SnapShop</h1>
 						</div>
-						<div className="space-x-8 dropdown navbar-end ">
+						{/* Navbar on Desktop */}
+						<div className="space-x-8 dropdown navbar-end hidden sm:block ">
 							<NavLink to="/" style={handleActive}>
 								Home
 							</NavLink>
@@ -41,14 +42,15 @@ export function Layout() {
 								List
 							</NavLink>
 
-							<NavLink to="/manage-list" style={handleActive}>
+							{/* <NavLink to="/manage-list" style={handleActive}>
 								Manage List
-							</NavLink>
+							</NavLink> */}
 
 							{user ? <SignOutButton /> : <SignInButton />}
 						</div>
 
-						<div className="space-x-8 dropdown ">
+						{/* Mobile Screen Icon Dropdown */}
+						<div className="space-x-8 dropdown sm:hidden ">
 							<button className="btn btn-square btn-ghost">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -73,9 +75,9 @@ export function Layout() {
 									List
 								</NavLink>
 
-								<NavLink to="/manage-list" style={handleActive}>
+								{/* <NavLink to="/manage-list" style={handleActive}>
 									Manage List
-								</NavLink>
+								</NavLink> */}
 
 								{user ? <SignOutButton /> : <SignInButton />}
 							</div>

From 1c01fdb29fd40cdd24aff3b379f354c65ab07851 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 11:31:51 -0700
Subject: [PATCH 03/12] fix navbar on mobile screens

---
 src/views/Layout.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 2e24171..3739a0b 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -33,7 +33,7 @@ export function Layout() {
 							<h1 className="font-extrabold">SnapShop</h1>
 						</div>
 						{/* Navbar on Desktop */}
-						<div className="space-x-8 dropdown navbar-end hidden sm:block ">
+						<div className="space-x-8 navbar-end hidden sm:block ">
 							<NavLink to="/" style={handleActive}>
 								Home
 							</NavLink>
@@ -50,7 +50,7 @@ export function Layout() {
 						</div>
 
 						{/* Mobile Screen Icon Dropdown */}
-						<div className="space-x-8 dropdown sm:hidden ">
+						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden ">
 							<button className="btn btn-square btn-ghost">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -66,12 +66,12 @@ export function Layout() {
 									></path>
 								</svg>
 							</button>
-							<div className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-								<NavLink to="/" style={handleActive}>
+							<div className="menu menu-md dropdown-content bg-base-100 rounded-box z-[1]  w-52 p-2 shadow space-y-2">
+								<NavLink to="/" style={handleActive} className="text-3xl">
 									Home
 								</NavLink>
 
-								<NavLink to="/list" style={handleActive}>
+								<NavLink to="/list" style={handleActive} className="text-3xl">
 									List
 								</NavLink>
 

From 754a6d18b91504e7b95ea5497e9b31deebe69eb2 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 11:49:25 -0700
Subject: [PATCH 04/12] pass in path and render list name into list page

---
 src/App.jsx        |  5 ++++-
 src/views/List.jsx | 11 +++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1bbed6a..a3e8fb4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -63,7 +63,10 @@ export function App() {
 							/>
 						}
 					/>
-					<Route path="/list" element={<List data={data} userId={userId} />} />
+					<Route
+						path="/list"
+						element={<List data={data} path={listPath} userId={userId} />}
+					/>
 					<Route
 						path="/manage-list"
 						element={<ManageList userId={userId} list={data} />}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 2b0498a..5ac209b 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
 
-export function List({ data, userId }) {
+export function List({ data, userId, path }) {
 	const [filterVal, setFilterVal] = useState('');
 	const [filteredObject, setFilteredObject] = useState({});
 	const [sortedList, setSortedList] = useState([]);
@@ -58,9 +58,12 @@ export function List({ data, userId }) {
 
 	return (
 		<>
-			<p>
-				Hello from the <code>/list</code> page!
-			</p>
+			<h2>
+				{console.log(path)}
+				{console.log(path.slice(path.indexOf('/') + 1))}
+				{/* {data.name} */}
+				{`${path.slice(path.indexOf('/') + 1)} List`}
+			</h2>
 			{showModal && dataEmpty && (
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}

From 4b0954d5f5cfe3172f1781df349cdccd621512cb Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 13:24:53 -0700
Subject: [PATCH 05/12] install MUI for icons, added headings and styles

---
 package-lock.json           | 115 ++++++++++++++++++++++--------------
 package.json                |   3 +-
 src/components/ListItem.jsx |  53 ++++++++++-------
 3 files changed, 105 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 71fed2b..cb5d0ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
 			"dependencies": {
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
-				"@mui/material": "^6.0.2",
+				"@mui/icons-material": "^6.1.2",
+				"@mui/material": "^6.1.2",
 				"@the-collab-lab/shopping-list-utils": "^2.2.0",
 				"firebase": "^10.12.5",
 				"react": "^18.3.1",
@@ -3323,24 +3324,49 @@
 			}
 		},
 		"node_modules/@mui/core-downloads-tracker": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz",
-			"integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.2.tgz",
+			"integrity": "sha512-1oE4U38/TtzLWRYWEm/m70dUbpcvBx0QvDVg6NtpOmSNQC1Mbx0X/rNvYDdZnn8DIsAiVQ+SZ3am6doSswUQ4g==",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/mui-org"
 			}
 		},
+		"node_modules/@mui/icons-material": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.2.tgz",
+			"integrity": "sha512-7NNcjW5JoT9jHagrVbARA1o41vQY2xezDamtke+mEKKZmsJyejfRBOacSrPDfjZQ//lyhIjNKyzAwisxYJR47w==",
+			"dependencies": {
+				"@babel/runtime": "^7.25.6"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mui-org"
+			},
+			"peerDependencies": {
+				"@mui/material": "^6.1.2",
+				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@mui/material": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz",
-			"integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==",
-			"dependencies": {
-				"@babel/runtime": "^7.25.0",
-				"@mui/core-downloads-tracker": "^6.0.2",
-				"@mui/system": "^6.0.2",
-				"@mui/types": "^7.2.16",
-				"@mui/utils": "^6.0.2",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.2.tgz",
+			"integrity": "sha512-5TtHeAVX9D5d2LYfB1GAUn29BcVETVsrQ76Dwb2SpAfQGW3JVy4deJCAd0RrIkI3eEUrsl0E4xuBdreszxdTTg==",
+			"dependencies": {
+				"@babel/runtime": "^7.25.6",
+				"@mui/core-downloads-tracker": "^6.1.2",
+				"@mui/system": "^6.1.2",
+				"@mui/types": "^7.2.17",
+				"@mui/utils": "^6.1.2",
 				"@popperjs/core": "^2.11.8",
 				"@types/react-transition-group": "^4.4.11",
 				"clsx": "^2.1.1",
@@ -3359,7 +3385,7 @@
 			"peerDependencies": {
 				"@emotion/react": "^11.5.0",
 				"@emotion/styled": "^11.3.0",
-				"@mui/material-pigment-css": "^6.0.2",
+				"@mui/material-pigment-css": "^6.1.2",
 				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3385,12 +3411,12 @@
 			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
 		},
 		"node_modules/@mui/private-theming": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz",
-			"integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.2.tgz",
+			"integrity": "sha512-S8WcjZdNdi++8UhrrY8Lton5h/suRiQexvdTfdcPAlbajlvgM+kx+uJstuVIEyTb3gMkxzIZep87knZ0tqcR0g==",
 			"dependencies": {
-				"@babel/runtime": "^7.25.0",
-				"@mui/utils": "^6.0.2",
+				"@babel/runtime": "^7.25.6",
+				"@mui/utils": "^6.1.2",
 				"prop-types": "^15.8.1"
 			},
 			"engines": {
@@ -3411,12 +3437,13 @@
 			}
 		},
 		"node_modules/@mui/styled-engine": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz",
-			"integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.2.tgz",
+			"integrity": "sha512-uKOfWkR23X39xj7th2nyTcCHqInTAXtUnqD3T5qRVdJcOPvu1rlgTleTwJC/FJvWZJBU6ieuTWDhbcx5SNViHQ==",
 			"dependencies": {
-				"@babel/runtime": "^7.25.0",
+				"@babel/runtime": "^7.25.6",
 				"@emotion/cache": "^11.13.1",
+				"@emotion/sheet": "^1.4.0",
 				"csstype": "^3.1.3",
 				"prop-types": "^15.8.1"
 			},
@@ -3442,15 +3469,15 @@
 			}
 		},
 		"node_modules/@mui/system": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz",
-			"integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==",
-			"dependencies": {
-				"@babel/runtime": "^7.25.0",
-				"@mui/private-theming": "^6.0.2",
-				"@mui/styled-engine": "^6.0.2",
-				"@mui/types": "^7.2.16",
-				"@mui/utils": "^6.0.2",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.2.tgz",
+			"integrity": "sha512-mzW7F1ZMIYS1aLON48Nrk9c65OrVEVQ+R4lUcTWs1lCSul0VGK23eo4dmY0NX5PS7Oe4xz3P5B9tQZZ7SYgxcg==",
+			"dependencies": {
+				"@babel/runtime": "^7.25.6",
+				"@mui/private-theming": "^6.1.2",
+				"@mui/styled-engine": "^6.1.2",
+				"@mui/types": "^7.2.17",
+				"@mui/utils": "^6.1.2",
 				"clsx": "^2.1.1",
 				"csstype": "^3.1.3",
 				"prop-types": "^15.8.1"
@@ -3481,9 +3508,9 @@
 			}
 		},
 		"node_modules/@mui/types": {
-			"version": "7.2.16",
-			"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
-			"integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==",
+			"version": "7.2.17",
+			"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.17.tgz",
+			"integrity": "sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==",
 			"peerDependencies": {
 				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			},
@@ -3494,13 +3521,13 @@
 			}
 		},
 		"node_modules/@mui/utils": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz",
-			"integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz",
+			"integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==",
 			"dependencies": {
-				"@babel/runtime": "^7.25.0",
-				"@mui/types": "^7.2.16",
-				"@types/prop-types": "^15.7.12",
+				"@babel/runtime": "^7.25.6",
+				"@mui/types": "^7.2.17",
+				"@types/prop-types": "^15.7.13",
 				"clsx": "^2.1.1",
 				"prop-types": "^15.8.1",
 				"react-is": "^18.3.1"
@@ -4439,9 +4466,9 @@
 			"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
 		},
 		"node_modules/@types/prop-types": {
-			"version": "15.7.12",
-			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-			"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+			"version": "15.7.13",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+			"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
 		},
 		"node_modules/@types/react": {
 			"version": "18.3.5",
diff --git a/package.json b/package.json
index 7abfcae..53876da 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
-		"@mui/material": "^6.0.2",
+		"@mui/icons-material": "^6.1.2",
+		"@mui/material": "^6.1.2",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 3486452..e2c769a 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
 
 export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
@@ -52,7 +53,7 @@ export function ListItem({ item }) {
 	};
 
 	return (
-		<li className="ListItem">
+		<li className="ListItem space-x-3">
 			<input
 				type="checkbox"
 				checked={checked}
@@ -62,27 +63,37 @@ export function ListItem({ item }) {
 			<h2 style={{ fontSize: '20px' }}>{name}</h2>
 
 			<button onClick={handleDelete}>Delete</button>
-			<button onClick={() => setIsActive(!isActive)}>
-				View Purchase Details
-			</button>
+			<div className="dropdown">
+				<button className="" onClick={() => setIsActive(!isActive)}>
+					<ExpandMoreOutlinedIcon />
+				</button>
 
-			<div style={{ display: isActive ? 'block' : 'none' }}>
-				<ul style={{ fontSize: '15px' }}>
-					<li>
-						Last Purchase:
-						<span>
-							{' '}
-							{dateLastPurchased
-								? dateLastPurchased.toDate().toDateString()
-								: 'N/A'}
-						</span>
-					</li>
-					<li>
-						Next Purchase:
-						<span> {dateNextPurchased?.toDate().toDateString()}</span>
-					</li>
-					<li>Total Purchases: {totalPurchases}</li>
-				</ul>
+				<div
+					style={{ display: isActive ? 'block' : 'none' }}
+					className="bg-base-100 bg-secondary rounded-box z-[1] w-52 p-2 shadow"
+				>
+					<ul style={{ fontSize: '15px' }}>
+						<li>
+							<h4 className="font-bold">Last Purchase:</h4>
+
+							<span>
+								{' '}
+								{dateLastPurchased
+									? dateLastPurchased.toDate().toDateString()
+									: 'N/A'}
+							</span>
+						</li>
+						<li>
+							<h4 className="font-bold">Next Purchase:</h4>
+
+							<span> {dateNextPurchased?.toDate().toDateString()}</span>
+						</li>
+						<li>
+							<h4 className="font-bold">Total Purchases: </h4>
+							<span>{totalPurchases}</span>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</li>
 	);

From c7e70b17b5bfbae19e0b76bc8ad9ab7577cbbeda Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 17:18:50 -0700
Subject: [PATCH 06/12] more stylings to list items

---
 src/components/ListItem.jsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index e2c769a..49bb197 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
-import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
-
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import KeyboardArrowRightOutlinedIcon from '@mui/icons-material/KeyboardArrowRightOutlined';
+import DeleteIcon from '@mui/icons-material/Delete';
 export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
 		item;
@@ -62,20 +63,20 @@ export function ListItem({ item }) {
 			/>
 			<h2 style={{ fontSize: '20px' }}>{name}</h2>
 
-			<button onClick={handleDelete}>Delete</button>
+			<button onClick={handleDelete}>
+				<DeleteIcon />
+			</button>
 			<div className="dropdown">
-				<button className="" onClick={() => setIsActive(!isActive)}>
-					<ExpandMoreOutlinedIcon />
-				</button>
-
-				<div
-					style={{ display: isActive ? 'block' : 'none' }}
-					className="bg-base-100 bg-secondary rounded-box z-[1] w-52 p-2 shadow"
+				<button
+					onClick={() => setIsActive(!isActive)}
+					className="focus:bg-secondary"
 				>
+					<ExpandMoreIcon />
+				</button>
+				<div className="dropdown-content bg-base-200 rounded-box z-[1] w-60 p-4 shadow">
 					<ul style={{ fontSize: '15px' }}>
 						<li>
 							<h4 className="font-bold">Last Purchase:</h4>
-
 							<span>
 								{' '}
 								{dateLastPurchased

From 2e77740d4228c7e6d77362350383bcc810e55e10 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 20:18:57 -0700
Subject: [PATCH 07/12] more colors and spacing

---
 src/components/ListItem.jsx | 2 +-
 src/views/Layout.jsx        | 8 ++++----
 src/views/List.jsx          | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 49bb197..e7b5b5c 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react';
 import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import KeyboardArrowRightOutlinedIcon from '@mui/icons-material/KeyboardArrowRightOutlined';
 import DeleteIcon from '@mui/icons-material/Delete';
 export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
@@ -60,6 +59,7 @@ export function ListItem({ item }) {
 				checked={checked}
 				onChange={handleChange}
 				disabled={checked}
+				className="checkbox checkbox-primary"
 			/>
 			<h2 style={{ fontSize: '20px' }}>{name}</h2>
 
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 3739a0b..61c59cb 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -30,10 +30,10 @@ export function Layout() {
 				<nav className="Nav navbar">
 					<div className="Nav-container">
 						<div className=" navbar-start">
-							<h1 className="font-extrabold">SnapShop</h1>
+							<h1 className="font-extrabold text-accent">SnapShop</h1>
 						</div>
 						{/* Navbar on Desktop */}
-						<div className="space-x-8 navbar-end hidden sm:block ">
+						<div className="space-x-8 navbar-end hidden sm:block">
 							<NavLink to="/" style={handleActive}>
 								Home
 							</NavLink>
@@ -50,8 +50,8 @@ export function Layout() {
 						</div>
 
 						{/* Mobile Screen Icon Dropdown */}
-						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden ">
-							<button className="btn btn-square btn-ghost">
+						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden  text-accent  ">
+							<button className="btn btn-square btn-ghost ">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 5ac209b..c371d20 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -82,7 +82,7 @@ export function List({ data, userId, path }) {
 				{filterVal && <button>Clear</button>}
 			</form>
 
-			<ul>
+			<ul className="space-y-2">
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
 						<Fragment key={crypto.randomUUID()}>

From 3af208e424baf383a76c7128de9e914c9f28f30c Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Thu, 3 Oct 2024 20:40:53 -0700
Subject: [PATCH 08/12] add more icons, aria-labels, and global styles

---
 src/components/ListItem.jsx | 6 ++++--
 src/index.css               | 3 +++
 src/views/List.jsx          | 9 ++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index e7b5b5c..6d53826 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -3,6 +3,7 @@ import './ListItem.css';
 import { updateItem, deleteItem } from '../api';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DeleteIcon from '@mui/icons-material/Delete';
+
 export function ListItem({ item }) {
 	const { name, dateLastPurchased, dateNextPurchased, totalPurchases, id } =
 		item;
@@ -61,15 +62,16 @@ export function ListItem({ item }) {
 				disabled={checked}
 				className="checkbox checkbox-primary"
 			/>
-			<h2 style={{ fontSize: '20px' }}>{name}</h2>
+			<h4 style={{ fontSize: '20px' }}>{name}</h4>
 
-			<button onClick={handleDelete}>
+			<button onClick={handleDelete} aria-label="Delete this Item">
 				<DeleteIcon />
 			</button>
 			<div className="dropdown">
 				<button
 					onClick={() => setIsActive(!isActive)}
 					className="focus:bg-secondary"
+					aria-label="Get purchase details of this item"
 				>
 					<ExpandMoreIcon />
 				</button>
diff --git a/src/index.css b/src/index.css
index e5f02ae..0585361 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,9 @@
 	h1 {
 		@apply text-5xl font-bowlby;
 	}
+	h2 {
+		@apply text-4xl font-bold;
+	}
 	h3 {
 		@apply text-4xl font-archivo font-bold;
 	}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index c371d20..da8f4c4 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -2,6 +2,8 @@ import { ListItem } from '../components';
 import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded';
 
 export function List({ data, userId, path }) {
 	const [filterVal, setFilterVal] = useState('');
@@ -68,7 +70,10 @@ export function List({ data, userId, path }) {
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}
 
-			<button onClick={addItemNavigate}> Add item</button>
+			<button onClick={addItemNavigate}>
+				{' '}
+				Add item <AddBoxRoundedIcon fontSize="large" className="text-black" />
+			</button>
 
 			<form onSubmit={clearInput}>
 				<label htmlFor="item-name">Search item: </label>
@@ -78,7 +83,9 @@ export function List({ data, userId, path }) {
 					type="text"
 					value={filterVal}
 					onChange={(e) => setFilterVal(e.target.value)}
+					placeholder="e.g. Apple"
 				/>
+				<SearchRoundedIcon />
 				{filterVal && <button>Clear</button>}
 			</form>
 

From 3010fb25c85fe14e0c08d749e0c1e314dc0cf86c Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Fri, 4 Oct 2024 11:33:07 -0700
Subject: [PATCH 09/12] add colors and font stylings to nav-bar and more
 spacing between elements in List.jsx

---
 src/api/useAuth.jsx  |  4 ++--
 src/index.css        |  2 +-
 src/views/Layout.jsx | 16 +++++++++-------
 src/views/List.jsx   |  2 +-
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
index 3f51761..8277581 100644
--- a/src/api/useAuth.jsx
+++ b/src/api/useAuth.jsx
@@ -12,7 +12,7 @@ export const SignInButton = () => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-		className="m-0"
+		className="m-0 bg-accent"
 	>
 		Sign In
 	</button>
@@ -25,7 +25,7 @@ export const SignOutButton = () => (
 	<button
 		type="button"
 		onClick={() => auth.signOut() && window.location.reload()}
-		className="m-0"
+		className="m-0 bg-accent"
 	>
 		Sign Out
 	</button>
diff --git a/src/index.css b/src/index.css
index 0585361..9f6f530 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,7 +22,7 @@
 		@apply text-5xl font-bowlby;
 	}
 	h2 {
-		@apply text-4xl font-bold;
+		@apply text-5xl font-archivo font-bold;
 	}
 	h3 {
 		@apply text-4xl font-archivo font-bold;
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 61c59cb..87cdd81 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -13,8 +13,10 @@ import { useAuth, SignInButton, SignOutButton } from '../api';
 
 const handleActive = ({ isActive, isPending }) => {
 	return {
-		fontWeight: isActive ? 'bold' : '',
-		color: isPending ? 'red' : 'black',
+		fontWeight: isActive ? '900' : '',
+		color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)',
+		// color: isPending ? 'red' : 'black',
+		// isActive ? 'yellow' : 'white',
 	};
 };
 
@@ -23,12 +25,12 @@ export function Layout() {
 
 	return (
 		<>
-			<div className="Layout">
+			<div className="Layout ">
 				{/* <header className="Layout-header">
 				
 				</header> */}
-				<nav className="Nav navbar">
-					<div className="Nav-container">
+				<nav className="Nav navbar  bg-neutral">
+					<div className="Nav-container  bg-neutral">
 						<div className=" navbar-start">
 							<h1 className="font-extrabold text-accent">SnapShop</h1>
 						</div>
@@ -50,7 +52,7 @@ export function Layout() {
 						</div>
 
 						{/* Mobile Screen Icon Dropdown */}
-						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden  text-accent  ">
+						<div className="space-x-8 dropdown dropdown-bottom dropdown-end sm:hidden  text-accent">
 							<button className="btn btn-square btn-ghost ">
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -66,7 +68,7 @@ export function Layout() {
 									></path>
 								</svg>
 							</button>
-							<div className="menu menu-md dropdown-content bg-base-100 rounded-box z-[1]  w-52 p-2 shadow space-y-2">
+							<div className="menu menu-md dropdown-content  bg-neutral  rounded-box z-[1]  w-52 p-2 shadow space-y-2">
 								<NavLink to="/" style={handleActive} className="text-3xl">
 									Home
 								</NavLink>
diff --git a/src/views/List.jsx b/src/views/List.jsx
index da8f4c4..37a863e 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -60,7 +60,7 @@ export function List({ data, userId, path }) {
 
 	return (
 		<>
-			<h2>
+			<h2 className="py-8">
 				{console.log(path)}
 				{console.log(path.slice(path.indexOf('/') + 1))}
 				{/* {data.name} */}

From ce830c38a2e2c62ecf21137e311f9a022ee06398 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Fri, 4 Oct 2024 11:46:20 -0700
Subject: [PATCH 10/12] alligned nav items

---
 src/views/Layout.jsx | 14 +++++++-------
 src/views/List.jsx   |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 87cdd81..e6de094 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -25,13 +25,13 @@ export function Layout() {
 
 	return (
 		<>
-			<div className="Layout ">
-				{/* <header className="Layout-header">
-				
-				</header> */}
-				<nav className="Nav navbar  bg-neutral">
-					<div className="Nav-container  bg-neutral">
-						<div className=" navbar-start">
+			<div className="Layout">
+				<nav className="Nav navbar bg-neutral">
+					<div
+						style={{ paddingInline: 'min(5dvw, 3.2rem)' }}
+						className="Nav-container bg-neutral"
+					>
+						<div className=" navbar-start pl-2.5">
 							<h1 className="font-extrabold text-accent">SnapShop</h1>
 						</div>
 						{/* Navbar on Desktop */}
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 37a863e..5b48d06 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -75,8 +75,8 @@ export function List({ data, userId, path }) {
 				Add item <AddBoxRoundedIcon fontSize="large" className="text-black" />
 			</button>
 
-			<form onSubmit={clearInput}>
-				<label htmlFor="item-name">Search item: </label>
+			<form onSubmit={clearInput} className="py-4">
+				<label htmlFor="item-name">Find Item </label>
 				<input
 					id="item-name"
 					name="item-name"

From 93e1fa131f424e80f9f2712fffd8532107806c6e Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Fri, 4 Oct 2024 12:18:37 -0700
Subject: [PATCH 11/12] cleaning up code

---
 src/views/Layout.jsx | 13 ++-----------
 src/views/List.jsx   | 11 ++++-------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index e6de094..d1329a6 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -11,12 +11,10 @@ import { useAuth, SignInButton, SignOutButton } from '../api';
  * defined in `App.jsx`.
  */
 
-const handleActive = ({ isActive, isPending }) => {
+const handleActive = ({ isActive }) => {
 	return {
 		fontWeight: isActive ? '900' : '',
 		color: isActive ? '#E8C900' : 'rgb(247 253 235 / 68%)',
-		// color: isPending ? 'red' : 'black',
-		// isActive ? 'yellow' : 'white',
 	};
 };
 
@@ -34,6 +32,7 @@ export function Layout() {
 						<div className=" navbar-start pl-2.5">
 							<h1 className="font-extrabold text-accent">SnapShop</h1>
 						</div>
+
 						{/* Navbar on Desktop */}
 						<div className="space-x-8 navbar-end hidden sm:block">
 							<NavLink to="/" style={handleActive}>
@@ -44,10 +43,6 @@ export function Layout() {
 								List
 							</NavLink>
 
-							{/* <NavLink to="/manage-list" style={handleActive}>
-								Manage List
-							</NavLink> */}
-
 							{user ? <SignOutButton /> : <SignInButton />}
 						</div>
 
@@ -77,10 +72,6 @@ export function Layout() {
 									List
 								</NavLink>
 
-								{/* <NavLink to="/manage-list" style={handleActive}>
-									Manage List
-								</NavLink> */}
-
 								{user ? <SignOutButton /> : <SignInButton />}
 							</div>
 						</div>
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 5b48d06..6072172 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -60,12 +60,7 @@ export function List({ data, userId, path }) {
 
 	return (
 		<>
-			<h2 className="py-8">
-				{console.log(path)}
-				{console.log(path.slice(path.indexOf('/') + 1))}
-				{/* {data.name} */}
-				{`${path.slice(path.indexOf('/') + 1)} List`}
-			</h2>
+			<h2 className="py-8">{`${path.slice(path.indexOf('/') + 1)} List`}</h2>
 			{showModal && dataEmpty && (
 				<BasicModal dataEmpty={dataEmpty} message={message} />
 			)}
@@ -76,7 +71,9 @@ export function List({ data, userId, path }) {
 			</button>
 
 			<form onSubmit={clearInput} className="py-4">
-				<label htmlFor="item-name">Find Item </label>
+				<label htmlFor="item-name" aria-label="Search for an item">
+					Find Item{' '}
+				</label>
 				<input
 					id="item-name"
 					name="item-name"

From 636935733f64a080ea68fb771ce47a2358ac5c12 Mon Sep 17 00:00:00 2001
From: Sarah Meko <tmekos1@gmail.com>
Date: Fri, 4 Oct 2024 12:24:16 -0700
Subject: [PATCH 12/12] remove comments

---
 src/views/Layout.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index d1329a6..8d6f5b0 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -3,14 +3,6 @@ import { Outlet, NavLink } from 'react-router-dom';
 import './Layout.css';
 import { useAuth, SignInButton, SignOutButton } from '../api';
 
-/**
- * TODO: The links defined in this file don't work!
- *
- * Instead of anchor element, they should use a component
- * from `react-router-dom` to navigate to the routes
- * defined in `App.jsx`.
- */
-
 const handleActive = ({ isActive }) => {
 	return {
 		fontWeight: isActive ? '900' : '',