style: styling the list item component and layout

src/components/FilterListInput.tsx

@@ -27,7 +27,7 @@ export function FilterListInput({
 	return (
 		<Form onSubmit={handleSubmit}>
 			<InputGroup>
-				<Form.Label htmlFor="filterList">Filter List:</Form.Label>
+				<Form.Label htmlFor="filterList"> Filter List:</Form.Label>
 				<Form.Control
 					type="text"
 					onChange={handleChange}

src/components/ListItem.scss

@@ -17,3 +17,11 @@
 .ListItem-label {
 	margin-left: 0.2em;
 }
+
+.UrgencyStatus {
+	display: block;
+	background-color: $secondary-blue;
+	color: $primary-beige;
+	font-size: 1.5em;
+	max-width: 50%;
+}

src/components/ListItem.tsx

@@ -119,9 +119,9 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 	};
 
 	return (
-		<>
-			<span>{getUrgencyStatus(item)}</span>
-			<div className="ListItem col-12 p-3 mb-3">
+		<div className="mt-3">
+			<span className="UrgencyStatus ms-5 px-5">{getUrgencyStatus(item)}</span>
+			<div className="ListItem col-12 p-3 m-3">
 				<Form.Check
 					className="me-3"
 					type="checkbox"
@@ -133,7 +133,7 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 					aria-checked={isChecked}
 					disabled={isChecked}
 				/>
-				<h4 className="me-3 mb-0"> {item.name} </h4>
+				<h4 className="me-1 mb-0"> {item.name} </h4>
 				<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} />
 
 				<Button
@@ -144,6 +144,6 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 					Delete Item
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/views/authenticated/List.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useState, useMemo } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
+import { ManageList } from "./ManageList";
 import { ListItem, comparePurchaseUrgency } from "../../api";
 import Button from "react-bootstrap/Button";
 
@@ -27,7 +28,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	const Header = () => {
 		return (
 			<p>
-				Hello from the <code>/list</code> page!
+				Shopping has never been easier. You can now view and edit shopping list
+				items on the go. For your ease, items are sorted by their next purchase
+				dates.
 			</p>
 		);
 	};
@@ -66,21 +69,22 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 			<Header />
 
-			<section className="sticky-top">
+			<section className="d-flex sticky-top justify-content-center">
 				{unfilteredListItems.length > 0 && (
 					<FilterListInput
 						searchTerm={searchTerm}
 						setSearchTerm={setSearchTerm}
 					/>
 				)}
-				<h3>Want to add more items to your list?</h3>
 				<Button
+					className="ms-5"
 					onClick={() => navigate("/manage-list")}
 					aria-label="Navigate to add more items to your list"
 				>
 					{"Add items"}
 				</Button>
 			</section>
+
 			<section>
 				{filteredListItems.map((item) => (
 					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />