making adjustments to use RB 1 Container on list, adjust classes on edit buttons for styling, list item classes for responsiveness

Author: bbland1

src/components/ListItem.tsx

@@ -122,14 +122,13 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 	};
 
 	return (
-
 		<div className="d-flex flex-column justify-content-center mt-5">
 			<span
 				className={`UrgencyStatus text-nowrap ms-5 px-5 ${urgencyStatus.replace(/\s/g, "-")}`}
 			>
 				{urgencyStatus}
 			</span>
-			<section className="ListItemBox custom-borders d-flex p-2 m-1">
+			<section className="ListItemBox custom-borders d-flex p-2 m-1 align-items-center">
 				<section className="d-flex flex-grow-1 PurchaseItem">
 					<Form.Check
 						className="me-3"
@@ -142,14 +141,14 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 						aria-checked={isChecked}
 						disabled={isChecked}
 					/>
-					<h4 className="text-nowrap me-1 mb-0"> {item.name} </h4>
+					<Form.Label className="">{item.name}</Form.Label>
 				</section>
 
-				<section className="EditItem d-flex  gap-sm-4 align-items-end">
+				<section className="EditItem d-flex gap-2 align-items-end">
 					<ItemQuantityForm saveItemQuantity={editItemQuantity} item={item} />
 
 					<Button
-						className="DeleteButton mt-auto w-auto ms-2 "
+						className="DeleteButton w-auto"
 						variant="danger"
 						onClick={() => deleteItemHandler()}
 					>

src/components/NavBar.scss

@@ -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/forms/ItemQuantityForm.tsx

@@ -63,23 +63,22 @@ export function ItemQuantityForm({
 			<div>
 				{edit ? (
 					<>
-						<Button className="custom-button" onClick={updateItemQuantity}>
-							<span className="d-none d-md-inline"> Save </span>
+						<Button variant="dark" onClick={updateItemQuantity}>
+							<span className="d-none d-md-inline text-primary">Save</span>
 							<IoMdCheckmark className="d-block d-md-none" />
 						</Button>{" "}
-						<Button className="custom-button" onClick={toggleEdit}>
-							<span className="d-none d-md-inline">Cancel</span>
+						<Button variant="dark" onClick={toggleEdit}>
+							<span className="d-none d-md-inline text-primary">Cancel</span>
 							<GiCancel className="d-block d-md-none" />
 						</Button>
 					</>
 				) : (
-					<Button className="custom-button" onClick={toggleEdit}>
-						<span className="d-none d-md-inline">Edit</span>
+					<Button variant="dark" onClick={toggleEdit}>
+						<span className="d-none d-md-inline text-primary">Edit</span>
 						<FaEdit className="d-block d-md-none" />
 					</Button>
 				)}
 			</div>
 		</div>
-
 	);
 }

src/styles/global.scss

@@ -5,6 +5,7 @@ $theme-colors: (
 	"secondary": $primary-blue,
 	"info": $tertiary-blue,
 	"dark": $secondary-blue,
+	"danger": #dc3545,
 );
 
 $font-size-root: null;
@@ -26,14 +27,13 @@ body {
 	text-align: center;
 	border: none;
 	padding: 0.5rem;
-	width: 11rem;
 
 	&:hover {
 		background-color: $secondary-blue;
 		color: $primary-beige;
 	}
 }
 
-a svg {
+svg {
 	fill: $primary-beige;
 }

src/views/authenticated/List.tsx

@@ -4,7 +4,7 @@ import { useState, useMemo, useRef } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
-import { Container } from "react-bootstrap";
+import Container from "react-bootstrap/Container";
 import Button from "react-bootstrap/Button";
 import ShareListForm from "../../components/forms/ShareListForm";
 import { AddItemForm } from "../../components/forms/AddItemForm";
@@ -75,7 +75,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 	// Main content when list is not empty
 	return (
-		<Container className="ListPageContainer ">
+		<Container>
 			<div className="ListItemSection">
 				<header>
 					<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
@@ -104,7 +104,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 			</div>
 
 			<ShareListForm listPath={listPath} />
-			<Button className="d-md-none mt-3" onClick={scrollToViewList}>
+			<Button
+				className="d-md-none mt-3 custom-button align-self-center"
+				onClick={scrollToViewList}
+			>
 				{"View List"}
 			</Button>
 		</Container>