add more legible colors and center items, applying styling to managelist

Author: sar-mko

src/views/Home.jsx

@@ -133,12 +133,12 @@ export function Home({ data, setListPath, setAllLists }) {
 					</ul>
 					<form
 						onSubmit={handleSubmit}
-						className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 "
+						className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 justify-center"
 					>
 						<label htmlFor="listName" className="text-white">
 							Create a new list:
 						</label>
-						<div className="flex flex-col">
+						<div className="flex flex-col ">
 							<input
 								type="text"
 								id="listName"

src/views/List.jsx

@@ -85,7 +85,7 @@ export function List({ data, userId, path }) {
 				Add item <AddBoxRoundedIcon fontSize="large" />
 			</button>
 
-			<form onSubmit={clearInput} className="py-4">
+			<form onSubmit={clearInput} className="py-4 flex items-center">
 				<label htmlFor="item-name" aria-label="Search for an item">
 					Find Item{' '}
 				</label>

src/views/ManageList.jsx

@@ -104,16 +104,19 @@ export function ManageList({ list }) {
 
 	return (
 		<>
-			<div className="manage-list-form">
+			<div className="manage-list-form flex flex-col h-[20vh]  my-8 p-8 rounded-3xl shadow-xl overflow-hidden mx-auto bg-neutral ">
 				<form onSubmit={handleSubmit}>
-					<label htmlFor="name">Name of item:</label>
+					<label htmlFor="name" className="text-white">
+						Name of item:
+					</label>
 					<input
 						type="text"
 						placeholder="Type here"
 						name="name"
 						id="name-of-item"
 						value={formData.name}
 						onChange={handleChange}
+						className="placeholder-zinc-700"
 						required
 					></input>
 
@@ -127,7 +130,7 @@ export function ManageList({ list }) {
 
 					<br></br>
 
-					<label htmlFor="frequency">
+					<label htmlFor="frequency" className="text-white">
 						When will you need this item again?:
 					</label>
 
@@ -136,6 +139,7 @@ export function ManageList({ list }) {
 						value={formData.frequency}
 						name="frequency"
 						onChange={handleChange}
+						className="placeholder-zinc-700"
 						required
 					>
 						<option value="" disabled>