Merge pull request #124 from JumboCode/holden

arrrrrrrrrrrrrgh

Author: hkittelberger

frontend/src/app/components/BorrowPopup.css

@@ -126,12 +126,14 @@
 
   .borrowed-item-box {
     background-color: #E3CECE;
-    padding: 0.75rem 1rem;
+    /* padding: 0.75rem 1rem; */
+    border-radius: 4px;
+    padding: 0.5rem .5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 12vh;
+    height: 13vh;
     box-sizing: border-box;
     margin-bottom: 0.80rem;
     position: relative;
@@ -141,7 +143,8 @@
   .borrow-image {
     border: 2.5px solid #9b525f;
     position: relative;
-    width: 20%;
+    width: 15%;
+    aspect-ratio: 1 / 1;
   }
 
   .borrow-image::after {
@@ -191,7 +194,15 @@
     -webkit-appearance: none; 
     -moz-appearance: none;    
     appearance: none;
+    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
   }
+
+  .delete-button:hover {
+    background-color: #E3CECE;
+    color: #FFF;
+    transform: scale(1.1);
+    cursor: pointer;
+}
 
   .form-row {
     display: flex;

frontend/src/app/components/BorrowPopup.jsx

@@ -49,6 +49,10 @@ const BorrowPopup = ({ selectedItems = [], onClose, onSuccess }) => {
     return `${month}/${day}/${year}`; 
   }
 
+  useEffect(() => {
+    setIsFiltersHidden(false);
+  }, [setIsFiltersHidden]);
+
   useEffect(() => {
     if (user) {
       const name =

frontend/src/app/components/Filter/Filter.jsx

@@ -5,9 +5,11 @@ import Calendar from '../../assets/Calendar.jsx';
 import Reset from '../../assets/Reset.jsx';
 import Dropdown from '../../assets/Dropdown.jsx';
 import CalendarPicker from '../Calendar/CalendarPicker.jsx';
+import { useGlobalContext } from '../contexts/ToggleContext';
 
 const FilterComponent = ({ isVisible, onClose, className }) => {
     const { selectedFilters, setSelectedFilters } = useFilterContext();
+
     const fields = {
         Condition: {
             options: ["Good", "Great", "Needs washing", "Needs repair", "Needs dry cleaning", "Not usable"]
@@ -57,6 +59,7 @@ const FilterComponent = ({ isVisible, onClose, className }) => {
     const checkboxRefs = useRef({});
     const calendarRef = useRef(null);
     const calendarPickerContainerRef = useRef(null);
+    const isFilterHidden = useGlobalContext();
 
     // Keep selectedOptions in sync with selectedFilters
     useEffect(() => {
@@ -181,7 +184,20 @@ const FilterComponent = ({ isVisible, onClose, className }) => {
         });
     };
 
-    // Format date range display text
+    // Ensure the filter popup is closed if not visible on the sidebar
+    // const onCloseRef = useRef(onClose);
+    // useEffect(() => {
+    //     onCloseRef.current = onClose;
+    // }, [onClose]);
+
+    // const prevIsFilterHidden = useRef(isFilterHidden);
+    // useEffect(() => {
+    //     if (!prevIsFilterHidden.current && isFilterHidden) {
+    //         onCloseRef.current && onCloseRef.current();
+    //     }
+    //     prevIsFilterHidden.current = isFilterHidden;
+    // }, [isFilterHidden]);
+
     const getDateRangeText = () => {
         if (dateRange.start && dateRange.end) {
             return `${dateRange.start} - ${dateRange.end}`;

frontend/src/app/components/ReturnButton.css

@@ -40,7 +40,7 @@
     margin: 1vh 1vw;
     flex-direction: column;
     background-color: #E3CECE;
-    border: 1px solid #9B525F;
+    border: 1.5px solid #9B525F;
     padding: 1vh 1vw;
     width: 26vw;
     height: 50vh;
@@ -56,33 +56,40 @@
 .itemID {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    width: 100%;
 }
 
 /* container for item name and id number -- middle element in .itemID */
 .itemInfo {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: left;
+    width: 40%;
+    margin-left: 1vw;
 }
 
 /* note: will need separate css class for handling exit button */
 .exitBtn {
+    align-self: flex-start;
+    text-align: right;
     padding: 0;
-    background: none; 
+    background: none;
     border: none;
     color: #000000;
     box-shadow: none;
-    padding-right: 1px; 
+    margin-right: 1px;
+    width: 20%;
+}
+
+.exitBtn {
+    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
 }
 
 .exitBtn:hover {
-    padding: 0;
-    background: none; 
-    border: none;
-    color: #000000;
-    box-shadow: none;
+    background-color: #E3CECE;
+    color: #FFF;
+    transform: scale(1.1);
     cursor: pointer;
 }
 /* note: image will need white border styling and sizing */
@@ -91,13 +98,20 @@
     height: 15vh;
 }
 
-/* textbox for "notes" about return item */
 .notesTextbox {
-    width: 100%;
-    height: 11vh;
-    flex: 0;
+    border-radius: .2rem;
     border: 1px solid #9B525F;
-    background-color: #F8F5F5;
+    background: #FFF;
+    box-shadow: 0px .1rem .2rem 0px rgba(0, 0, 0, 0.25);
+    height: 11vh;
+    width: stretch;
+    resize: none;
+    overflow: hidden;
+    font-size: 1rem;
+    padding: .35rem;
+    outline: none;
+    line-height: 3.5vh;
+    text-wrap: wrap;
 }
 
 .dropdown-component {
@@ -295,9 +309,10 @@
 
 .return-image {
     border-radius: 4px;
-    border: 1px solid #9b525f;
+    border: 5px solid var(--white);
     position: relative;
-    width: 6vw;
+    /* width: 6vw; */
+    width: 40%;
   }
 
   .return-image::after {

frontend/src/app/components/ReturnItemBoxes.jsx

@@ -60,8 +60,8 @@ export default function ItemBoxes({ unit, onNotesChange, itemId, onClose }) {
                 )}
             </div>
                 <div className="itemInfo">
-                    <p>{unit.name}</p>
-                    <p>ID #{unit.id}</p>
+                    <h2>{unit.name}</h2>
+                    <h2>ID #{unit.id}</h2>
                 </div>
                 <button className="exitBtn" 
                     onClick={onClose}>
@@ -71,10 +71,10 @@ export default function ItemBoxes({ unit, onNotesChange, itemId, onClose }) {
                 </button>
             </div>
             <div className="notesWrapper">
-                <p>Notes</p>
+                <h3>Notes</h3>
                 <form>
-                    <input type="text" className="notesTextbox" name="notes" 
-                        value = {notes} onChange = {handleNotesChange}></input>
+                    <textarea className="notesTextbox" name="notes" 
+                        value = {notes} onChange = {handleNotesChange}></textarea>
                 </form>
             </div>
 

frontend/src/app/components/ReturnPopup.jsx

@@ -3,6 +3,7 @@ import "./ReturnButton.css";
 import { useState, useEffect } from "react";
 import StylishButton from "./StylishButton.jsx";
 import ItemBoxes from "./ReturnItemBoxes.jsx";
+import { useGlobalContext } from './contexts/ToggleContext';
 
 const ReturnPopup = ({ units = [], onSuccess, onClose }) => {
     const [currentPage, setCurrentPage] = useState(1);
@@ -12,6 +13,11 @@ const ReturnPopup = ({ units = [], onSuccess, onClose }) => {
     const [activeUnits, setActiveUnits] = useState(units || []);
     const totalPages = activeUnits && activeUnits.length ? Math.ceil(activeUnits.length / 3) : 1;
     const buttons = Array.from({ length: totalPages }, (_, index) => index + 1); 
+    const {setIsFiltersHidden} = useGlobalContext();
+
+    useEffect(() => {
+        setIsFiltersHidden(false);
+      }, [setIsFiltersHidden]);
 
       useEffect(() => {
         // Update selectedUnits when activeUnits or currentPage changes

frontend/src/app/inventory/15Tablecomp/Popup.jsx

@@ -319,7 +319,7 @@ export default function Popup( { onClose, onOptionSelect, unitList, unitIndex }
                             src={`https://upload-r2-assets.somerville-museum1.workers.dev/${image_keys[selectedImage]}`}
                             fill
                             alt="No image found"
-                            style={{ objectFit: "cover" }}  // Ensures the image covers the container
+                            style={{ objectFit: "contain" }}  // Ensures the image fits the container
                         />
                         </div>
                     )}