Add styling for all forms

src/components/AddItem.jsx

@@ -69,7 +69,10 @@ export function AddItem({ data, listPath }) {
 
 	return (
 		<>
-			<form onSubmit={handleNewItemSubmit} className="add-item-form">
+			<form
+				onSubmit={handleNewItemSubmit}
+				className="add-item-form flex p-1 rounded mb-2"
+			>
 				{/* Item Name Section */}
 				<div className="flex items-center mb-4">
 					<label htmlFor="name" className="mr-2">
@@ -83,7 +86,7 @@ export function AddItem({ data, listPath }) {
 						onChange={handleNewItemChange}
 						name="name"
 						required
-						className="border p-2"
+						className="border p-2 w-auto border-blue-100  text-black rounded-md focus:outline-none focus:ring-opacity-50"
 					/>
 				</div>
 
@@ -98,9 +101,11 @@ export function AddItem({ data, listPath }) {
 						onChange={handleNewItemChange}
 						value={formNewItem.nextPurchase}
 						required
-						className="border p-2 rounded mb-4"
+						className="border p-2 rounded mb-4 border-blue-100 "
 					>
-						<option value="">Select Urgency</option>
+						<option className="border-blue-200" value="">
+							Select Urgency
+						</option>
 						<option value={7}>Soon</option>
 						<option value={14}>Kind of soon</option>
 						<option value={30}>Not soon</option>

src/components/AddList.jsx

@@ -25,7 +25,10 @@ export function AddList({ setListPath, userId, userEmail }) {
 
 	return (
 		<>
-			<form onSubmit={handleCreateListButton}>
+			<form
+				onSubmit={handleCreateListButton}
+				className="flex p-1 items-center rounded mb-2"
+			>
 				<label htmlFor="listName">List Name:</label>
 				<input
 					type="text"
@@ -34,6 +37,7 @@ export function AddList({ setListPath, userId, userEmail }) {
 					onChange={(e) => setListName(e.target.value)}
 					placeholder="Enter the name of your new list"
 					required
+					className="w-64 p-1 border border-blue-200 focus:outline-none focus:ring-opacity-50"
 				/>
 				<button type="submit" className="button">
 					Create list

src/views/List.jsx

@@ -98,15 +98,22 @@ export function List({ data, listPath, lists }) {
 					<AddItem data={data} listPath={listPath} />
 
 					<form onSubmit={handleSearch}>
-						<div>
-							<label htmlFor="search-item-in-list"> Search items:</label>
+						<div className="flex p-1 items-center space-x-2 mb-5 border-blue-100 border-2 w-fit rounded-md">
+							<label
+								htmlFor="search-item-in-list"
+								className="text-gray-700 font-medium"
+							>
+								{' '}
+								Search items:
+							</label>
 							<input
 								onChange={handleSearch}
 								type="text"
 								id="search-item-in-list"
 								value={searchItem}
 								placeholder="Search an item..."
 								aria-label="Search for items"
+								className="p-1 w-auto text-black rounded-md focus:outline-none focus:ring-opacity-50"
 							/>
 							{searchItem && (
 								<button type="button" onClick={clearSearch}>

src/views/ManageList.jsx

@@ -26,7 +26,10 @@ export function ManageList({ listPath, userId }) {
 	return (
 		<>
 			<h2>Invite a user to share your list with you</h2>
-			<form onSubmit={handleAddUserSubmit}>
+			<form
+				onSubmit={handleAddUserSubmit}
+				className="flex p-1 items-center rounded mb-2"
+			>
 				<label htmlFor="email">User email</label>
 				<input
 					id="email"
@@ -36,6 +39,7 @@ export function ManageList({ listPath, userId }) {
 					onChange={(e) => setFormAddUser(e.target.value)}
 					name="email"
 					required
+					className="w-auto p-2 border border-blue-200 rounded focus:outline-none focus:ring-opacity-50"
 				/>
 
 				<button>Invite</button>