From ef04b24bc63b9c9035bef96e1446f9ba4b8a0ea0 Mon Sep 17 00:00:00 2001
From: Jeffrey De-Graft Hinson <jdegrafthinson@gmail.com>
Date: Fri, 20 Dec 2024 08:22:44 +0000
Subject: [PATCH] feature: add grid to widgets in overview and make it
 responsive

---
 .../Components/CampaignStats/index.tsx        | 30 ++++----------
 .../CampaignStats/styles.module.scss          | 39 ++++++++++++-------
 2 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
index 10821bc441..8d374a41b5 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/index.tsx
@@ -55,20 +55,16 @@ const CampaignStats = () => {
     return (
         <>
             <DateRangeFilters selected={dayRange} options={filterOptions} onSelect={onDayRangeChange} />
-            <Row>
-                <Column>
-                    <Row>
-                        <StatWidget label={__('Amount raised')} values={pluck(stats, 'amountRaised')} description={widgetDescription} formatter={currency} />
-                        <StatWidget label={__('Number of donations')} values={pluck(stats, 'donationCount')} description={widgetDescription} />
-                    </Row>
-                    <RevenueWidget />
-                </Column>
-                <Column>
+            <div className={styles.mainGrid}>
+                    <StatWidget label={__('Amount raised')} values={pluck(stats, 'amountRaised')} description={widgetDescription} formatter={currency} />
+                    <StatWidget label={__('Number of donations')} values={pluck(stats, 'donationCount')} description={widgetDescription} />
                     <StatWidget label={__('Number of donors')} values={pluck(stats, 'donorCount')} description={widgetDescription} />
+                    <RevenueWidget />
+                <div className={styles.nestedGrid}>
                     <GoalProgressWidget />
                     <DefaultFormWidget defaultForm={campaign.defaultFormTitle} />
-                </Column>
-            </Row>
+                </div>
+            </div>
         </>
     )
 }
@@ -174,16 +170,4 @@ const DateRangeFilters = ({options, onSelect, selected}) => {
 }
 
 
-const Row = ({children}) => (
-    <div className={styles.row}>
-        {children}
-    </div>
-)
-
-const Column = ({children}) => (
-    <div className={styles.column}>
-        {children}
-    </div>
-)
-
 export default CampaignStats;
diff --git a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
index c0b3ccaf5f..cda73f5760 100644
--- a/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
+++ b/src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/styles.module.scss
@@ -50,6 +50,7 @@
     color: var(--givewp-neutral-700);
     font-weight: 600;
     border-radius: var(--givewp-rounded-8);
+    grid-column: span 1;
 }
 
 .statWidget header, .statWidget footer {
@@ -83,6 +84,7 @@
     background-color: var(--givewp-shades-white);
     padding: 20px;
     border-radius: var(--givewp-rounded-8);
+    grid-column: span 2;
 }
 
 .percentChangePill {
@@ -98,20 +100,31 @@
     border-radius: var(--givewp-rounded-8);
 }
 
-.column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: var(--givewp-spacing-6);
+.mainGrid{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: var(--givewp-spacing-6);
+    column-gap: var(--givewp-spacing-4);
 }
 
-.column:first-child {
-    flex: 2;
+.nestedGrid {
+    grid-column: span 1;
+    display: grid;
+    gap: var(--givewp-spacing-6);
 }
 
-.row {
-    display: flex;
-    flex-direction: row;
-    gap: var(--givewp-spacing-4);
-}
+@media (max-width: 768px) {
+    .mainGrid {
+      grid-template-columns: 1fr;
+      gap: var(--givewp-spacing-3);
+    }
+  
+    .revenueWidget {
+      grid-column: span 1;
+    }
+
+    .nestGrid {
+        grid-template-columns: 1fr;
+        gap: var(--givewp-spacing-3);
+    }
+}
\ No newline at end of file