style: updated urgency status to reflect urgency with color codes

Author: eternalmaha

src/components/FilterListInput.tsx

@@ -26,7 +26,7 @@ export function FilterListInput({
 
 	return (
 		<Form className="w-100 w-lg-auto" onSubmit={handleSubmit}>
-			<InputGroup className="d-flex align-items-center">
+			<InputGroup className="d-flex align-items-center mt-1">
 				<Form.Label htmlFor="filterList" className="me-2 mb-0">
 					{" "}
 					Filter List:

src/components/ListItem.scss

@@ -21,6 +21,31 @@
 	border-radius: 4px;
 }
 
+.UrgencyStatus {
+	// 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;
 }

src/components/ListItem.tsx

@@ -64,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;
 
@@ -120,9 +122,11 @@ export function ListItemCheckBox({ item, listPath }: Props) {
 	};
 
 	return (
-		<div className="d-flex flex-column justify-content-center mt-4">
-			<span className="UrgencyStatus text-nowrap ms-5 px-5">
-				{getUrgencyStatus(item)}
+		<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="d-flex flex-grow-1 PurchaseItem">

src/components/forms/AddItemForm.tsx

@@ -94,7 +94,7 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 	};
 
 	return (
-		<section className="custom-borders d-flex flex-column align-items-center">
+		<section className="custom-borders d-flex flex-column align-items-center ">
 			<Form onSubmit={(e) => handleSubmit(e, listPath)}>
 				<h3 className="text-center">Add Item</h3>
 

src/views/authenticated/List.scss

@@ -21,7 +21,7 @@
 }
 
 .Share-ListForm {
-	flex-basis: 80%;
+	flex-basis: 50%;
 }
 
 .Add-ItemForm {

src/views/authenticated/List.tsx

@@ -30,14 +30,10 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 
 	const Header = () => {
 		return (
-			<p className="Header text-center">
-				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
+			<p className="Header text-center h4">
+				Your list items are organized based on when you need to buy them. 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.
+				at the top of the list.
 			</p>
 		);
 	};
@@ -52,8 +48,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 			<Container>
 				<h2 className="ListName">{listName}</h2>
 				<section className="d-flex flex-column justify-content-center text-center align-items-center">
-					<Header />
-					<h3>
+					<h3 className="mt-5">
 						You haven’t added any items yet.
 						<br />
 						Let’s get started by adding your first item!
@@ -90,11 +85,11 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	// Main content when list is not empty
 	return (
 		<Container className="ListPageContainer">
-			<header>
-				<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
-				<Header />
-			</header>
 			<div className="ListItemSection">
+				<header>
+					<h2 className="ListName p-1 m-2 mt-2">{listName}</h2>
+				</header>
+
 				<section className="d-flex sticky-top flex-nowrap align-items-center justify-content-center">
 					{unfilteredListItems.length > 0 && (
 						<FilterListInput