Merge pull request #62 from the-collab-lab/an-issue-27

27. App info modal

src/api/useAuth.jsx

@@ -45,7 +45,7 @@ export const SignInButton = () => {
 	return (
 		<button
 			type="button"
-			className="flex items-center h-[67px] py-2 rounded-md border-1 border-navBorder hover:bg-gray-100 justify-center sm:px-[120px] md:px-48"
+			className="flex items-center h-[67px] py-2 rounded-md border-1 border-navBorder hover:bg-gray-100 justify-center w-full"
 			aria-label="Sign up or Log in with google verification"
 			onClick={handleSignIn}
 		>
@@ -79,7 +79,7 @@ export const SignOutButton = () => {
 	return (
 		<button
 			type="button"
-			className="block px-4 py-2 rounded-md hover:bg-gray-100"
+			className="flex items-center xsm:text-[12px] sm:text-[13px] md:text-[14px] px-2 py-1 border-1 rounded-lg hover:bg-hover"
 			onClick={handleSignOut}
 			aria-label="Sign Out"
 		>

src/assets/Logo.jsx

@@ -1,12 +1,12 @@
 const Logo = () => {
 	return (
 		<svg
-			width="146"
+			width="140"
 			height="18"
 			viewBox="0 0 146 18"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
-			className="pr-6 xsm:pr-2 xsm:h-[13px] max-w-fit sm:h-fit sm:mr-6"
+			className=" xsm:h-[13px]"
 			role="img of words collablab"
 			aria-label="Shopping List App Logo"
 		>

src/components/AddItem.jsx

@@ -63,31 +63,30 @@ export default function AddItem({ listPath, data }) {
 	};
 
 	return (
-		<form
-			onSubmit={handleSubmit}
-			className="flex items-end flex-wrap gap-4 w-full"
-		>
-			<TextInput
-				label="Add item"
-				name="itemName"
-				placeholder="Add item to list"
-				onChange={handleInputChange}
-				value={itemValue.itemName}
-			/>
-			<SelectInput
-				label="Timeframe"
-				id="timeframe"
-				name="daysUntilNextPurchase"
-				value={itemValue.daysUntilNextPurchase}
-				onChange={handleInputChange}
-			/>
-			<Button
-				type="submit"
-				text="Add item"
-				bgColor="bg-tcl-blue"
-				textColor="text-white"
-				icon={<GoPlus size={19} />}
-			/>
+		<form onSubmit={handleSubmit}>
+			<div className="flex xsm:justify-center sm:justify-normal items-end flex-wrap xsm:gap-2 sm:gap-4 w-full xsm: mb-6">
+				<TextInput
+					label="Add item"
+					name="itemName"
+					placeholder="Add item to list"
+					onChange={handleInputChange}
+					value={itemValue.itemName}
+				/>
+				<SelectInput
+					label="Timeframe"
+					id="timeframe"
+					name="daysUntilNextPurchase"
+					value={itemValue.daysUntilNextPurchase}
+					onChange={handleInputChange}
+				/>
+				<Button
+					type="submit"
+					text="Add item"
+					bgColor="bg-tcl-blue"
+					textColor="text-white"
+					icon={<GoPlus size={19} />}
+				/>
+			</div>
 		</form>
 	);
 }

src/components/AddList.jsx

@@ -42,7 +42,7 @@ export default function AddList({ setListPath }) {
 		<>
 			<form
 				onSubmit={handleSubmit}
-				className="flex items-end flex-wrap space-x-2"
+				className="flex justify-center items-end flex-wrap space-x-2 gap-2"
 			>
 				<TextInput
 					label="Create a new shopping list:"

src/components/AppInfo.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { FaGithub } from 'react-icons/fa';
+
+const AppInfo = () => {
+	return (
+		<div className="flex flex-col items-center justify-center max-h-[60vh]">
+			<div className="overflow-scroll scroll">
+				<h2 className="text-xl font-bold mt-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
+					Let's get started!
+				</h2>
+				<div className="max-w-lg xsm:px-2 sm:px-4">
+					<p className="mb-4">
+						Hey there! Welcome to List Genius, your go-to shopping companion.
+						Our goal is to help simplify the way you shop by keeping track of
+						your lists and reminding you when it's time to buy. Whether you're
+						shopping for groceries, gifts, or anything in between, we've got you
+						covered!
+					</p>
+					<div className="mb-4">
+						<p className="font-semibold mb-2">How does it work?</p>
+						<ol className="list-decimal pl-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
+							<li className="mb-4">
+								First things first, start by creating a new list. Click on the
+								"New list" button and let the fun begin!
+							</li>
+							<li className="mb-2">
+								Add items to your list and let us know how soon you need them.
+								Whether it's{' '}
+								<span className="inline-block rounded-md px-2 my-1 py-[2px] text-orange-800 bg-orange-100">
+									soon
+								</span>
+								{' (this week), '}
+								<span className="inline-block rounded-md px-2 my-1 py-[2px] text-yellow-800 bg-yellow-100">
+									kind of soon
+								</span>
+								{' (this month), or '}
+								<span className="inline-block rounded-md px-2 my-1 py-[2px] text-green-800 bg-green-100">
+									not so soon
+								</span>
+								{' (more than 30 days)'}, we've got you covered!
+							</li>
+							<li className="mb-2">
+								If you haven't bought something in a while, we'll give it a
+								little rest and mark it as{' '}
+								<span className="inline-block rounded-md px-2 py-1 text-gray-800 bg-gray-100">
+									inactive
+								</span>{' '}
+								(after 60 days). Don't worry, you can always wake it up by
+								purchasing it again!
+							</li>
+							<li className="mb-2">
+								If an item's expected purchase date has passed, we'll kindly
+								remind you that it's{' '}
+								<span className="inline-block rounded-md px-2 py-1 text-red-800 bg-red-100">
+									overdue
+								</span>
+								. Time to get shopping!
+							</li>
+							<li className="mb-2">
+								And hey, why keep all the fun to yourself? Share your lists with
+								friends and family and turn your shopping trips into
+								collaborative adventures!
+							</li>
+						</ol>
+						<div className="my-8">
+							<h2 className="font-semibold mb-6">
+								This app was created as a collaborative project through The
+								Collab Lab, and developed by:
+							</h2>
+							<div className="flex flex-wrap justify-evenly mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
+								<p className="mb-2 w-[150px] text-center gap-2">
+									<a
+										className="flex justify-center"
+										href="https://github.com/stefiecaff"
+									>
+										<FaGithub size={32} />
+									</a>
+									Stefanie Caffarel
+								</p>
+								<p className="mb-2 w-[150px] text-center gap-2">
+									<a
+										className="flex justify-center"
+										href="https://github.com/3campos"
+									>
+										<FaGithub size={32} />
+									</a>
+									Emilio Campos
+								</p>
+								<p className="mb-2 w-[150px] text-center gap-2">
+									<a
+										className="flex justify-center"
+										href="https://github.com/eonflower"
+									>
+										<FaGithub size={32} />
+									</a>
+									Aloe Nelson
+								</p>
+								<p className="mb-2 w-[150px] text-center gap-2">
+									<a
+										className="flex justify-center"
+										href="https://github.com/hun-ah"
+									>
+										<FaGithub size={32} />
+									</a>
+									Hannah Wohl-Machado
+								</p>
+							</div>
+							<div className="mb-4 text-center">
+								<p className="mb-2">
+									Special thanks to The Collab Lab and our team of mentors,
+									Danielle Heberling, Jeremiah Fallin, and Nick Zanetti.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default AppInfo;

src/components/Button.jsx

@@ -10,7 +10,7 @@ const Button = ({
 	return (
 		<button
 			type={type}
-			className={`cursor-pointer flex items-center gap-2 ${bgColor} ${textColor} ${borderColor} text-sm rounded-lg py-2 px-3 h-[42px] `}
+			className={`cursor-pointer flex items-center gap-2 ${bgColor} ${textColor} ${borderColor} text-sm rounded-lg py-2 px-3 h-[42px] xsm:text-xs sm:text-sm `}
 			onClick={onClick}
 		>
 			{icon}

src/components/InviteForm.jsx

@@ -36,7 +36,6 @@ const InviteForm = ({ lists, closeModal, setUsersSharedWith, sharedWith }) => {
 				const updatedSharedWith = [...sharedWith, input];
 				setUsersSharedWith(updatedSharedWith);
 				closeModal();
-				window.location.reload();
 				return;
 			}
 		} catch (err) {

src/components/ListItem.jsx

@@ -111,7 +111,7 @@ export function ListItem({
 			<div
 				htmlFor={`checkbox-${id}`}
 				onClick={handleChecked}
-				className={`cursor-pointer bg-white shadow hover:shadow-md h-[72px] flex items-center justify-between rounded-lg p-6 transition-shadow duration-300 ease-in-out`}
+				className={`cursor-pointer bg-white shadow hover:shadow-md xsm:h-[56px] sm:h-[72px] flex items-center justify-between rounded-lg xsm:px-4 sm:p-6 transition-shadow duration-300 ease-in-out`}
 				onKeyPress={handleKeyPress}
 				role="button"
 				tabIndex="0"

src/components/Modal.jsx

@@ -1,13 +1,30 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { IoClose } from 'react-icons/io5';
 
 const Modal = ({ isOpen, onClose, children }) => {
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === 'Escape') {
+				onClose();
+			}
+		};
+
+		// Add event listener when modal is open
+		if (isOpen) {
+			document.addEventListener('keydown', handleKeyDown);
+		}
+
+		// Remove event listener when modal is closed or component unmounts
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [isOpen, onClose]);
 	return (
 		<>
 			{isOpen ? (
-				<div className="fixed inset-0 z-50  xsm:px-4 sm:px-12 overflow-auto flex justify-center items-center backdrop-blur-lg backdrop-filter">
+				<div className="fixed inset-0 z-50  xsm:px-4 sm:px-12 overflow-y-scroll flex justify-center items-center backdrop-blur-lg backdrop-filter">
 					<div className="modal-overlay fixed inset-0 bg-black opacity-50"></div>
-					<div className="modal-content relative p-[20px] bg-white rounded-lg shadow-lg">
+					<div className="modal-content  relative xsm:p-[20px] xsm:pr-[30px] sm:p-[28px] bg-white rounded-lg shadow-lg">
 						<button
 							className="close-btn absolute top-4 right-6"
 							onClick={onClose}