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 <[email protected]>
Co-authored-by: Andrea Pang <[email protected]>

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",

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

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>
+	);
+}

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

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>
+	);
+}

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';
 	}

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">

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>
 		</>
 	);