the-collab-lab · krsnamara · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git 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>

diff --git 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

diff --git 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);

diff --git 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);
 }
diff --git 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,27 +96,27 @@ 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}
 					onChange={handleCheck}
 					name={name}
 					checked={isChecked}
 				/>
-				<h5 className="item-name">{name}</h5>
+				<p className="ListItem-buy-next">{name}</p>
 				<button
 					type="button"
 					id={name}
 					name={name}
 					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>
 	);
 }
diff --git a/src/components/SortedItemsMap.css 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;
+}
diff --git 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} />
 			))}

diff --git 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);
 }