style: improved visibility of filterlist text upon scrolling

Author: eternalmaha

src/components/FilterListInput.tsx

@@ -28,8 +28,7 @@ export function FilterListInput({
 		<Form className="w-100 w-lg-auto" onSubmit={handleSubmit}>
 			<InputGroup className="d-flex align-items-center mt-1">
 				<Form.Label htmlFor="filterList" className="me-2 mb-0">
-					{" "}
-					Filter List:
+					<span className="fw-bold">Filter List:</span>
 				</Form.Label>
 				<Form.Control
 					type="text"

src/components/ListItem.scss

@@ -17,7 +17,7 @@
 	color: $primary-beige;
 	font-size: 1.25em;
 	max-width: 50%;
-	width: 100%;
+	width: 80%;
 	border-radius: 4px;
 }
 

src/views/authenticated/List.scss

@@ -16,6 +16,10 @@
 	box-sizing: border-box;
 }
 
+.filter-list {
+	background-color: rgb(241, 230, 204);
+}
+
 .Add-ShareList {
 	flex-basis: 25%;
 }

src/views/authenticated/List.tsx

@@ -90,7 +90,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					<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">
+				<section className="filter-list d-flex sticky-top flex-nowrap align-items-center justify-content-center">
 					{unfilteredListItems.length > 0 && (
 						<FilterListInput
 							searchTerm={searchTerm}