Feature/transaction pop up

frontend/src/components/Transaction.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState, useContext } from "react";
 import TransactionContext from "../context/TransactionContext";
+import TransactionDetailsPopup from "../components/TransactionDetailPopup";
 
 const Transaction = ({ transaction }) => {
   const [isAmountNegative, setIsAmountNegative] = useState(false);
   const [convertedAmount, setConvertedAmount] = useState(transaction.amount);
+  const [showDetails, setShowDetails] = useState(false);
   const { currency, convertCurrency, handleSelect } =
-    useContext(TransactionContext);
+  useContext(TransactionContext);
 
   // useEffect to check if each transaction is negative and then convert the currency
   useEffect(() => {
@@ -25,22 +27,40 @@ const Transaction = ({ transaction }) => {
     handleSelect(transaction.id, e.target.checked);
     console.log("clicked: ", transaction.id);
   };
+
   return (
-    <div className="flex flex-row justify-start text-body pl-[8x]">
-      <input type="checkbox" onChange={handleCheckboxChange} />
-      <div
-        className={` w-full flex flex-row justify-between text-body pl-[8px] ${
-          isAmountNegative ? "text-red-500" : "text-green-500"
-        }`}
-      >
-        <p>
-          {isAmountNegative ? convertedAmount : `+${convertedAmount}`}:{" "}
-          {transaction.description}
-        </p>
-        <p className="self-end">{transaction.created_at.substring(0, 10)}</p>
+  <>
+      <div className="flex flex-row justify-start text-body pl-[8x] ">
+        <input className="cursor-pointer" type="checkbox" onChange={handleCheckboxChange} />
+
+          <div 
+            className={` w-full flex flex-row justify-between text-body ml-[8px] pl-2 pr-2 rounded-2xl ${
+              isAmountNegative ? "text-red-500" : "text-green-500"} hover:bg-gray-300 cursor-pointer`}
+            onClick={() => setShowDetails(true)}>
+
+            <p>
+              {isAmountNegative ? convertedAmount : `+${convertedAmount}`}:{" "}
+              {transaction.title}
+            </p>
+
+            <p className="self-end">{transaction.created_at.substring(0, 10)}</p>
+
+          </div>
       </div>
-    </div>
-  );
+
+    {/*displays the currently hovered transaction in a popup*/
+
+    showDetails && (
+        <div className="absolute">
+          <TransactionDetailsPopup
+            transaction={transaction}
+            setShowDetails={setShowDetails}
+          />
+        </div>
+      )
+    }
+  </>
+  )
 };
 
 export default Transaction;

frontend/src/components/TransactionDetailPopup.jsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+export default function TransactionDetailPopup({transaction, setShowDetails}){
+
+  //exits out of the current popup by setting the popup boolean to false in transaction.jsx
+  const handleExit =() => {
+     setShowDetails(false);
+   }
+
+  return(
+      <>
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+          <div className="bg-white p-3 rounded-2xl w-96 relative flex flex-col">
+
+              <h2 className="text-sub-heading font-bold mx-auto pb-3">Transaction Details</h2>
+
+              <div className= "flex flex-row">
+                <h2 className="pl-2 text-body font-bold">Title: </h2>
+                <h2 className="pl-2 text-body ">{transaction.title}</h2>
+              </div>
+
+              <div className= "flex flex-row">
+                <h2 className="pl-2 text-body font-bold">Amount:</h2>
+                <h2 className="pl-2 text-body">${transaction.amount}</h2>
+              </div>
+
+              <h2 className="pl-2 pb-2 text-body font-bold">Description</h2>
+
+
+              <textarea className="pl-4 font-size-12 font-medium resize-none"
+                disabled = {true}
+                rows="5"
+                value={transaction.description}
+              />
+
+              <button className="mr-0 ml-auto pt-5" onClick= {handleExit}>
+                <div id="exitdiv" className="bg-primary-dark hover:bg-primary-darker p-2 rounded-2xl w-20 relative">
+                    <h1 className="text-button-small text-white">exit</h1>
+                </div>
+              </button>
+
+          </div>
+        </div>
+      </>
+  )
+}