From 4045baaa04a02eca0fe0b0a6669d2d8070e099a3 Mon Sep 17 00:00:00 2001
From: Emily Tiry <7997357+etiry@users.noreply.github.com>
Date: Sat, 6 Apr 2024 20:36:10 -0400
Subject: [PATCH] List and Manage List styling (#63)

* List name header styling and component

* Heading bottom margin and share list styling

* List header bottom margin

* Moved colors object in theme into extend to allow use of Tailwind colors

* Delete List button styling

* Added tailwindcss-forms plugin, basic list item styling without purchase urgency pill

* Created dynamic list item urgency label as component, added hover color to palette, changed urgency return 'Kind of soon' to 'Kinda soon'

* Urgency label text styling, list item wrapping

* Adjusted responsiveness for label and delete button

* Cleaned up List view logic

* Added no listpath logic for ManageList view, match header section nesting in List and ManageList views

* List view filter styling

* Added default icon to list item names

* WIP - Style add item form

* Finish styling add item form

* Adjusted new item and filter form input widths, filter form button responsive styling

* Refactored ListItem with grid for better aesthetics, removed unneeded code from AddItem, refactored grid templates for tiny screen size into one.

* Changed all form input backgrounds to default white

---------

Co-authored-by: andiedoescode <pang.andrea@gmail.com>
Co-authored-by: Andrea Pang <98671035+andiedoescode@users.noreply.github.com>
---
 package-lock.json               | 22 ++++++++
 package.json                    |  1 +
 src/components/AddItem.jsx      | 62 +++++++++++++----------
 src/components/ListHeader.jsx   |  7 +++
 src/components/ListItem.jsx     | 44 +++++++++-------
 src/components/UrgencyLabel.jsx | 32 ++++++++++++
 src/utils/hooks.js              |  2 +-
 src/views/Layout.jsx            |  8 +--
 src/views/List.jsx              | 89 ++++++++++++++++++---------------
 src/views/ManageList.jsx        | 79 ++++++++++++++++++++++-------
 tailwind.config.js              | 30 +++++++----
 11 files changed, 260 insertions(+), 116 deletions(-)
 create mode 100644 src/components/ListHeader.jsx
 create mode 100644 src/components/UrgencyLabel.jsx

diff --git a/package-lock.json b/package-lock.json
index b1fd255..4af87de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
 			"devDependencies": {
 				"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 				"@nabla/vite-plugin-eslint": "^1.5.0",
+				"@tailwindcss/forms": "^0.5.7",
 				"@testing-library/jest-dom": "^5.17.0",
 				"@testing-library/react": "^14.0.0",
 				"@testing-library/user-event": "^14.4.3",
@@ -3856,6 +3857,18 @@
 				"@svgr/core": "*"
 			}
 		},
+		"node_modules/@tailwindcss/forms": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+			"integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+			"dev": true,
+			"dependencies": {
+				"mini-svg-data-uri": "^1.2.3"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+			}
+		},
 		"node_modules/@testing-library/dom": {
 			"version": "9.3.4",
 			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
@@ -9234,6 +9247,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/mini-svg-data-uri": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+			"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+			"dev": true,
+			"bin": {
+				"mini-svg-data-uri": "cli.js"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index eb94608..aa863ba 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 		"@nabla/vite-plugin-eslint": "^1.5.0",
+		"@tailwindcss/forms": "^0.5.7",
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^14.0.0",
 		"@testing-library/user-event": "^14.4.3",
diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
index ec830c5..1771a21 100644
--- a/src/components/AddItem.jsx
+++ b/src/components/AddItem.jsx
@@ -48,34 +48,44 @@ export function AddItem({ data, listPath }) {
 	};
 
 	return (
-		<section>
-			<form onSubmit={handleItemSubmit}>
-				<label htmlFor="itemName">
-					Item Name
-					<input
-						id="itemName"
-						name="itemName"
-						type="text"
-						value={newItem.itemName}
-						onChange={handleItemChange}
-					></input>
+		<section className="mt-8 mb-8">
+			<form
+				onSubmit={handleItemSubmit}
+				className="grid xs:grid-cols-addItem grid-cols-gridTiny grid-rows-2 items-center"
+			>
+				<label htmlFor="itemName" className="col-span-1">
+					New Item:
 				</label>
-				<label htmlFor="daysUntilNextPurchase">
-					Next Purchase
-					<select
-						id="daysUntilNextPurchase"
-						name="daysUntilNextPurchase"
-						value={newItem.daysUntilNextPurchase}
-						onChange={handleItemChange}
-						required
-					>
-						<option value="">Select Next Purchase Date</option>
-						<option value={7}>Soon</option>
-						<option value={14}>Kind of soon</option>
-						<option value={30}>Not soon</option>
-					</select>
+				<input
+					id="itemName"
+					name="itemName"
+					type="text"
+					value={newItem.itemName}
+					onChange={handleItemChange}
+					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full mt-2 text-2xl col-span-1 shrink"
+				></input>
+				<button
+					type="submit"
+					className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 md:m-w-2xl order-last xs:order-none col-span-2 xs:col-span-1"
+				>
+					Add
+				</button>
+				<label htmlFor="daysUntilNextPurchase" className="col-span-1">
+					Urgency:
 				</label>
-				<button type="submit">Add Item</button>
+				<select
+					id="daysUntilNextPurchase"
+					name="daysUntilNextPurchase"
+					value={newItem.daysUntilNextPurchase}
+					onChange={handleItemChange}
+					required
+					className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 mx-4 max-w-full grow mt-2 text-xl xs:text-2xl"
+				>
+					<option value="">Select Urgency</option>
+					<option value={7}>Soon</option>
+					<option value={14}>Kind of soon</option>
+					<option value={30}>Not soon</option>
+				</select>
 			</form>
 		</section>
 	);
diff --git a/src/components/ListHeader.jsx b/src/components/ListHeader.jsx
new file mode 100644
index 0000000..27c16db
--- /dev/null
+++ b/src/components/ListHeader.jsx
@@ -0,0 +1,7 @@
+export function ListHeader({ text }) {
+	return (
+		<h2 className="flex-1 bg-sage min-h-24 text-center content-center font-bold text-4xl mb-12">
+			{text}
+		</h2>
+	);
+}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index 28425ea..d2507ab 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -3,6 +3,9 @@ import { updateItem, deleteItem } from '../api/firebase.js';
 import { useState, useEffect } from 'react';
 import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates.js';
 import { purchaseUrgency } from '../utils/hooks.js';
+import { FaRegTrashCan } from 'react-icons/fa6';
+import { UrgencyLabel } from './UrgencyLabel.jsx';
+import { RiShoppingCart2Fill } from 'react-icons/ri';
 
 export function ListItem({ listPath, item }) {
 	//Box is checked on render if purchased within 24 hrs
@@ -46,26 +49,33 @@ export function ListItem({ listPath, item }) {
 	};
 
 	return (
-		<li className="ListItem">
+		<li className="ListItem bg-pale-green hover:bg-green-hover border border-dark-green min-h-14 rounded-xl text-3xl mb-2 items-center grid grid-cols-gridTiny xs:grid-cols-listItem">
+			<input
+				type="checkbox"
+				id={item.name}
+				name="purchased"
+				onChange={changeHandler}
+				checked={isChecked}
+				className="rounded-full border-dark-green w-8 h-8 mx-4 hover:bg-slate-100 row-span-2 xs:row-span-1"
+			/>
 			<label htmlFor={item.name}>
-				{item.name}
-				<input
-					type="checkbox"
-					id={item.name}
-					name="purchased"
-					onChange={changeHandler}
-					checked={isChecked}
-				/>
+				<RiShoppingCart2Fill className="inline" /> {item.name}
 			</label>
-			<div>
-				{purchaseUrgency(
-					item.dateNextPurchased,
-					item.dateLastPurchased[item.dateLastPurchased.length - 1],
-				)}
+			<div className="ml-auto flex items-center">
+				<UrgencyLabel
+					text={purchaseUrgency(
+						item.dateNextPurchased,
+						item.dateLastPurchased[item.dateLastPurchased.length - 1],
+					)}
+				/>
+				<button
+					type="button"
+					onClick={deleteHandler}
+					className="border border-dark-green p-1 px-3 rounded-lg mr-2 hover:bg-red-400"
+				>
+					<FaRegTrashCan aria-hidden="true" title="Delete" />
+				</button>
 			</div>
-			<button type="button" onClick={deleteHandler}>
-				Delete
-			</button>
 		</li>
 	);
 }
diff --git a/src/components/UrgencyLabel.jsx b/src/components/UrgencyLabel.jsx
new file mode 100644
index 0000000..07b2292
--- /dev/null
+++ b/src/components/UrgencyLabel.jsx
@@ -0,0 +1,32 @@
+export function UrgencyLabel({ text }) {
+	let labelColor = '';
+
+	switch (text) {
+		case 'Overdue':
+			labelColor = 'bg-red-400';
+			break;
+		case 'Soon':
+			labelColor = 'bg-orange-400';
+			break;
+		case 'Kinda Soon':
+			labelColor = 'bg-amber-300';
+			break;
+		case 'Not Soon':
+			labelColor = 'bg-teal-400';
+			break;
+		default:
+			labelColor = 'border border-dark-green';
+			break;
+	}
+
+	return (
+		<span
+			className={
+				'ml-auto mr-4 rounded-lg px-2 py-1 text-center uppercase text-xl ' +
+				labelColor
+			}
+		>
+			{text}
+		</span>
+	);
+}
diff --git a/src/utils/hooks.js b/src/utils/hooks.js
index 8f049a3..dd7d1ec 100644
--- a/src/utils/hooks.js
+++ b/src/utils/hooks.js
@@ -39,7 +39,7 @@ export function purchaseUrgency(dateNextPurchased, lastPurchased) {
 	} else if (nextPurchaseDaysBetween <= 7) {
 		return 'Soon';
 	} else if (nextPurchaseDaysBetween < 30) {
-		return 'Kind Of Soon';
+		return 'Kinda Soon';
 	} else {
 		return 'Not Soon';
 	}
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 52a9e3e..642579a 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -1,8 +1,8 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import { IoHome, IoList, IoCreate } from 'react-icons/io5';
+import { auth } from '../api/config.js';
 
 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';
 
@@ -14,9 +14,9 @@ export function Layout() {
 		'Nav-link text-eggshell border-2 rounded-full border-vanilla  hover:text-sage hover:border-sage';
 	return (
 		<>
-			<div className="Layout">
+			<div className="Layout bg-eggshell">
 				<header
-					className="Layout-header flex flex-col items-center  bg-eggshell font-Rubik
+					className="Layout-header flex flex-col items-center bg-eggshell font-Rubik
 				text-off-black"
 				>
 					<img className="md:w-1/3" src={buddyLogo} alt="Basket Buddy" />
@@ -29,7 +29,7 @@ export function Layout() {
 						<SignInButton />
 					)}
 				</header>
-				<main className="Layout-main">
+				<main className="Layout-main flex flex-col px-0 font-Rubik">
 					<Outlet />
 				</main>
 				<nav className="Nav bg-brown">
diff --git a/src/views/List.jsx b/src/views/List.jsx
index dd5e60f..edc83cd 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { comparePurchaseUrgency } from '../api/firebase';
 import { AddItem, ListItem } from '../components';
+import { ListHeader } from '../components/ListHeader.jsx';
 
 export function List({ data, listPath }) {
 	const [searchTerm, setSearchTerm] = useState('');
@@ -31,54 +32,62 @@ export function List({ data, listPath }) {
 
 	return (
 		<>
-			{listPath ? (
-				<>
-					<h2>{listName}</h2>
-					<AddItem data={data} listPath={listPath} />
-				</>
-			) : null}
-			{data.length > 0 ? (
-				<section>
-					<form>
-						<label htmlFor="itemFilter">
-							Search for an item:
+			{listPath ? <ListHeader text={listName} /> : null}
+			<section className="mx-8 md:mx-24 flex flex-col">
+				{listPath ? <AddItem data={data} listPath={listPath} /> : null}
+				{data.length > 0 ? (
+					<section className="mt-8 mb-4">
+						<form className="flex flex-wrap items-center gap-x-6">
+							<label htmlFor="itemFilter" className="">
+								Filter:
+							</label>
 							<input
 								type="text"
 								id="itemFilter"
 								name="itemFilter"
 								value={searchTerm}
 								onChange={handleChange}
+								className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 grow max-w-full mt-2 text-2xl"
 							/>
-						</label>
-						{searchTerm ? <button onClick={reset}>Reset</button> : null}
-					</form>
-				</section>
-			) : null}
-			{listPath && data.length === 0 ? (
-				<h2>This list is currently empty!</h2>
-			) : null}
-			{!listPath ? (
-				<>
-					<h2>{listName}</h2>
-					<AddItem data={data} listPath={listPath} />
-				</>
-			) : null}
-
-			{!listPath ? (
-				<>
-					<h2>
-						You haven't selected a list yet. Click below to select a list.
-					</h2>
-					<button onClick={() => handleClick('/')}>Select a list</button>
-				</>
-			) : null}
+							{searchTerm ? (
+								<button
+									onClick={reset}
+									className="bg-red-400 rounded-xl px-2 py-1 grow min-h-14 xs:max-w-28 mt-2"
+								>
+									Reset
+								</button>
+							) : null}
+						</form>
+					</section>
+				) : null}
+				{listPath && data.length === 0 ? (
+					<div className="bg-pale-green border border-dark-green rounded-2xl py-8 mt-8">
+						<h3 className="text-center font-semibold">
+							This list is currently empty!
+						</h3>
+					</div>
+				) : null}
+				{!listPath ? (
+					<>
+						<ListHeader text="You haven't selected a list yet. Click below to select a list." />
+						<div className="flex justify-center">
+							<button
+								onClick={() => handleClick('/')}
+								className="border border-dark-green rounded-2xl px-4 py-2 hover:bg-pale-green"
+							>
+								Select a list
+							</button>
+						</div>
+					</>
+				) : null}
 
-			<section>
-				<ul>
-					{filteredData.map((item) => {
-						return <ListItem key={item.id} item={item} listPath={listPath} />;
-					})}
-				</ul>
+				<section>
+					<ul>
+						{filteredData.map((item) => {
+							return <ListItem key={item.id} item={item} listPath={listPath} />;
+						})}
+					</ul>
+				</section>
 			</section>
 		</>
 	);
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 91bebaf..6eb89e4 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { shareList, deleteList } from '../api/firebase.js';
 import { useNavigate } from 'react-router-dom';
+import { deleteList, shareList } from '../api/firebase.js';
+import { ListHeader } from '../components/ListHeader.jsx';
 
 export function ManageList({ setListPath, listPath, userEmail, userId }) {
 	const navigate = useNavigate();
@@ -8,6 +9,10 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 	const listName = listPath?.split('/')[1];
 	const [shareEmail, setShareEmail] = useState('');
 
+	const handleClick = (selectedPath) => {
+		navigate(selectedPath);
+	};
+
 	const handleShareChange = ({ target }) => {
 		setShareEmail(target.value);
 	};
@@ -54,23 +59,59 @@ export function ManageList({ setListPath, listPath, userEmail, userId }) {
 
 	return (
 		<>
-			<h2>{listName}</h2>
-			<section>
-				<form onSubmit={handleShareSubmit}>
-					<label htmlFor="shareEmail">
-						Share with:
-						<input
-							id="shareEmail"
-							name="shareEmail"
-							type="email"
-							value={shareEmail}
-							onChange={handleShareChange}
-						></input>
-					</label>
-					<button type="submit">Send invite!</button>
-				</form>
-				<button onClick={handleDelete}>DELETE this list!</button>
-			</section>
+			{listPath ? (
+				<>
+					<ListHeader text={listName} />
+					<section className="mx-8 md:mx-24">
+						<form onSubmit={handleShareSubmit} className="w-full">
+							<div>
+								<label htmlFor="shareEmail" className="text-4xl">
+									Share List
+								</label>
+							</div>
+							<div className="flex flex-wrap xs:flex-nowrap gap-x-6">
+								<input
+									id="shareEmail"
+									name="shareEmail"
+									type="email"
+									value={shareEmail}
+									placeholder="Enter Recipient Email"
+									onChange={handleShareChange}
+									className="bg-white border-solid border-2 rounded-xl border-sage pl-2 min-h-14 md:w-8/12 grow mt-4 text-xl xs:text-2xl"
+								></input>
+								<button
+									type="submit"
+									className="bg-sage p-2 px-4 rounded-xl text-3xl min-h-14 mt-4 grow xs:grow-0"
+								>
+									Send invite!
+								</button>
+							</div>
+						</form>
+					</section>
+					<section className="mx-8 md:mx-24 mt-24">
+						<h3 className="text-4xl">List Options</h3>
+						<button
+							onClick={handleDelete}
+							className="mt-4 bg-red-400/80 min-h-14 px-24 rounded-xl text-3xl w-full"
+						>
+							Delete List
+						</button>
+					</section>
+				</>
+			) : null}
+			{!listPath ? (
+				<>
+					<ListHeader text="You haven't selected a list yet. Click below to select a list." />
+					<div className="flex justify-center">
+						<button
+							onClick={() => handleClick('/')}
+							className="border border-dark-green rounded-2xl px-4 py-2 hover:bg-pale-green"
+						>
+							Select a list
+						</button>
+					</div>
+				</>
+			) : null}
 		</>
 	);
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index f6e22b8..1aaa852 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,20 +5,32 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 export default {
 	content: ['./src/**/*.{js,jsx,ts,tsx}'],
 	theme: {
-		colors: {
-			eggshell: '#FDFDF2',
-			sage: '#BBC893',
-			brown: '#D4A373',
-			yellow: '#FEFAE0',
-			vanilla: '#FAEDCD',
-			'pale-green': '#E9EDC9',
-			'off-black': '#353839',
+		screens: {
+			tiny: '100px',
+			xs: '395px',
+			...defaultTheme.screens,
 		},
 		extend: {
 			fontFamily: {
 				Rubik: ['Rubik', ...defaultTheme.fontFamily.sans],
 			},
+			colors: {
+				eggshell: '#FDFDF2',
+				sage: '#BBC893',
+				brown: '#D4A373',
+				yellow: '#FEFAE0',
+				vanilla: '#FAEDCD',
+				'pale-green': '#E9EDC9',
+				'dark-green': '#4D5A3A',
+				'green-hover': '#DAE1A6',
+        'off-black': '#353839',
+			},
+			gridTemplateColumns: {
+				addItem: 'max-content 4fr 1fr',
+				listItem: 'max-content minmax(10px, 1fr) max-content',
+				gridTiny: 'max-content minmax(10px, 1fr)',
+			},
 		},
 	},
-	plugins: [],
+	plugins: [require('@tailwindcss/forms')],
 };