style: layout of list items

the-collab-lab · Oct 9, 2024 · ac390b5 · ac390b5
1 parent 566bd0b
commit ac390b5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
@@ -119,23 +119,31 @@ 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 onClick={() => deleteItemHandler()}>Delete Item</Button>
-			</span>
-		</div>
+		<>
+			<span>{getUrgencyStatus(item)}</span>
+			<div className="ListItem col-12 p-3 mb-3">
+				<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="me-3 mb-0"> {item.name} </h4>
+				<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} />
+
+				<Button
+					className="me-3"
+					variant="danger"
+					onClick={() => deleteItemHandler()}
+				>
+					Delete Item
+				</Button>
+			</div>
+		</>
 	);
 }
diff --git a/src/components/forms/ItemQuantityForm.tsx b/src/components/forms/ItemQuantityForm.tsx
@@ -45,6 +45,7 @@ export function ItemQuantityForm({
 	return (
 		<>
 			<Form.Control
+				className="me-5 w-auto"
 				id="item-quantity"
 				aria-label="Item quantity"
 				type="number"
@@ -57,11 +58,11 @@ export function ItemQuantityForm({
 			/>
 			{edit ? (
 				<span>
-					<Button onClick={updateItemQuantity}>Save!</Button>{" "}
-					<Button onClick={toggleEdit}>Cancel!</Button>
+					<Button onClick={updateItemQuantity}>Save</Button>{" "}
+					<Button onClick={toggleEdit}>Cancel</Button>
 				</span>
 			) : (
-				<Button onClick={toggleEdit}>Edit!</Button>
+				<Button onClick={toggleEdit}>Edit</Button>
 			)}
 		</>
 	);

diff --git a/src/views/authenticated/List.tsx b/src/views/authenticated/List.tsx
@@ -66,7 +66,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 			<Header />
 
-			<section className="sticky-top bg-dark">
+			<section className="sticky-top">
 				{unfilteredListItems.length > 0 && (
 					<FilterListInput
 						searchTerm={searchTerm}