From 7f68abec0b3565d2a75e60746470fcf73af5c097 Mon Sep 17 00:00:00 2001
From: Yash Mathur <ymathur123@gmail.com>
Date: Fri, 4 Oct 2024 17:05:48 +0530
Subject: [PATCH] UI Improvements

---
 open-giving/src/components/FilterAccordion.js |  2 +-
 open-giving/src/components/NonProfitCard.js   |  4 +--
 open-giving/src/components/NonProfitGrid.js   | 35 +++++++++++--------
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/open-giving/src/components/FilterAccordion.js b/open-giving/src/components/FilterAccordion.js
index 2186edb..1883aa2 100644
--- a/open-giving/src/components/FilterAccordion.js
+++ b/open-giving/src/components/FilterAccordion.js
@@ -17,7 +17,7 @@ const FilterAccordion = ({
   onMethodToggle,
   paymentMethods,
 }) => (
-  <Accordion expanded={isExpanded} onChange={() => setIsExpanded(!isExpanded)}>
+  <Accordion sx={{marginBottom:"0.5rem"}} expanded={isExpanded} onChange={() => setIsExpanded(!isExpanded)}>
     <AccordionSummary
       expandIcon={<ExpandMoreIcon />}
       aria-controls="filter-content"
diff --git a/open-giving/src/components/NonProfitCard.js b/open-giving/src/components/NonProfitCard.js
index dc2b66b..056b4be 100644
--- a/open-giving/src/components/NonProfitCard.js
+++ b/open-giving/src/components/NonProfitCard.js
@@ -31,8 +31,8 @@ export default function NonProfitCard({ nonProfit, onLearnMore, showQRCode }) {
 
   return (
     <Card
-      sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-      elevation={2}
+    sx={{ height: '100%', display: 'flex', flexDirection: 'column', transition: 'transform 0.3s ease, box-shadow 0.3s ease', '&:hover': { transform: 'translateY(-8px)', boxShadow: 6 }}}
+    elevation={2}
     >
       <CardMedia
         component="div"
diff --git a/open-giving/src/components/NonProfitGrid.js b/open-giving/src/components/NonProfitGrid.js
index e73bd95..4217b57 100644
--- a/open-giving/src/components/NonProfitGrid.js
+++ b/open-giving/src/components/NonProfitGrid.js
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Grid, Grow } from '@mui/material';
 import React from 'react';
 
 import NonProfitCard from './NonProfitCard';
@@ -10,22 +10,27 @@ const NonProfitGrid = ({
   useTestPaymentID,
 }) => (
   <Grid container spacing={3}>
-    {nonProfits.map((nonProfit) => (
-      <Grid
-        item
-        xs={6}
-        sm={6}
-        md={4}
+    {nonProfits.map((nonProfit, index) => (
+      <Grow
+        in={true}
         key={nonProfit.npCode}
-        id={`nonprofit-${nonProfit.npCode}`}
+        style={{ transitionDelay: `${index * 50}ms` }}
       >
-        <NonProfitCard
-          nonProfit={nonProfit}
-          onLearnMore={() => onOpenDialog(nonProfit)}
-          showQRCode={showQRCode}
-          useTestPaymentID={useTestPaymentID}
-        />
-      </Grid>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          md={4}
+          id={`nonprofit-${nonProfit.npCode}`}
+        >
+          <NonProfitCard
+            nonProfit={nonProfit}
+            onLearnMore={() => onOpenDialog(nonProfit)}
+            showQRCode={showQRCode}
+            useTestPaymentID={useTestPaymentID}
+          />
+        </Grid>
+      </Grow>
     ))}
   </Grid>
 );