Implement grant cards

[lyannne]

ℹ️ Issue

Closes #308

📝 Description

Created grant card component to be used on the grant directory page

Briefly list the changes made to the code:

1. Created GrantCard.tsx component for each grant with props so grant selected is outlined in blue and the hover to view "eligible" or "ineligible"
2. Implemented the mapping of the GrantCard.tsx component on GrantPage.tsx, along with Jane's component for the expanded grant view so that when a grant is clicked, it displays that grant's information on the left.
3. Moved The UseEffect on Jane's component, GrantView.tsx to GrantPage.tsx so both components can rerender when the variables change. I also edited the UseEffect to update the entire grant array.
4. Small CSS changes, like making the padding on the main content smaller so the components inside would fit better.
5. Extra: Implemented some parts of the main grant page layout, like the search bar taking up the whole width and restyling the add grant button to look more like the design.

✔️ Verification

Test Changes

If your new feature required some test to be changed or added to fit the new functionality or changes please document these changes here.

N/A

🏕️ (Optional) Future Work / Notes

Notes:

• I chose to implement the grant cards component as a scrollable div, but I'm not sure if we want to keep that.
• I also took liberties w/ text size to make the card component look better (made text smaller than what it is on the Figma)

[Copilot]

Pull request overview

This pull request implements the grant card component for the grant directory page as part of issue #308. The changes introduce a new card-based UI for displaying grants with an interactive list/detail view layout, replacing the previous table-based design.

Changes:

• Created a new GrantCard component with hover-based eligibility indicators and selection states
• Refactored GrantPage to display grants in a two-column layout with cards on the left and detailed view on the right
• Moved grant refresh logic from GrantView to GrantPage for better state management
• Updated styling for search bar, add button, and notification popup to align with new design

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
frontend/src/main-page/grants/grant-list/GrantCard.tsx	New component implementing grant cards with eligibility indicators and selection state
frontend/src/main-page/grants/GrantPage.tsx	Major refactor to two-column layout, integrated grant selection logic and refresh functionality
frontend/src/main-page/grants/grant-view/GrantView.tsx	Removed local state management and useEffect, now receives grant as prop
frontend/src/main-page/grants/styles/GrantButton.css	Updated add button styling to circular design
frontend/src/main-page/grants/styles/GrantSearch.css	Made search bar full-width with updated styling
frontend/src/main-page/grants/filter-bar/GrantSearch.tsx	Updated placeholder text
frontend/src/styles/notification.css	Adjusted notification popup position
frontend/src/main-page/MainPage.tsx	Reduced page padding for new layout
frontend/src/Login.tsx	Changed default redirect route

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[janekamata]

I have a few suggestions I think should be addressed before this is merged. Let me know if you have any questions! Good job overall though. Just being detailed on this since this is the most important page