From 8002d782b287148a1600e76871f7a4e3b9b7d1ac Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 22:58:29 -0400
Subject: [PATCH 01/10] Adds fonts to app

---
 index.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 5016fc3..c83e94f 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -11,6 +11,14 @@
 			content="A smart shopping list that learns your purchase habits and makes suggestions, so you don't forget to buy what's important."
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
+		/>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="color-scheme" content="dark light" />
 		<title>Smart Shopping List</title>
 		<script type="module" src="/src/index.jsx" async></script>

From 2cfa4bdad15b1e000fe8868dcda1002d67abfaa5 Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:49:48 -0400
Subject: [PATCH 02/10] Creates scoped css file for SortedItemsMap

---
 src/components/SortedItemsMap.css | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/SortedItemsMap.css

diff --git a/src/components/SortedItemsMap.css b/src/components/SortedItemsMap.css
new file mode 100644
index 0000000..f1fd4d9
--- /dev/null
+++ b/src/components/SortedItemsMap.css
@@ -0,0 +1,10 @@
+.SortedItems-section-divider {
+	margin-top: 3px;
+	width: 80%;
+	display: flex;
+	margin-left: 0;
+}
+
+.SortedItems-section-header {
+	margin: 0px;
+}

From 76ad22c64fe87f625144238a752bcd7b58026111 Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:50:43 -0400
Subject: [PATCH 03/10] Changes div to h2 in AddItem dialog

---
 src/components/AddItem.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
index e56496e..02f3306 100644
--- a/src/components/AddItem.jsx
+++ b/src/components/AddItem.jsx
@@ -11,7 +11,7 @@ export function AddItem({ formData, setFormData }) {
 
 	return (
 		<>
-			<div>Enter item</div>
+			<h2>Enter item</h2>
 			<label htmlFor="itemName">
 				Item Name:
 				<input

From 25b542c0ac1df1150729473d912db2a050b7737b Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:51:48 -0400
Subject: [PATCH 04/10] Adds global styling, colors and some html elements

---
 src/index.css | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/index.css b/src/index.css
index b4798e8..be112dc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,6 +14,12 @@
 	--color-border: hsla(220, 13%, 32%, 1);
 	--color-error: var(--color-red);
 	--color-text: var(--color-white);
+
+	--color-branding: #5a23b3;
+	--btn-confirm: var(--color-branding);
+	--btn-confirm-hover: #3f0f7f;
+	--btn-danger: var(--color-error);
+	--btn-danger-hover: #a80000;
 }
 
 @media screen and (prefers-color-scheme: light) {
@@ -73,6 +79,7 @@ body {
 	font-size: 1.8rem;
 	line-height: 1.4;
 	margin: 0;
+	margin-left: 10px;
 
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -107,7 +114,36 @@ code {
 	--color-bg: var(--color-gray-light);
 }
 
-h5 {
-	margin-top: 0px;
-	margin-bottom: 0px;
+/* GLOBAL STYLES FOR HTML ELEMENTS */
+
+h1 {
+	font-family: 'Righteous', sans-serif;
+}
+
+h5,
+p {
+	margin: 0;
+	padding: 0;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+
+button {
+	background-color: var(--btn-confirm);
+	border: 0;
+	border-radius: 20px;
+	color: var(--color-bg);
+	cursor: pointer;
+	font-size: 1.6rem;
+	font-family: 'Righteous', sans-serif;
+	font-weight: 700;
+	padding: 0.5em 1em;
+	margin: 0.5em 0;
+}
+
+button:hover {
+	background-color: var(--btn-confirm-hover);
 }

From fdce93721eeccb2fa6fb42c4539833c99fdd657b Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:52:56 -0400
Subject: [PATCH 05/10] Applies global color var styling and adjusts border
 radius for Dialog

---
 src/components/Dialog.css | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Dialog.css b/src/components/Dialog.css
index edd54a6..83179b4 100644
--- a/src/components/Dialog.css
+++ b/src/components/Dialog.css
@@ -1,7 +1,7 @@
 .Dialog {
 	--button-alignment: 'center';
 
-	border-radius: 20px;
+	border-radius: 15px;
 	max-width: min(68ch, 95vw);
 	padding: 0;
 	animation:
@@ -39,29 +39,37 @@
 	}
 }
 
-.Dialog .c-button {
+.Dialog button {
 	min-width: 25ch;
 	min-height: 5ch;
 	cursor: pointer;
 	font-size: 1em;
 	font-weight: 500;
 	border-radius: 8px;
-	border: 1px solid #aaa;
 	padding: 0.8em 1.6em;
 }
 
+.Dialog--button-group :first-child {
+	background-color: #cdcdcd;
+}
+
+.Dialog--button-group :first-child:hover {
+	background-color: #989797;
+}
+
 c-button-cancel:hover {
 	background-color: #918f8f;
 }
 
 .c-button-confirm {
-	background-color: #4caf50;
+	background-color: var(--color-branding);
 	border-radius: 8px;
 	border: 1px solid #0f0f0f;
+	color: white;
 }
 
 .c-button-confirm:hover {
-	background-color: rgb(69, 167, 72);
+	background-color: var(--btn-confirm-hover);
 }
 
 .Dialog--button-group > * {
@@ -70,7 +78,7 @@ c-button-cancel:hover {
 
 @keyframes slideInFromRight {
 	from {
-		transform: translateX(100%);
+		transform: translateX(200%);
 	}
 	to {
 		transform: translateX(0);

From f24b076faa59d07c64a5b6999b0d251f891fe905 Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:54:06 -0400
Subject: [PATCH 06/10] changes styling to list items. Big add is the checkbox
 custom styling

---
 src/components/ListItem.css | 63 +++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/components/ListItem.css b/src/components/ListItem.css
index daed736..67c1c99 100644
--- a/src/components/ListItem.css
+++ b/src/components/ListItem.css
@@ -1,20 +1,65 @@
 .ListItem {
-	align-items: center;
 	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
+	flex-direction: column;
+	align-items: flex-start;
+	margin: 0;
+	padding: 0;
+	font-family: 'Reddit Mono', monospace;
+}
+
+.ListItem-label {
+	display: flex;
+	flex-grow: inherit;
+	/* flex-direction: row; */
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
 	cursor: pointer;
 	height: auto;
+	margin: 0;
+	padding: 0;
+	margin-left: 0.2em;
 }
 
-.ListItem > * {
-	margin-right: 10px;
+.ListItem button {
+	background-color: var(--btn-danger);
 }
 
-.ListItem-checkbox {
-	accent-color: var(--color-accent);
+.ListItem button:hover {
+	background-color: var(--btn-danger-hover);
 }
 
-.ListItem-label {
-	margin-left: 0.2em;
+/* Handling checkbox styling */
+/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+input[type='checkbox'] {
+	appearance: none;
+	background-color: white;
+	margin: 0;
+	font: inherit;
+	color: currentColor;
+	width: 2em;
+	height: 2em;
+	border: 0.05em solid currentColor;
+	border-radius: 20%;
+	transform: translateY(-0.075em);
+	display: grid;
+	place-content: center;
+	cursor: pointer;
+}
+
+input[type='checkbox']::before {
+	content: '';
+	width: 1.2em;
+	height: 1.2em;
+	transform: scale(0);
+	transition: 120ms transform ease-in-out;
+	box-shadow: inset 1em 1em var(--color-branding);
+	background-color: CanvasText;
+	transform-origin: bottom left;
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+input[type='checkbox']:checked::before {
+	transform: scale(2) translateX(-0.2em) translateY(0.1em);
 }

From f9c6c177842b9c58acfbe11046c3053795a0ed3d Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:55:18 -0400
Subject: [PATCH 07/10] Small nit adjustments in code. Rename some class names.
 Turns off db call for testing of checkbox

---
 src/components/ListItem.jsx | 46 ++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 9543760..1e53994 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -1,8 +1,10 @@
-import './ListItem.css';
-import { updateItem, deleteItem } from '../api';
 import { useState, useEffect } from 'react';
+import { updateItem, deleteItem } from '../api';
+import './ListItem.css';
 
 export function ListItem({ item, listPath }) {
+	const [isChecked, setIsChecked] = useState(false);
+
 	const {
 		id,
 		name,
@@ -24,7 +26,6 @@ export function ListItem({ item, listPath }) {
 		: 0;
 	const timeDiff = currentDate - lastPurchasedDate; //milliseconds
 	const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
-	const [isChecked, setIsChecked] = useState(false);
 
 	useEffect(() => {
 		if (timeDiff < oneDayInMilliseconds) {
@@ -56,19 +57,22 @@ export function ListItem({ item, listPath }) {
 		} else {
 			setIsChecked(e.target.checked);
 			if (e.target.checked) {
-				const result = await updateItem(
-					listPath,
-					id,
-					dateLastPurchased,
-					totalPurchases,
-					dateNextPurchased,
-					dateCreated,
-				);
-				if (result.success) {
-					alert('Item purchased');
-				} else {
-					alert('Error: item not updated');
-				}
+				// For testing this is turned off
+
+				const result = console.log('checked');
+				// const result = await updateItem(
+				// 	listPath,
+				// 	id,
+				// 	dateLastPurchased,
+				// 	totalPurchases,
+				// 	dateNextPurchased,
+				// 	dateCreated,
+				// );
+				// if (result.success) {
+				// 	alert('Item purchased');
+				// } else {
+				// 	alert('Error: item not updated');
+				// }
 			}
 		}
 	}
@@ -92,8 +96,8 @@ export function ListItem({ item, listPath }) {
 	}
 
 	return (
-		<li>
-			<label htmlFor={name} className="ListItem">
+		<li className="ListItem">
+			<label htmlFor={name} className="ListItem-label">
 				<input
 					type="checkbox"
 					id={name}
@@ -101,7 +105,7 @@ export function ListItem({ item, listPath }) {
 					name={name}
 					checked={isChecked}
 				/>
-				<h5 className="item-name">{name}</h5>
+				<p className="ListItem-buy-next">{name}</p>
 				<button
 					type="button"
 					id={name}
@@ -109,10 +113,10 @@ export function ListItem({ item, listPath }) {
 					onClick={handleDelete}
 					aria-label={`delete ${name}`}
 				>
-					X
+					Remove
 				</button>
-				<h5 className="buy-next">Buy Next: {nextPurchasedDate}</h5>
 			</label>
+			<p className="ListItem-buy-next">Buy Next: {nextPurchasedDate}</p>
 		</li>
 	);
 }

From 726185e7986fcdf5ee343c0086f3b3f3aa7bf4cf Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:56:07 -0400
Subject: [PATCH 08/10] Renames classes for newly created css file

---
 src/components/SortedItemsMap.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/SortedItemsMap.jsx b/src/components/SortedItemsMap.jsx
index 0b71fce..404058f 100644
--- a/src/components/SortedItemsMap.jsx
+++ b/src/components/SortedItemsMap.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { getSortedItems, getGroupedItems } from '../utils';
 import { ListItem } from './ListItem';
+import './SortedItemsMap.css';
 
 export function SortedItemsMap({ filteredDataResult, listPath }) {
 	const sortedDataResult = getSortedItems(filteredDataResult);
@@ -9,27 +10,27 @@ export function SortedItemsMap({ filteredDataResult, listPath }) {
 		getGroupedItems(sortedDataResult);
 	return (
 		<>
-			<h4 className="List-section-header">Overdue</h4>
+			<h4 className="SortedItems-section-header">Overdue</h4>
 			{overdue.map((item) => (
 				<ListItem key={item.id} item={item} listPath={listPath} />
 			))}
-			<hr className="list-section-divider" />
-			<h4 className="List-section-header">Soon</h4>
+			<hr className="SortedItems-section-divider" />
+			<h4 className="SortedItems-section-header">Soon</h4>
 			{buySoon.map((item) => (
 				<ListItem key={item.id} item={item} listPath={listPath} />
 			))}
-			<hr className="list-section-divider" />
-			<h4 className="List-section-header">Kind of soon</h4>
+			<hr className="SortedItems-section-divider" />
+			<h4 className="SortedItems-section-header">Kind of soon</h4>
 			{buyKindOfSoon.map((item) => (
 				<ListItem key={item.id} item={item} listPath={listPath} />
 			))}
-			<hr className="list-section-divider" />
-			<h4 className="List-section-header">Not soon</h4>
+			<hr className="SortedItems-section-divider" />
+			<h4 className="SortedItems-section-header">Not soon</h4>
 			{buyNotSoon.map((item) => (
 				<ListItem key={item.id} item={item} listPath={listPath} />
 			))}
-			<hr className="list-section-divider" />
-			<h4 className="List-section-header">Inactive</h4>
+			<hr className="SortedItems-section-divider" />
+			<h4 className="SortedItems-section-header">Inactive</h4>
 			{inactive.map((item) => (
 				<ListItem key={item.id} item={item} listPath={listPath} />
 			))}

From fb1bb7a92bca4b78dc4dec81500f85e121a8af8f Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:56:44 -0400
Subject: [PATCH 09/10] Changes some css for List view

---
 src/views/List.css | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/views/List.css b/src/views/List.css
index c140f86..beb73fa 100644
--- a/src/views/List.css
+++ b/src/views/List.css
@@ -7,18 +7,23 @@
 	border-bottom: 1px solid #e0e0e0;
 }
 
-.List > div:first-child button {
-	height: 25px;
-	width: 100px;
-	border: '1px solid tomato';
-	border-radius: '8px';
-	display: 'flex';
-	flex-direction: 'column';
-	gap: '.25em';
-	margin-top: '.5em';
-	padding: '.5em';
-	place-items: 'center';
-	cursor: pointer;
+.List-share-add-search {
+	display: flex;
+	justify-content: space-between;
+	/* align-items: center; */
+}
+
+.List-share-add-search > form input {
+	display: flex;
+	flex-grow: 1;
+}
+
+.List-share-add {
+	/* flex: 1; */
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .List-share-email-dialog-container {
@@ -29,12 +34,12 @@
 	gap: 1em;
 }
 
-.List-items-section {
+.List-items-ul {
 	list-style-type: none;
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
-	margin-top: 40px;
+	/* margin-top: 10px; */
 }
 
 .add-item-button {
@@ -50,13 +55,6 @@
 	padding-left: 30px;
 }
 
-.list-section-divider {
-	margin-top: 30px;
-	width: 80%;
-	display: flex;
-	margin-left: 0;
-}
-
 .List-section-header {
 	margin: 0px;
 }

From f3836c236c776a557da6277ea537d9fba7b3520f Mon Sep 17 00:00:00 2001
From: krsnamara <martinj.fitzpatrick@gmail.com>
Date: Mon, 1 Apr 2024 23:57:37 -0400
Subject: [PATCH 10/10] Reorders the share add search section to cosolidate
 space

---
 src/views/List.jsx | 79 ++++++++++++++++++++++------------------------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/src/views/List.jsx b/src/views/List.jsx
index 80c5e29..9bf5f04 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -158,12 +158,29 @@ export function List({
 					)}
 				</ul>
 				<hr />
-				<div>
-					<h3>Welcome to your "{listName}" list. </h3>
-					<button onClick={handleShareList}>Share List</button>
-					<button className="add-item-button" onClick={handleAddItem}>
-						Add Item
-					</button>
+				<h3>Welcome to your "{listName}" list. </h3>
+				<div className="List-share-add-search">
+					{!!data && (
+						<form>
+							<label htmlFor="searchString">
+								Search:{' '}
+								<input
+									type="text"
+									id="searchString"
+									name="searchString"
+									value={searchString}
+									onChange={handleChange}
+								/>
+							</label>
+							{searchString ? <button onClick={handleClick}>x</button> : ''}
+						</form>
+					)}
+					<div className="List-share-add">
+						<button onClick={handleShareList}>Share List</button>
+						<button className="add-item-button" onClick={handleAddItem}>
+							Add Item
+						</button>
+					</div>
 				</div>
 				<Dialog
 					open={isShareDialogOpen}
@@ -197,24 +214,8 @@ export function List({
 						</div>
 					</div>
 				</Dialog>
-				<br />
-				{!!data && (
-					<form>
-						<label htmlFor="searchString">
-							Search:{' '}
-							<input
-								type="text"
-								id="searchString"
-								name="searchString"
-								value={searchString}
-								onChange={handleChange}
-							/>
-						</label>
-						{searchString ? <button onClick={handleClick}>x</button> : ''}
-					</form>
-				)}
 
-				<ul className="List-items-section">
+				<ul className="List-items-ul">
 					{!!data ? (
 						<SortedItemsMap
 							listPath={listPath}
@@ -235,24 +236,20 @@ export function List({
 					onCancel={() => setIsAddItemDialogOpen(false)}
 					onSubmit={handleAddItemConfirmClick}
 				>
-					<div className="List-modal-container">
-						<div className="List-modal-inner">
-							<AddItem formData={formData} setFormData={setFormData} />
-							<div className="Dialog--button-group">
-								<button
-									className="c-button c-button-cancel"
-									onClick={handleAddItemCancelClick}
-								>
-									Cancel
-								</button>
-								<button
-									className="c-button c-button-confirm"
-									onClick={handleAddItemConfirmClick}
-								>
-									Add Item
-								</button>
-							</div>
-						</div>
+					<AddItem formData={formData} setFormData={setFormData} />
+					<div className="Dialog--button-group">
+						<button
+							className="c-button c-button-cancel"
+							onClick={handleAddItemCancelClick}
+						>
+							Cancel
+						</button>
+						<button
+							className="c-button c-button-confirm"
+							onClick={handleAddItemConfirmClick}
+						>
+							Add Item
+						</button>
 					</div>
 				</Dialog>
 			</div>
