style: listpage layouting

src/components/ListItem.scss

@@ -25,6 +25,14 @@
 	width: fit-content;
 }
 
+.custom-borders {
+	border: 2px solid $secondary-blue !important;
+	border-radius: 4px !important;
+	padding: 20px;
+	margin-top: 20px;
+	position: relative;
+}
+
 @media (max-width: 576px) {
 	.EditItem {
 		flex-direction: column;

src/components/ListItem.tsx

@@ -124,7 +124,7 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 			<span className="UrgencyStatus text-nowrap ms-5 px-5">
 				{getUrgencyStatus(item)}
 			</span>
-			<section className="ListItemBox d-flex p-2 m-1">
+			<section className="ListItemBox custom-borders d-flex p-2 m-1">
 				<section className="d-flex flex-grow-1 PurchaseItem">
 					<Form.Check
 						className="me-3"

src/components/forms/AddItemForm.tsx

@@ -104,11 +104,11 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 	};
 
 	return (
-		<section className="custom-borders d-flex flex-column align-items-center p-2 ">
+		<section className="custom-borders d-flex flex-column align-items-center">
 			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
-				<h3>New Item</h3>
+				<h3 className="text-center">Add Item</h3>
+
 				<Form.Label htmlFor="item-name">
-					<h5>Item Name:</h5>
 					<Form.Control
 						id="item-name"
 						type="text"
@@ -121,7 +121,6 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 					/>
 				</Form.Label>
 				<label htmlFor="item-quantity">
-					<h5>Item Quantity: </h5>
 					<Form.Control
 						id="item-quantity"
 						type="number"
@@ -135,8 +134,8 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						aria-required
 					/>
 				</label>
-				<br />
-				<fieldset className="custom-borders ">
+
+				<fieldset className="custom-borders d-flex flex-column mb-3">
 					<legend className="legend-text">When to buy:</legend>
 
 					<Form.Label htmlFor={PurchaseTime.soon} className="d-flex gap-2 ">
@@ -184,12 +183,12 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 						/>
 						Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
 					</Form.Label>
-					<Button type="submit" aria-label="Add item to shopping list">
-						Submit Item
-					</Button>
 				</fieldset>
 			</Form>
-			{/*<Button onClick={navigateToListPage}>{"View List"}</Button>*/}
+			<Button type="submit" aria-label="Add item to shopping list">
+				Submit Item
+			</Button>
+			<Button onClick={navigateToListPage}>{"View List"}</Button>
 		</section>
 	);
 }

src/components/forms/ShareListForm.scss

@@ -0,0 +1,9 @@
+@import "../../styles/variables";
+
+.custom-borders {
+	border: 2px solid $secondary-blue !important;
+	border-radius: 4px !important;
+	padding: 20px;
+	margin-top: 20px;
+	position: relative;
+}

src/components/forms/ShareListForm.tsx

@@ -1,10 +1,10 @@
+import "./ShareListForm.scss";
 import { ChangeEvent, FormEvent, useState } from "react";
 import { shareList } from "../../api";
 import { getUser } from "../ProtectedRoute";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import { InputGroup } from "react-bootstrap";
-
 import toast from "react-hot-toast";
 
 interface Props {
@@ -43,8 +43,13 @@ const ShareListForm = ({ listPath }: Props) => {
 	};
 
 	return (
-		<Form onSubmit={(e) => handleInvite(e, listPath)}>
-			<Form.Label htmlFor="recipient-email">Recipient Email:</Form.Label>
+		<Form
+			className="custom-borders d-flex flex-column align-items-center mt-3"
+			onSubmit={(e) => handleInvite(e, listPath)}
+		>
+			<Form.Label className="h3 " htmlFor="recipient-email">
+				Invite friends and family to view your list!
+			</Form.Label>
 			<InputGroup>
 				<Form.Control
 					id="recipient-email"
@@ -58,7 +63,7 @@ const ShareListForm = ({ listPath }: Props) => {
 					aria-required
 				/>
 				<Button type="submit" aria-label="submits form to share shopping list">
-					Invite User
+					Share List
 				</Button>
 			</InputGroup>
 		</Form>

src/views/authenticated/List.scss

@@ -16,3 +16,15 @@
 .ListPageContainer {
 	width: 100%;
 }
+
+.Add-ShareList {
+	flex-grow: 1;
+	width: 50%;
+}
+
+.ListItemSection,
+.Add-ShareList {
+	flex-grow: 1; /* Both sections will take up equal width */
+	width: 50%;
+	align-items: flex-end;
+}

src/views/authenticated/List.tsx

@@ -30,9 +30,13 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	const Header = () => {
 		return (
 			<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.
+				Your list items are organized based on when you need to buy them. Items
+				that need to be purchased soonest are at the top. If two or more items
+				are due at the same time, they will be sorted alphabetically. If an
+				items purchase date has passed, it will be marked as overdue and placed
+				at the top of the list. Additionally, items that have not been used
+				recently will be labeled as inactive and moved to the bottom of your
+				list.
 			</p>
 		);
 	};
@@ -68,8 +72,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 		<Container className="ListPageContainer">
 			<header>
 				<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
+				<Header />
 			</header>
-			<div className="ListContainer d-flex">
+			<div className="d-flex">
 				{/* This is the div for the filter and adding items. */}
 				{/* Width should be 100% */}
 				<div className="ListItemSection">
@@ -81,13 +86,14 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 							/>
 						)}
 
-						<Button
+						{/*<Button
 							className="ms-2"
 							onClick={() => navigate("/manage-list")}
 							aria-label="Navigate to add more items to your list"
 						>
 							{"Add items"}
 						</Button>
+						*/}
 					</section>
 
 					<section className="ListItemContainer">
@@ -98,14 +104,11 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 				</div>
 
 				{/* Width of this section should be 50%. */}
-				<section className="ItemFunctions d-flex flex-column">
-					<div>
-						<Header />
-					</div>
-					<div>
+				<section className="Add-ShareList d-flex flex-column justify-content-start align-items-center ">
+					<div className="ItemFunctions ">
 						<AddItemForm listPath={listPath} data={unfilteredListItems || []} />
 					</div>
-					<div>
+					<div className="ItemFunctions ">
 						<ShareListForm listPath={listPath} />
 					</div>
 				</section>

src/views/authenticated/ManageList.tsx

@@ -11,7 +11,13 @@ export function ManageList({ listPath, data }: Props) {
 	const Header = () => {
 		return (
 			<p>
-				Hello from the <code>/manage-list</code> page!
+				Your list items are organized based on when you need to buy them. Items
+				that need to be purchased soonest are at the top. If two or more items
+				are due at the same time, they will be sorted alphabetically. If an
+				items purchase date has passed, it will be marked as overdue and placed
+				at the top of the list. Additionally, items that have not been used
+				recently will be labeled as inactive and moved to the bottom of your
+				list.
 			</p>
 		);
 	};
@@ -22,7 +28,6 @@ export function ManageList({ listPath, data }: Props) {
 
 	return (
 		<div>
-			<Header />
 			<AddItemForm listPath={listPath} data={data || []} />
 			<ShareListForm listPath={listPath} />
 		</div>