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}