Merge pull request #67 from the-collab-lab/ma/designing-responsive-listview

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

Author: eternalmaha

package-lock.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": {

package.json

@@ -25,9 +25,11 @@ export function FilterListInput({
 	};
 
 	return (
-		<Form onSubmit={handleSubmit}>
-			<InputGroup>
-				<Form.Label htmlFor="filterList">Filter List:</Form.Label>
+		<Form className="w-100 w-lg-auto" onSubmit={handleSubmit}>
+			<InputGroup className="d-flex align-items-center mt-1">
+				<Form.Label htmlFor="filterList" className="me-2 mb-0">
+					<span className="fw-bold">Filter List:</span>
+				</Form.Label>
 				<Form.Control
 					type="text"
 					onChange={handleChange}
@@ -37,8 +39,9 @@ export function FilterListInput({
 					placeholder="Search items..."
 				/>
 				<Button className="custom-button" onClick={handleClear}>
-					x
+					Clear
 				</Button>
+
 			</InputGroup>
 		</Form>
 	);

src/components/FilterListInput.tsx

@@ -1,15 +1,66 @@
-.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: 80%;
+	border-radius: 4px;
+
+	// Default styles for urgency status
+	font-weight: bold;
+
+	&.inactive {
+		color: gray;
+	}
+
+	&.overdue {
+		color: red;
+	}
+
+	&.soon {
+		color: orange;
+	}
+
+	&.kind-of-soon {
+		color: yellow;
+	}
+
+	&.not-soon {
+		color: green;
+	}
+}
+
+.DeleteButton {
+	width: fit-content;
 }
 
-.ListItem-checkbox {
-	accent-color: var(--color-accent);
+.custom-borders {
+	border: 2px solid $secondary-blue !important;
+	border-radius: 4px !important;
+	padding: 20px;
+	margin-top: 20px;
+	position: relative;
 }
 
-.ListItem-label {
-	margin-left: 0.2em;
+@media (max-width: 576px) {
+	.EditItem {
+		flex-direction: column;
+	}
+	.PurchaseItem {
+		font-size: 0.75em;
+	}
 }

src/components/ListItem.scss

@@ -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;
@@ -63,6 +64,8 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 		return "kind of soon";
 	};
 
+	const urgencyStatus = getUrgencyStatus(item);
+
 	const handleCheckChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
 		const newCheckedState = e.target.checked;
 
@@ -119,25 +122,41 @@ 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>
-				{getUrgencyStatus(item)}
-				<Button className="custom-button" onClick={() => deleteItemHandler()}>
-					Delete Item
-				</Button>
+		<div className="d-flex flex-column justify-content-center mt-5">
+			<span
+				className={`UrgencyStatus text-center text-nowrap ms-5 w-auto p-1 ${urgencyStatus.replace(/\s/g, "-")}`}
+			>
+				{urgencyStatus}
 			</span>
+			<section className="ListItemBox custom-borders d-flex p-2 m-1 align-items-center">
+				<section className="PurchaseItem d-flex flex-grow-1">
+					<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}
+					/>
+					<Form.Label>{item.name}</Form.Label>
+				</section>
+
+				<section className="EditItem d-flex gap-2 align-items-end">
+					<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} />
+
+					<Button
+						className="DeleteButton w-auto"
+						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/ListItem.tsx

@@ -29,10 +29,10 @@
 			color: $secondary-blue;
 		}
 	}
+}
 
-	.navbar .navbar-toggler {
-		background-color: $primary-beige;
-	}
+.navbar .navbar-toggler {
+	background-color: $primary-beige;
 }
 
 .navbar button {

src/components/NavBar.scss

@@ -24,14 +24,7 @@ export function AuthenticatedNavBar() {
 						<Nav.Link as={NavLink} to="/" aria-label="Home" eventKey={"1"}>
 							Home
 						</Nav.Link>
-						<Nav.Link
-							as={NavLink}
-							to="/manage-list"
-							aria-label="Manage List"
-							eventKey={"2"}
-						>
-							Manage List
-						</Nav.Link>
+
 						<Nav.Link
 							as={NavLink}
 							to="/about"

src/components/authenticated/AuthenticatedNavBar.tsx

@@ -0,0 +1,20 @@
+@import "../../styles/variables";
+
+.custom-borders {
+	border: 2px solid $secondary-blue !important;
+	border-radius: 4px !important;
+	padding: 20px;
+	margin-top: 20px;
+	position: relative;
+}
+
+.legend-text {
+	font-weight: bold;
+	padding: 0 10px; /* Creates space between the border and text */
+	color: #001f3f; /* Optional: text color */
+	position: relative;
+	top: -40px;
+	left: 60px;
+	background-color: rgb(241, 230, 204);
+	width: 60%;
+}