From ccba0fad8df1cd7e2823d323d57ad9317eb77dd7 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 22 Nov 2025 20:31:41 -0500 Subject: [PATCH 1/5] Fix expanded grant view styling bugs --- .../main-page/grants/grant-list/GrantItem.tsx | 799 ++++++++++-------- .../src/main-page/grants/styles/GrantItem.css | 2 +- 2 files changed, 467 insertions(+), 334 deletions(-) diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx index 9ac7f475..0cc9c282 100644 --- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx +++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx @@ -16,7 +16,10 @@ interface GrantItemProps { defaultExpanded?: boolean; } -const GrantItem: React.FC = ({ grant, defaultExpanded = false }) => { +const GrantItem: React.FC = ({ + grant, + defaultExpanded = false, +}) => { const [isExpanded, setIsExpanded] = useState(defaultExpanded); const [isEditing, setIsEditing] = useState(false); const [curGrant, setCurGrant] = useState(grant); @@ -62,13 +65,15 @@ const GrantItem: React.FC = ({ grant, defaultExpanded = false }) setStatusDropdownOpen(false); }; - {/* The popup that appears on delete */} - const DeleteModal = ({ - isOpen, - onCloseDelete, - onConfirmDelete, + { + /* The popup that appears on delete */ + } + const DeleteModal = ({ + isOpen, + onCloseDelete, + onConfirmDelete, title = "Are you sure?", - message = "This action cannot be undone." + message = "This action cannot be undone.", }: { isOpen: boolean; onCloseDelete: () => void; @@ -79,15 +84,15 @@ const GrantItem: React.FC = ({ grant, defaultExpanded = false }) if (!isOpen) return null; return ( -
-
e.stopPropagation()} @@ -95,17 +100,17 @@ const GrantItem: React.FC = ({ grant, defaultExpanded = false }) {/* Icon */}
- -
@@ -117,18 +122,16 @@ const GrantItem: React.FC = ({ grant, defaultExpanded = false }) {/* Message */} -

- {message} -

+

{message}

{/* Buttons */}
- - setShowDeleteModal(false)} - onConfirmDelete={() => { - setShowDeleteModal(false); - }} - /> - - -
- - - + {curGrant.description} +
+
+ {/*bottom buttons */} +
+ <> + + + setShowDeleteModal(false)} + onConfirmDelete={() => { + setShowDeleteModal(false); + }} + /> + + +
+ + + +
- -
- {/*End expanded div */} -
+ {/*End expanded div */} +
)}
- {showNewGrantModal && ( - setShowNewGrantModal(false)} - /> - )} -
- - + {showNewGrantModal && ( + setShowNewGrantModal(false)} + /> + )} + ); }; diff --git a/frontend/src/main-page/grants/styles/GrantItem.css b/frontend/src/main-page/grants/styles/GrantItem.css index 481b0687..2179151a 100644 --- a/frontend/src/main-page/grants/styles/GrantItem.css +++ b/frontend/src/main-page/grants/styles/GrantItem.css @@ -55,7 +55,7 @@ } .grant-body.expanded { - max-height: 100vh; + max-height: 100%; padding: 1rem; border: 0.1rem solid #F26624; border-top-width: 0cap; From 74973209324393a4f9cc0595825fe6754907463b Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 22 Nov 2025 20:51:24 -0500 Subject: [PATCH 2/5] Fixing new grant modal spacing bug --- .../grants/new-grant/NewGrantModal.tsx | 712 ++++++++++++------ .../src/main-page/grants/styles/GrantItem.css | 110 ++- .../main-page/grants/styles/NewGrantModal.css | 336 ++++----- 3 files changed, 702 insertions(+), 456 deletions(-) diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx index 3653bb3d..599e283c 100644 --- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx +++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx @@ -1,6 +1,6 @@ // frontend/src/grant-info/components/NewGrantModal.tsx import React, { useState } from "react"; -import CurrencyInput from 'react-currency-input-field'; +import CurrencyInput from "react-currency-input-field"; import { fetchAllGrants } from "../../../external/bcanSatchel/actions"; import "../styles/NewGrantModal.css"; import { MdOutlinePerson2 } from "react-icons/md"; @@ -23,7 +23,6 @@ interface Attachment { type: AttachmentType; } - const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { /* grantId: number; @@ -59,7 +58,8 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const [timelineInYears, _setTimelineInYears] = useState(0); // Used - const [estimatedCompletionTimeInHours, _setEstimatedCompletionTimeInHours] = useState(0); + const [estimatedCompletionTimeInHours, _setEstimatedCompletionTimeInHours] = + useState(0); // Used const [doesBcanQualify, _setDoesBcanQualify] = useState(""); @@ -82,21 +82,18 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const [isAddingAttachment, setIsAddingAttachment] = useState(false); // Used - const [bcanPocName, setBcanPocName] = useState(''); + const [bcanPocName, setBcanPocName] = useState(""); // Used - const [bcanPocEmail, setBcanPocEmail] = useState(''); + const [bcanPocEmail, setBcanPocEmail] = useState(""); // Used - const [grantProviderPocName, setGrantProviderPocName] = useState(''); + const [grantProviderPocName, setGrantProviderPocName] = useState(""); // Used - const [grantProviderPocEmail, setGrantProviderPocEmail] = useState(''); - + const [grantProviderPocEmail, setGrantProviderPocEmail] = useState(""); // For error handling // @ts-ignore const [_errorMessage, setErrorMessage] = useState(""); - - /* Add a new blank report date to the list */ // Used const _addReportDate = () => { @@ -163,7 +160,9 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { setErrorMessage("Set Does Bcan Qualify? to 'yes' or 'no' "); } if (isRestricted == "") { - setErrorMessage("Set Restriction Type to 'restricted' or 'unrestricted' "); + setErrorMessage( + "Set Restriction Type to 'restricted' or 'unrestricted' " + ); } if (status == "") { setErrorMessage("Set Status"); @@ -175,7 +174,6 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const handleSubmit = async () => { if (!validateInputs()) return; - // Convert attachments array const attachmentsArray = attachments.map((att) => ({ attachment_name: att.attachment_name.trim(), @@ -183,25 +181,26 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { type: att.type, })); - - /* Matches middle layer definition */ const newGrant: Grant = { grantId: -1, organization, - does_bcan_qualify: (doesBcanQualify == "yes" ? true : false), + does_bcan_qualify: doesBcanQualify == "yes" ? true : false, amount, grant_start_date: grantStartDate as TDateISO, application_deadline: applicationDate as TDateISO, status: status as Status, // Potential = 0, Active = 1, Inactive = 2 - bcan_poc: { POC_name: bcanPocName, POC_email: bcanPocEmail }, - grantmaker_poc: { POC_name: grantProviderPocName, POC_email: grantProviderPocEmail }, // Just take the first for now + bcan_poc: { POC_name: bcanPocName, POC_email: bcanPocEmail }, + grantmaker_poc: { + POC_name: grantProviderPocName, + POC_email: grantProviderPocEmail, + }, // Just take the first for now report_deadlines: reportDates as TDateISO[], timeline: timelineInYears, estimated_completion_time: estimatedCompletionTimeInHours, description, attachments: attachmentsArray, - isRestricted: (isRestricted == "restricted" ? true : false), // Default to unrestricted for now + isRestricted: isRestricted == "restricted" ? true : false, // Default to unrestricted for now }; console.log(newGrant); try { @@ -234,237 +233,452 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { }; return ( - -
{/*Greyed out background */} -
{/*Popup container */} +
+ {/*Greyed out background */} +
+ {/*Popup container */}

New Grant

-
{/* Major components in two columns */} +
+ {/* Major components in two columns */} {/*left column */} -
- {/*Organization name and input */} -
- - + {/*Organization name and input */} +
+ + _setOrganization(e.target.value)}/> -
+ type="text" + placeholder="Type Here" + onChange={(e) => _setOrganization(e.target.value)} + /> +
{/*Top left quadrant - from app date, start date, report deadlines, est completion time*/}
- {/* Left column: Application + Grant Start row */}
- {/*Application date and grant start date */}
{/*Application date and input */}
-
{/*Grant Start Date and input */}
-
{/*Estimated completition time and input - need to make wider (length of application date and grant start date)*/}
-
-
{/*Right column*/} -
+
{/*Report deadlines label and grey box */} -
- -
- {reportDates.map((date, index) => ( -
- { - const newDates = [...reportDates]; - newDates[index] = e.target.value; - setReportDates(newDates); +
+ +
+ {reportDates.map((date, index) => ( +
+ { + const newDates = [...reportDates]; + newDates[index] = e.target.value; + setReportDates(newDates); + }} + /> + {reportDates.length > 0 && ( + - )} + className="font-family-helvetica w-5 flex-shrink-0 rounded text-white font-bold flex items-center justify-center" + onClick={() => _removeReportDate(index)} + > + ✕ + + )}
- - ))} - -
+ ))} + +
-
- {/*Timeline label and input */} -
- - _setTimelineInYears(Number(e.target.value))}/> -
- - {/*Amount label and input */} -
- - _setAmount(Number(value))}/> -
+ {/*Timeline label and input */} +
+ + _setTimelineInYears(Number(e.target.value))} + /> +
+ {/*Amount label and input */} +
+ + _setAmount(Number(value))} + /> +
- {/*Right column */} -
- +
{/*POC row */}
{/*BCAN POC div*/}
- - {/*Box div*/} -
- -
- setBcanPocName(e.target.value)}/> - setBcanPocEmail(e.target.value)}/> -
+ + {/*Box div*/} +
+ +
+ setBcanPocName(e.target.value)} + /> + setBcanPocEmail(e.target.value)} + />
+
{/*Grant Provider POC div*/}
- - {/*Box div*/} -
- -
- setGrantProviderPocName(e.target.value)}/> - setGrantProviderPocEmail(e.target.value)}/> -
+ + {/*Box div*/} +
+ +
+ setGrantProviderPocName(e.target.value)} + /> + setGrantProviderPocEmail(e.target.value)} + />
+
{/*bottom right row*/}
- {/* Select option menus */} -
- {/*Qualify label and input */} -
- - -
+ {/* Select option menus */} +
+ {/*Qualify label and input */} +
+ + +
- {/*Status label and input */} -
- - -
+ {/*Status label and input */} +
+ + +
- {/*Restriction types label and input */} -
- - -
+ {/*Restriction types label and input */} +
+ +
+
{/*Scope Documents div p-2 h-full w-1/2 flex-col*/}
-
))} - -
)} @@ -569,13 +796,16 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { borderColor: "black", borderWidth: "1px", borderRadius: "1.2rem", - height: isAddingAttachment ? "77px" : "192px" + height: isAddingAttachment ? "77px" : "192px", }} > {attachments .filter((a) => a.url) // show only filled ones .map((attachment, index) => ( -
+
void }> = ({ onClose }) => { {attachment.attachment_name || "Untitled"} - ({attachment.type === AttachmentType.SCOPE_DOCUMENT + ( + {attachment.type === AttachmentType.SCOPE_DOCUMENT ? "Scope" : "Supporting"} ) @@ -606,36 +837,65 @@ const NewGrantModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { ))}
- {/*End bottom right row */} + {/*End bottom right row */}
- {/*End right column */} + {/*End right column */}
- - {/*End grid content*/} + {/*End grid content*/}
- {/*Description and input */} -
- -