Issue # 56. Designing responsive list component for the list page

package.json

@@ -16,6 +16,7 @@
 		"react-bootstrap": "^2.10.5",
 		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",
+		"react-icons": "^5.3.0",
 		"react-router-dom": "^6.26.2"
 	},
 	"devDependencies": {

src/components/FilterListInput.tsx

@@ -26,8 +26,11 @@ export function FilterListInput({
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<InputGroup>
-				<Form.Label htmlFor="filterList">Filter List:</Form.Label>
+			<InputGroup className="d-flex align-items-center">
+				<Form.Label htmlFor="filterList" className="me-2 mb-0">
+					{" "}
+					Filter List:
+				</Form.Label>
 				<Form.Control
 					type="text"
 					onChange={handleChange}
@@ -36,7 +39,7 @@ export function FilterListInput({
 					aria-label="Filter items in the list"
 					placeholder="Search items..."
 				/>
-				<Button onClick={handleClear}>x</Button>
+				<Button onClick={handleClear}>Clear</Button>
 			</InputGroup>
 		</Form>
 	);

src/components/ListItem.scss

@@ -1,15 +1,32 @@
-.ListItem {
+@import "../styles/_variables";
+
+.ListItemBox {
 	align-items: baseline;
-	display: flex;
-	flex-direction: row;
-	font-size: 1.2em;
+	font-size: 1.5em;
 	justify-content: space-between;
+	background-color: $primary-blue;
+	color: $primary-beige;
+	border-radius: 4px;
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+.UrgencyStatus {
+	display: block;
+	background-color: $secondary-blue;
+	color: $primary-beige;
+	font-size: 1.25em;
+	max-width: 50%;
+	width: 100%;
+	border-radius: 4px;
 }
 
-.ListItem-checkbox {
-	accent-color: var(--color-accent);
+.DeleteButton {
+	width: fit-content;
 }
 
-.ListItem-label {
-	margin-left: 0.2em;
+@media (max-width: 576px) {
+	.EditItem {
+		flex-direction: column;
+	}
 }

src/components/ListItem.tsx

@@ -6,6 +6,7 @@ import { moreThan24HoursPassed, getDaysBetweenDates } from "../utils";
 import { ItemQuantityForm } from "./forms/ItemQuantityForm";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
+import { MdOutlineDeleteForever } from "react-icons/md";
 
 interface Props {
 	item: ListItem;
@@ -119,23 +120,39 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 	};
 
 	return (
-		<div className="ListItem">
-			<Form.Check
-				type="checkbox"
-				id={`checkbox-${item.id}`}
-				aria-label={`Mark ${item.name} as purchased.`}
-				value={item.id}
-				checked={isChecked}
-				onChange={handleCheckChange}
-				aria-checked={isChecked}
-				disabled={isChecked}
-			/>
-			<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} /> x{" "}
-			{item.name}{" "}
-			<span>
+		<div className="d-flex flex-column justify-content-center mt-4">
+			<span className="UrgencyStatus text-nowrap ms-5 px-5">
 				{getUrgencyStatus(item)}
-				<Button onClick={() => deleteItemHandler()}>Delete Item</Button>
 			</span>
+			<section className="ListItemBox d-flex p-2 m-1">
+				<section className="d-flex flex-grow-1 PurchaseItem">
+					<Form.Check
+						className="me-3"
+						type="checkbox"
+						id={`checkbox-${item.id}`}
+						aria-label={`Mark ${item.name} as purchased.`}
+						value={item.id}
+						checked={isChecked}
+						onChange={handleCheckChange}
+						aria-checked={isChecked}
+						disabled={isChecked}
+					/>
+					<h4 className="text-nowrap me-1 mb-0"> {item.name} </h4>
+				</section>
+
+				<section className="EditItem d-flex  gap-sm-4 align-items-end">
+					<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} />
+
+					<Button
+						className="DeleteButton mt-auto w-auto ms-2 "
+						variant="danger"
+						onClick={() => deleteItemHandler()}
+					>
+						<span className="d-none d-md-inline">Delete</span>
+						<MdOutlineDeleteForever className="  d-block d-md-none" />
+					</Button>
+				</section>
+			</section>
 		</div>
 	);
 }

src/components/forms/ItemQuantityForm.tsx

@@ -3,6 +3,9 @@ import { ListItem } from "../../api";
 import { toast } from "react-hot-toast";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
+import { FaEdit } from "react-icons/fa";
+import { IoMdCheckmark } from "react-icons/io";
+import { GiCancel } from "react-icons/gi";
 
 interface ItemQuantityFormProps {
 	saveItemQuantity: (quantity: number) => void;
@@ -43,8 +46,9 @@ export function ItemQuantityForm({
 	};
 
 	return (
-		<>
+		<div className="d-flex">
 			<Form.Control
+				className="me-3 w-auto"
 				id="item-quantity"
 				aria-label="Item quantity"
 				type="number"
@@ -55,14 +59,25 @@ export function ItemQuantityForm({
 				onChange={(e) => setItemQuantity(Number(e.target.value))}
 				disabled={!edit}
 			/>
-			{edit ? (
-				<span>
-					<Button onClick={updateItemQuantity}>Save!</Button>{" "}
-					<Button onClick={toggleEdit}>Cancel!</Button>
-				</span>
-			) : (
-				<Button onClick={toggleEdit}>Edit!</Button>
-			)}
-		</>
+			<div>
+				{edit ? (
+					<>
+						<Button onClick={updateItemQuantity}>
+							<span className="d-none d-md-inline"> Save </span>
+							<IoMdCheckmark className="d-block d-md-none" />
+						</Button>{" "}
+						<Button onClick={toggleEdit}>
+							<span className="d-none d-md-inline">Cancel</span>
+							<GiCancel className="d-block d-md-none" />
+						</Button>
+					</>
+				) : (
+					<Button onClick={toggleEdit}>
+						<span className="d-none d-md-inline">Edit</span>
+						<FaEdit className="d-block d-md-none" />
+					</Button>
+				)}
+			</div>
+		</div>
 	);
 }

src/views/authenticated/List.scss

@@ -0,0 +1,19 @@
+@import "../../styles/variables";
+
+.ListName {
+	color: $primary-beige;
+	background-color: $primary-blue;
+	text-align: center;
+	border-radius: 4px;
+	font-size: 2.5em;
+	max-width: 100%;
+}
+
+.Header {
+	text-align: center;
+}
+
+.ListContainer {
+	max-width: 100%;
+	width: fit-content;
+}

src/views/authenticated/List.tsx

@@ -1,8 +1,10 @@
+import "./List.scss";
 import { useParams, useNavigate } from "react-router-dom";
 import { useState, useMemo } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
+import { Container } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 
 interface Props {
@@ -25,8 +27,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 	const Header = () => {
 		return (
-			<p>
-				Hello from the <code>/list</code> page!
+			<p className="Header">
+				For your ease, items are sorted by next purchase date. View and edit
+				shopping list items on the go. Mark items as purchased. Shopping has
+				never been easier.
 			</p>
 		);
 	};
@@ -38,9 +42,8 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	// Early return if the list is empty
 	if (unfilteredListItems.length === 0) {
 		return (
-			<>
-				<h2>{listName}</h2>
-				<Header />
+			<Container>
+				<h2 className="ListName">{listName}</h2>
 				<section>
 					<h3>
 						You haven’t added any items yet.
@@ -54,33 +57,36 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 						{"Get started!"}
 					</Button>
 				</section>
-			</>
+			</Container>
 		);
 	}
 
 	// Main content when list is not empty
 	return (
 		<>
-			<h2>{listName}</h2>
-
-			<Header />
+			<header>
+				<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
+				<Header />
+			</header>
 
-			<section className="sticky-top bg-dark">
+			<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
 				{unfilteredListItems.length > 0 && (
 					<FilterListInput
 						searchTerm={searchTerm}
 						setSearchTerm={setSearchTerm}
 					/>
 				)}
-				<h3>Want to add more items to your list?</h3>
+
 				<Button
+					className="ms-2"
 					onClick={() => navigate("/manage-list")}
 					aria-label="Navigate to add more items to your list"
 				>
 					{"Add items"}
 				</Button>
 			</section>
-			<section>
+
+			<section className="ListItemContainer">
 				{filteredListItems.map((item) => (
 					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />
 				))}