From b2133d0564fa17aae4ee09187b0923c446e07bb7 Mon Sep 17 00:00:00 2001
From: Shuveksha Tuladhar <tuladhar.shuveksha@gmail.com>
Date: Tue, 8 Oct 2024 14:45:30 -0700
Subject: [PATCH 1/4] style(#21): Implement TailwindCSS for the ManageList page

---
 src/views/ManageList.jsx | 128 ++++++++++++++++++++++++---------------
 1 file changed, 80 insertions(+), 48 deletions(-)

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
index 2113ae7..26fc8f0 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/ManageList.jsx
@@ -58,57 +58,89 @@ export function ManageList({ listPath, data }) {
 	};
 
 	return (
-		<div>
+		<div className="container mx-auto p-6 bg-bgPrimary rounded-lg shadow-md">
 			<ToastContainer />
-			<h1>Manage Your Shopping List for {extractedListName}</h1>
-			<form onSubmit={handleSubmit}>
-				<label htmlFor="itemName">Item Name:</label>
-				<input
-					type="text"
-					id="itemName"
-					value={itemName}
-					onChange={(e) => setItemName(e.target.value)}
-				/>
-				<IconButton
-					aria-label="Add item to your list"
-					as="button"
-					className="add-icon"
-					label="Add"
-					IconComponent={FaPlusSquare}
-				/>
-				<fieldset>
-					<legend>How soon will you need to buy this item again?</legend>
-					<label>
-						<input
-							type="radio"
-							value={7}
-							checked={daysUntilNextPurchase === 7}
-							onChange={() => setDaysUntilNextPurchase(7)}
-						/>
-						Soon (7 days)
-					</label>{' '}
-					<br />
-					<label>
-						<input
-							type="radio"
-							value={14}
-							checked={daysUntilNextPurchase === 14}
-							onChange={() => setDaysUntilNextPurchase(14)}
-						/>
-						Kind of soon (14 days)
-					</label>{' '}
-					<br />
-					<label>
-						<input
-							type="radio"
-							value={30}
-							checked={daysUntilNextPurchase === 30}
-							onChange={() => setDaysUntilNextPurchase(30)}
-						/>
-						Not soon (30 days)
+			<h1 className="text-4xl text-txtPrimary font-semibold mb-6 text-center">
+				Manage Your Shopping List for{' '}
+				<span className="text-txtSecondary font-bold">{extractedListName}</span>
+			</h1>
+			<form onSubmit={handleSubmit} className="space-y-6">
+				<div className="flex flex-col mb-4 items-center">
+					<label
+						htmlFor="itemName"
+						className="text-3xl text-txtPrimary mb-2 font-semibold"
+					>
+						Please enter an item name
 					</label>
+					<input
+						type="text"
+						id="itemName"
+						value={itemName}
+						onChange={(e) => setItemName(e.target.value)}
+						placeholder="Add an item name"
+						className="border border-gray-300 rounded-lg p-2 w-full focus:ring focus:ring-blue-300 focus:outline-none transition duration-150 ease-in-out hover:shadow-md"
+					/>
+				</div>
+				<fieldset className="border border-gray-200 p-8 m-6 rounded-lg shadow-md">
+					<legend className="text-3xl text-txtPrimary mb-4 font-semibold">
+						How soon will you need to buy this item again?
+					</legend>
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-4 ">
+						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+								<input
+									type="radio"
+									value={7}
+									checked={daysUntilNextPurchase === 7}
+									onChange={() => setDaysUntilNextPurchase(7)}
+									className="mr-3 text-txtPrimary"
+								/>
+								<span className="text-2xl font-medium text-white ">
+									Soon (7 days)
+								</span>
+							</label>
+						</div>
+
+						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+								<input
+									type="radio"
+									value={14}
+									checked={daysUntilNextPurchase === 14}
+									onChange={() => setDaysUntilNextPurchase(14)}
+									className="mr-3 text-gray-600"
+								/>
+								<span className="text-2xl font-medium text-white ">
+									Kind of soon (14 days)
+								</span>
+							</label>
+						</div>
+
+						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+								<input
+									type="radio"
+									value={30}
+									checked={daysUntilNextPurchase === 30}
+									onChange={() => setDaysUntilNextPurchase(30)}
+									className="mr-3"
+								/>
+								<span className="text-2xl font-medium text-white ">
+									Not soon (30 days)
+								</span>
+							</label>
+						</div>
+					</div>
 				</fieldset>
-				<br />
+				<div className="flex justify-center">
+					<IconButton
+						aria-label="Add item to your list"
+						as="button"
+						label="Add an item"
+						IconComponent={FaPlusSquare}
+						className="mt-1 block w-1/8 rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-lg py-3 px-4"
+					/>
+				</div>
 			</form>
 			<br></br>
 		</div>

From 60df053c418c3b90d59001f96060b61300041907 Mon Sep 17 00:00:00 2001
From: Shuveksha Tuladhar <tuladhar.shuveksha@gmail.com>
Date: Wed, 9 Oct 2024 11:23:16 -0700
Subject: [PATCH 2/4] refactor(#21): Change component ManageList to AddItem,
 update route to /add-item, and implement gradient colors and fixed width for
 radio buttons

---
 src/App.jsx                               |  6 +++---
 src/views/{ManageList.jsx => AddItem.jsx} | 26 +++++++++++------------
 src/views/Layout.jsx                      |  2 +-
 src/views/index.js                        |  2 +-
 tailwind.config.js                        |  4 ++++
 5 files changed, 22 insertions(+), 18 deletions(-)
 rename src/views/{ManageList.jsx => AddItem.jsx} (81%)

diff --git a/src/App.jsx b/src/App.jsx
index 62f2095..cdd5299 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Suspense } from 'react';
-import { Home, Layout, ManageList, Team } from './views';
+import { Home, Layout, AddItem, Team } from './views';
 import { Loading } from './components/Loading';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
@@ -59,10 +59,10 @@ export function App() {
 						}
 					/>
 					<Route
-						path="manage-list"
+						path="add-item"
 						element={
 							<ProtectedRoute>
-								<ManageList listPath={listPath} user={user} data={data} />
+								<AddItem listPath={listPath} user={user} data={data} />
 							</ProtectedRoute>
 						}
 					/>
diff --git a/src/views/ManageList.jsx b/src/views/AddItem.jsx
similarity index 81%
rename from src/views/ManageList.jsx
rename to src/views/AddItem.jsx
index 26fc8f0..2a0b23f 100644
--- a/src/views/ManageList.jsx
+++ b/src/views/AddItem.jsx
@@ -5,7 +5,7 @@ import { FaPlusSquare } from 'react-icons/fa';
 import { IconButton } from '../components/IconButton';
 import { notify } from '../utils/notifications';
 
-export function ManageList({ listPath, data }) {
+export function AddItem({ listPath, data }) {
 	const [itemName, setItemName] = useState('');
 	const [daysUntilNextPurchase, setDaysUntilNextPurchase] = useState(7);
 
@@ -58,9 +58,9 @@ export function ManageList({ listPath, data }) {
 	};
 
 	return (
-		<div className="container mx-auto p-6 bg-bgPrimary rounded-lg shadow-md">
+		<div className="container p-6 rounded-lg shadow-md">
 			<ToastContainer />
-			<h1 className="text-4xl text-txtPrimary font-semibold mb-6 text-center">
+			<h1 className="text-4xl text-txtPrimary font-semibold my-6 text-center">
 				Manage Your Shopping List for{' '}
 				<span className="text-txtSecondary font-bold">{extractedListName}</span>
 			</h1>
@@ -68,7 +68,7 @@ export function ManageList({ listPath, data }) {
 				<div className="flex flex-col mb-4 items-center">
 					<label
 						htmlFor="itemName"
-						className="text-3xl text-txtPrimary mb-2 font-semibold"
+						className="text-3xl text-txtPrimary font-semibold"
 					>
 						Please enter an item name
 					</label>
@@ -85,15 +85,15 @@ export function ManageList({ listPath, data }) {
 					<legend className="text-3xl text-txtPrimary mb-4 font-semibold">
 						How soon will you need to buy this item again?
 					</legend>
-					<div className="grid grid-cols-1 md:grid-cols-3 gap-4 ">
-						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
-							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-10 justify-items-center items-center">
+						<div className="border border-gray-300 p-2 bg-radio-gradient w-[20rem] rounded-lg transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer w-full mb-4 mt-4">
 								<input
 									type="radio"
 									value={7}
 									checked={daysUntilNextPurchase === 7}
 									onChange={() => setDaysUntilNextPurchase(7)}
-									className="mr-3 text-txtPrimary"
+									className="mr-4 text-txtPrimary"
 								/>
 								<span className="text-2xl font-medium text-white ">
 									Soon (7 days)
@@ -101,14 +101,14 @@ export function ManageList({ listPath, data }) {
 							</label>
 						</div>
 
-						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
-							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+						<div className="border border-gray-300 p-2 bg-radio-gradient w-[20rem] rounded-lg transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer max-w-sm mb-4 mt-4">
 								<input
 									type="radio"
 									value={14}
 									checked={daysUntilNextPurchase === 14}
 									onChange={() => setDaysUntilNextPurchase(14)}
-									className="mr-3 text-gray-600"
+									className="mr-6"
 								/>
 								<span className="text-2xl font-medium text-white ">
 									Kind of soon (14 days)
@@ -116,8 +116,8 @@ export function ManageList({ listPath, data }) {
 							</label>
 						</div>
 
-						<div className="border border-gray-300 p-4 bg-btnPrimary rounded-full transition-transform duration-300 hover:scale-105 hover:shadow-lg">
-							<label className="flex items-center justify-center cursor-pointer w-full mb-6">
+						<div className="border border-gray-300 p-2 bg-radio-gradient w-[20rem]  rounded-lg transition-transform duration-300 hover:scale-105 hover:shadow-lg">
+							<label className="flex items-center justify-center cursor-pointer max-w-md mb-4 mt-4">
 								<input
 									type="radio"
 									value={30}
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index 22cb1e2..5073358 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -54,7 +54,7 @@ export function Layout() {
 									className="Nav-link"
 									IconComponent={FaCartPlus}
 									label="Add Item"
-									to="/manage-list"
+									to="/add-item"
 								/>
 								<IconButton
 									aria-label="Sign Out"
diff --git a/src/views/index.js b/src/views/index.js
index b2ff773..a928cb8 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -1,4 +1,4 @@
-export * from './ManageList';
+export * from './AddItem';
 export * from './Home';
 export * from './Layout';
 export * from './LandingPage';
diff --git a/tailwind.config.js b/tailwind.config.js
index 384b66a..7932183 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,10 @@ export default {
 				txtPrimary: '#184E77', // Primary color Text
 				txtSecondary: '#34A0A4', // Secondary color Text
 			},
+			backgroundImage: {
+				'radio-gradient':
+					'linear-gradient(to top, #34A0A4, #168AAD, #1A759F, #1E6091, #184E77)',
+			},
 		},
 	},
 	plugins: [],

From 060e6c01afdc0dec763676e98a682b1a44c1e1d4 Mon Sep 17 00:00:00 2001
From: Shuveksha Tuladhar <tuladhar.shuveksha@gmail.com>
Date: Wed, 9 Oct 2024 15:26:09 -0700
Subject: [PATCH 3/4] fix(#21): close create list modal after entry

---
 src/views/CreateList.jsx | 7 ++++---
 src/views/Disclosure.jsx | 2 +-
 src/views/Home.jsx       | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/views/CreateList.jsx b/src/views/CreateList.jsx
index 8a8cb5f..9e05628 100644
--- a/src/views/CreateList.jsx
+++ b/src/views/CreateList.jsx
@@ -9,11 +9,11 @@ export function CreateList({
 	isCreateListModalOpen,
 	setIsCreateListModalOpen,
 	user,
+	setListPath,
 }) {
 	const userId = user?.uid;
 	const userEmail = user?.email;
 
-	const [listPath, setListPath] = useState('');
 	const [listName, setListName] = useState('');
 
 	const handleChange = (event) => {
@@ -27,6 +27,7 @@ export function CreateList({
 				const newListPath = await createList(userId, userEmail, listName);
 				notify('List is sucessfully created', 'success');
 				setListPath(newListPath);
+				setIsCreateListModalOpen(false);
 			} catch {
 				notify('There was an error adding your list', 'error');
 			}
@@ -58,7 +59,7 @@ export function CreateList({
 					<IconButton
 						aria-label="Add a list"
 						as="button"
-						className="inline-flex justify-center rounded-md bg-[#184E77] px-4 py-[.75rem] text-lg font-medium text-white shadow-sm hover:bg-[#1E6091] transition duration-200 ease-in-out mr-10"
+						className="inline-flex justify-center rounded-md bg-btnPrimary px-4 py-[.75rem] text-lg font-medium text-white shadow-sm hover:bg-btnPrimary transition duration-200 ease-in-out mr-10"
 						label="Add"
 						IconComponent={FaPlusSquare}
 						type="submit"
@@ -67,7 +68,7 @@ export function CreateList({
 						aria-label="Cancel adding"
 						as="button"
 						onClick={() => setIsCreateListModalOpen(false)}
-						className="inline-flex justify-center rounded-md bg-[#184E77] px-4 py-[.75rem] text-lg font-medium text-white shadow-sm ring-1 ring-gray-300 hover:bg-[#1E6091] transition duration-200 ease-in-out" // Increased button padding and font size
+						className="inline-flex justify-center rounded-md bg-btnPrimary px-4 py-[.75rem] text-lg font-medium text-white shadow-sm ring-1 ring-gray-300 hover:bg-btnPrimary transition duration-200 ease-in-out" // Increased button padding and font size
 						label="Cancel"
 						IconComponent={FaTimes}
 					/>
diff --git a/src/views/Disclosure.jsx b/src/views/Disclosure.jsx
index be85fa7..8da603a 100644
--- a/src/views/Disclosure.jsx
+++ b/src/views/Disclosure.jsx
@@ -17,7 +17,7 @@ export function Disclosure({
 	listpath,
 	setListPath,
 }) {
-	const [isOpen, setIsOpen] = useState(false);
+	const [isOpen, setIsOpen] = useState(listpath === currentListPath);
 
 	useEffect(() => {
 		if (currentListPath !== listpath) {
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index 77990e9..75416c1 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -34,6 +34,7 @@ export function Home({ data, lists, listPath, setListPath, user }) {
 					isCreateListModalOpen={isCreateListModalOpen}
 					setIsCreateListModalOpen={setIsCreateListModalOpen}
 					user={user}
+					setListPath={setListPath}
 				/>
 			)}
 			<div className="flex justify-center items-center">

From 1bbe3dbb61c71d5189c8b81fd5c76d17fa709306 Mon Sep 17 00:00:00 2001
From: Shuveksha Tuladhar <tuladhar.shuveksha@gmail.com>
Date: Wed, 9 Oct 2024 16:37:17 -0700
Subject: [PATCH 4/4] Insert ListName dynamically to toast notifications

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

diff --git a/src/views/CreateList.jsx b/src/views/CreateList.jsx
index 9e05628..359008e 100644
--- a/src/views/CreateList.jsx
+++ b/src/views/CreateList.jsx
@@ -25,9 +25,9 @@ export function CreateList({
 		if (listName) {
 			try {
 				const newListPath = await createList(userId, userEmail, listName);
-				notify('List is sucessfully created', 'success');
 				setListPath(newListPath);
 				setIsCreateListModalOpen(false);
+				notify(`${listName} is sucessfully created`, 'success');
 			} catch {
 				notify('There was an error adding your list', 'error');
 			}