From 8075fd1741833be85cfcf5c74e7dfed9f03add88 Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Sat, 5 Oct 2024 14:46:37 +0100
Subject: [PATCH 1/2] Add styling for all forms

---
 src/components/AddItem.jsx | 13 +++++++++----
 src/components/AddList.jsx |  6 +++++-
 src/views/List.jsx         | 11 +++++++++--
 src/views/ManageList.jsx   |  6 +++++-
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
index b8d130e..bde0db0 100644
--- a/src/components/AddItem.jsx
+++ b/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 items-center 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>
diff --git a/src/components/AddList.jsx b/src/components/AddList.jsx
index a3045d9..928d7de 100644
--- a/src/components/AddList.jsx
+++ b/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
diff --git a/src/views/List.jsx b/src/views/List.jsx
index 9396e1e..9cd2d0a 100644
--- a/src/views/List.jsx
+++ b/src/views/List.jsx
@@ -98,8 +98,14 @@ 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"
@@ -107,6 +113,7 @@ export function List({ data, listPath, lists }) {
 								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}>
diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 42f91e7..cc8e3a5 100644
--- a/src/views/ManageList.jsx
+++ b/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>

From 96293ee41ac1b8aebd46ecf8297486ab8dca7e7e Mon Sep 17 00:00:00 2001
From: tataw-cl <127490325+tataw-cl@users.noreply.github.com>
Date: Sat, 5 Oct 2024 15:17:13 +0100
Subject: [PATCH 2/2] Align items

---
 src/components/AddItem.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AddItem.jsx b/src/components/AddItem.jsx
index bde0db0..744995e 100644
--- a/src/components/AddItem.jsx
+++ b/src/components/AddItem.jsx
@@ -71,7 +71,7 @@ export function AddItem({ data, listPath }) {
 		<>
 			<form
 				onSubmit={handleNewItemSubmit}
-				className="add-item-form flex p-1 items-center rounded mb-2"
+				className="add-item-form flex p-1 rounded mb-2"
 			>
 				{/* Item Name Section */}
 				<div className="flex items-center mb-4">