Fix plus button

src/pages/PassengersPage/PassengersPage.tsx

@@ -1,20 +1,22 @@
 import styles from "./PassengersPage.module.css";
 import PatientCard from "./components/PatientCard/PatientCard";
 import PassengerCard from "./components/PassengerCard/PassengerCard";
-import PlusButton from "./components/AddPassengerModal/PlusButton";
+import PlusButton from "./components/PlusButton/PlusButton";
+import AddPassengerModal from "./components/AddPassengerModal/AddPassengerModal";
 import { getAccompanyingPassengers, getPassengers } from "../../api/queries";
 import { useUserContext } from "../../context/User.context";
 import { useNavigationContext } from "../../context/Navigation.context";
 import { Tabs } from "../../layout/SideBar/SideBar.definitions";
 import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "@clerk/clerk-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import type { PassengerData } from "../../interfaces/passenger.interface";
 
 const PassengersPage = () => {
   const { getToken } = useAuth();
   const { currentUser } = useUserContext();
   const { setCurrentTab } = useNavigationContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   // ping the getUserByID endpoint to get the user's data
   const { data: passengerData, isLoading: passengerLoading } =
@@ -56,6 +58,9 @@ const PassengersPage = () => {
 
   return (
     <>
+      {isModalOpen && (
+        <AddPassengerModal onClose={() => setIsModalOpen(false)} />
+      )}
       <div className={styles.container}>
         <div className={styles.patientSection}>
           <h2 className={styles.header}>Patients and Companions</h2>
@@ -69,7 +74,7 @@ const PassengersPage = () => {
             <h3 className={styles.subheader}>
               Companion Information
               <div className={styles.plusButton}>
-                <PlusButton />
+                <PlusButton setOpen={setIsModalOpen} />
               </div>{" "}
             </h3>
           </div>

src/pages/PassengersPage/components/AddPassengerModal/AddPassengerModal.tsx

@@ -106,7 +106,7 @@ const AddPassengerModal: React.FC<AddPassengerModalProps> = ({ onClose }) => {
 
   return (
     <Modal
-      action={onClose}
+      action={() => onClose()}
       header="Add Passenger"
       body={
         <form onSubmit={handleSubmit(onSubmit)} className={styles.inputList}>

src/pages/PassengersPage/components/PlusButton/PlusButton.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #d2d2d2;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.container:hover {
+  background-color: #a9a9a9;
+  cursor: pointer;
+}
+
+.icon {
+  font-size: 1rem;
+  color: #ffffff;
+}

src/pages/PassengersPage/components/PlusButton/PlusButton.tsx

@@ -0,0 +1,14 @@
+import styles from "./PlusButton.module.css";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+
+const PlusButton = ({ setOpen }: { setOpen: (_open: boolean) => void }) => {
+  return (
+    <div className={styles.container} onClick={() => setOpen(true)}>
+      <FontAwesomeIcon icon={faPlus} className={styles.icon} />
+    </div>
+  );
+};
+
+export default PlusButton;