Dialogs

src/components/Confirm.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import Loading from './Loading';
+
+const Confirm = ({ open, onClose, onConfirm, children, title, loading }) => {
+	const confirmRef = useRef(null);
+	const cancelRef = useRef(null);
+
+	// Opens/closes modal depending on open state
+	useEffect(() => {
+		const { current: el } = confirmRef;
+		if (open) {
+			el.showModal();
+			cancelRef.current.focus();
+		} else el.close();
+	}, [open]);
+
+	return (
+		<dialog
+			className="rounded-md shadow-lg bg-puurWhite text-darkPurple"
+			ref={confirmRef}
+			onClose={onClose}
+		>
+			<div className="flex flex-col p-8 gap-8">
+				<h1 className="text-2xl sm:text-3xl">{title}</h1>
+
+				{loading ? (
+					<Loading />
+				) : (
+					<>
+						{children}
+						<div className="flex justify-center content-center flex-wrap gap-4 sm:gap8">
+							<button
+								onClick={onConfirm}
+								aria-label="Confirm"
+								className="flex items-center justify-center cursor-pointer bg-lightPurple hover:bg-hoverPurple transition ease-in-out rounded-md text-base sm:text-lg text-puurWhite px-4 py-2 gap-6 shadow-lg min-w-36 sm:min-w-40"
+							>
+								<i className="fa-solid fa-check"></i>
+								Confirm
+							</button>
+							<button
+								onClick={onClose}
+								aria-label="Cancel"
+								ref={cancelRef}
+								className="flex items-center justify-center cursor-pointer border-2 border-darkPurple hover:border-hoverPurple hover:bg-hoverPurple transition ease-in-out rounded-md text-base sm:text-lg text-darkPurple hover:text-puurWhite px-4 py-2 gap-6 shadow-lg min-w-36 sm:min-w-40"
+							>
+								<i className="fa-solid fa-x"></i>
+								Cancel
+							</button>
+						</div>
+					</>
+				)}
+			</div>
+		</dialog>
+	);
+};
+
+export default Confirm;

src/components/DeleteItem.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { deleteItem } from '../api/firebase';
+import Confirm from './Confirm';
+
+const DeleteItem = ({ itemName, listPath, itemId }) => {
+	const [open, setOpen] = useState(false);
+	const [submitted, setSubmitted] = useState(false);
+
+	const handleDelete = (listPath, itemId) => {
+		setSubmitted(true);
+		deleteItem(listPath, itemId);
+		return;
+	};
+
+	const openConfirm = () => {
+		setOpen(true);
+	};
+	const closeConfirm = () => {
+		setOpen(false);
+	};
+
+	return (
+		<>
+			<button
+				onClick={openConfirm}
+				aria-label={`Delete ${itemName}`}
+				title={`Delete ${itemName}`}
+				className="px-2 text-darkPurple rounded-md transition ease-in-out hover:text-alertRed focus:text-alertRed"
+			>
+				<i className="fa-solid fa-trash"></i>
+			</button>
+			<Confirm
+				title={`Delete ${itemName.toUpperCase()}`}
+				onClose={closeConfirm}
+				onConfirm={() => handleDelete(listPath, itemId)}
+				open={open}
+				loading={submitted}
+			>
+				{`Do you really want to delete ${itemName.toUpperCase()} from this list?`}
+			</Confirm>
+		</>
+	);
+};
+
+export default DeleteItem;

src/components/DeleteList.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { deleteList } from '../api/firebase';
+import Confirm from './Confirm';
+
+const DeleteList = ({ user, email, listPath, listName, setListPath }) => {
+	const [open, setOpen] = useState(false);
+	const [submitted, setSubmitted] = useState(false);
+
+	const handleDelete = (user, email, listPath, listName) => {
+		setSubmitted(true);
+		deleteList(user, email, listPath, listName);
+		setListPath('');
+		return;
+	};
+
+	const openConfirm = () => {
+		setOpen(true);
+	};
+	const closeConfirm = () => {
+		setOpen(false);
+	};
+
+	return (
+		<>
+			<button
+				onClick={openConfirm}
+				aria-label={`Delete ${listName.toUpperCase()}`}
+				title={`Delete ${listName.toUpperCase()}`}
+				className="rounded-md transition ease-in-out hover:text-alertRed focus:text-alertRed px-4 py-2"
+			>
+				<i className="fa-solid fa-trash"></i>
+			</button>
+			<Confirm
+				title={`Delete ${listName.toUpperCase()} List`}
+				onClose={closeConfirm}
+				onConfirm={() => handleDelete(user, email, listPath, listName)}
+				open={open}
+				loading={submitted}
+			>
+				{listPath.includes(user)
+					? `Do you really want to delete ${listName.toUpperCase()} list?`
+					: `Do you really want to stop using ${listName.toUpperCase()} list?`}
+			</Confirm>
+		</>
+	);
+};
+
+export default DeleteList;

src/components/ListButtons.jsx

@@ -3,40 +3,29 @@ const ListButtons = (props) => {
 	const navigate = useNavigate();
 
 	const buttonVariants = {
-		purple: 'flex items-center justify-center rounded-md bg-lightPurple',
+		purple:
+			'text-base sm:text-lg text-offWhite flex items-center justify-center rounded-md bg-lightPurple transition ease-in-out hover:bg-hoverPurple',
 		white:
-			'flex items-center justify-center  rounded-md bg-lightGrey border text-darkPurple',
-	};
-
-	const iconVariants = {
-		purple: 'fa-inverse',
-		white: '',
-	};
-
-	const textVariants = {
-		purple: 'text-base sm:text-lg text-offWhite font-poppins',
-		white: 'text-base sm:text-lg text-darkPurple font-poppins',
+			'text-base sm:text-lg text-darkPurple flex items-center justify-center  rounded-md bg-lightGrey border text-darkPurple transition ease-in-out hover:bg-hoverPurple hover:text-offWhite',
 	};
 
 	return (
-		<div className="grid sm:grid-cols-3 grid-cols-2 gap-x-2 py-6 text-base sm:text-lg">
+		<div className="grid sm:grid-cols-3 grid-cols-2 gap-4 py-6 text-base sm:text-lg font-poppins">
 			<button
 				className={`sm:col-span-2  px-4 py-2 gap-6 shadow-lg ${buttonVariants[props.colorAdd]}`}
 				onClick={() => navigate('/manage-list')}
 			>
-				<i className={`${iconVariants[props.colorAdd]} fa-solid fa-plus `}></i>
+				<i className="fa-solid fa-plus"></i>
 
-				<span className={`${textVariants[props.colorAdd]}`}>Add item</span>
+				<span>Add item</span>
 			</button>
 			<button
 				className={`sm:col-span-1  gap-6 shadow-lg ${buttonVariants[props.colorShare]}`}
 				onClick={() => navigate('/manage-list')}
 			>
-				<i
-					className={`${iconVariants[props.colorShare]} fa-solid fa-share-nodes`}
-				></i>
+				<i className="fa-solid fa-share-nodes"></i>
 
-				<span className={`${textVariants[props.colorShare]}`}>Share list</span>
+				<span>Share list</span>
 			</button>
 		</div>
 	);

src/components/ListItem.jsx

@@ -1,4 +1,4 @@
-import { deleteItem } from '../api/firebase';
+import DeleteItem from './DeleteItem';
 
 export function ListItem({
 	isRecentlyPurchased,
@@ -7,17 +7,6 @@ export function ListItem({
 	name,
 	updatePurchaseDate,
 }) {
-	const handleDelete = (listPath, itemId, itemName) => {
-		if (
-			window.confirm(
-				`Do you really want to delete ${itemName.toUpperCase()} from this list?`,
-			)
-		) {
-			deleteItem(listPath, itemId);
-		}
-		return;
-	};
-
 	return (
 		<div
 			href="/"
@@ -58,13 +47,7 @@ export function ListItem({
 						{name}
 					</span>
 				</div>
-				<button
-					className="px-2 text-darkPurple"
-					onClick={() => handleDelete(listPath, itemId, name)}
-					aria-label={`Delete ${name}`}
-				>
-					<i className="fa-solid fa-trash"></i>
-				</button>
+				<DeleteItem itemName={name} listPath={listPath} itemId={itemId} />
 			</li>
 		</div>
 	);

src/components/SingleList.jsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { deleteList } from '../api/firebase';
+import DeleteList from './DeleteList';
 
 export function SingleList({ userEmail, name, path, setListPath, userId }) {
 	const navigate = useNavigate();
@@ -8,29 +8,6 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) {
 		navigate(`/list/${path}`);
 	}
 
-	function handleDelete(user, email, listPath, listName) {
-		if (listPath.includes(user)) {
-			if (
-				window.confirm(
-					`Do you really want to delete ${listName.toUpperCase()} list?`,
-				)
-			) {
-				deleteList(user, email, listPath, listName);
-				setListPath('');
-			}
-			return;
-		}
-		if (
-			window.confirm(
-				`Do you really want to stop using ${listName.toUpperCase()} list?`,
-			)
-		) {
-			deleteList(user, email, listPath, listName);
-			setListPath('');
-		}
-		return;
-	}
-
 	return (
 		<li className="mb-8 bg-lightPurple w-full text-puurWhite flex justify-end shadow-lg rounded-md transition ease-in-out relative text-lg sm:text-xl hover:bg-hoverPurple">
 			<button
@@ -39,14 +16,13 @@ export function SingleList({ userEmail, name, path, setListPath, userId }) {
 			>
 				{name}
 			</button>
-			<button
-				className="rounded-md transition ease-in-out hover:text-alertRed focus:text-alertRed px-4 py-2"
-				onClick={() => handleDelete(userId, userEmail, path, name)}
-				aria-label={`Delete ${name} List`}
-				title={`Delete ${name} List`}
-			>
-				<i className="fa-solid fa-trash"></i>
-			</button>
+			<DeleteList
+				user={userId}
+				email={userEmail}
+				listPath={path}
+				listName={name}
+				setListPath={setListPath}
+			/>
 		</li>
 	);
 }

src/components/index.js

@@ -5,3 +5,6 @@ export * from './SearchList';
 export * from './Loading';
 export * from './ButtonWithIcon';
 export * from './ErrorMessage';
+export * from './DeleteList';
+export * from './Confirm';
+export * from './DeleteItem';

src/views/Layout.jsx

@@ -12,7 +12,7 @@ export function Layout({ lists, listPath, user, isLoadingUser }) {
 	return (
 		<div className="w-screen flex flex-col text-poppins min-w-96 bg-puurWhite">
 			<NavBar user={user} lists={lists} listPath={listPath} />
-			<main className="h-screen w-full lg:pt-16 xl:w-9/12  xl:mx-auto">
+			<main className="min-h-screen w-full lg:pt-16 xl:w-9/12  xl:mx-auto">
 				{isLoadingUser ? (
 					<Loading />
 				) : !!user ? (

src/views/ManageList.jsx

@@ -179,7 +179,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 						></input>
 						<button
 							type="submit"
-							className="bg-lightGrey text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-darkPurple px-4 py-2 gap-6 shrink-0"
+							className="bg-lightGrey text-darkPurple border border-darkPurple flex justify-center items-center shadow-lg rounded-md transition ease-in-out hover:bg-hoverPurple hover:text-puurWhite px-4 py-2 gap-6 shrink-0"
 						>
 							<span>
 								<i className="fa-solid fa-share-nodes"></i>