From 7c2a99ba8043ca35a40315c900d762a7e7beb12c Mon Sep 17 00:00:00 2001
From: Aayush <aayush.shetty12@gmail.com>
Date: Tue, 31 Mar 2026 20:20:49 -0400
Subject: [PATCH 1/2] fixed ui/ux bugs

---
 .../Reports/Participation/DropOffTracking.jsx | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
index 63ffd35c82..24e951e598 100644
--- a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
@@ -73,19 +73,23 @@ function DropOffTracking() {
 
       <div className={styles.trackingSummary}>
         <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
-          <p className={styles.trackingRateValue}>
-            +5% <span>Last week</span>
-          </p>
           <p className={styles.trackingRateSubheading}>
-            <span> Drop-off rate</span>
+            <span>
+              <b>Drop-off rate</b>
+            </span>
           </p>
-        </div>
-        <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
           <p className={styles.trackingRateValue}>
-            +5% <span>Last week</span>
+            +5% <span>since Last week</span>
           </p>
+        </div>
+        <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
           <p className={styles.trackingRateSubheading}>
-            <span> No-show rate </span>
+            <span>
+              <b>No-show rate</b>
+            </span>
+          </p>
+          <p className={styles.trackingRateValue}>
+            +5% <span>since Last week</span>
           </p>
         </div>
       </div>

From 0a7cb71df4be3e8f4ab2533b09c8a990fb5790f0 Mon Sep 17 00:00:00 2001
From: Aayush <aayush.shetty12@gmail.com>
Date: Wed, 1 Apr 2026 02:31:18 -0400
Subject: [PATCH 2/2] fixed percentages color

---
 .../Reports/Participation/DropOffTracking.jsx         |  8 ++++++--
 .../Reports/Participation/Participation.module.css    | 11 +++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
index 24e951e598..9c3ff921cd 100644
--- a/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
+++ b/src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx
@@ -79,7 +79,8 @@ function DropOffTracking() {
             </span>
           </p>
           <p className={styles.trackingRateValue}>
-            +5% <span>since Last week</span>
+            <span className={styles.trackingRateValuePositive}>+5%</span>{' '}
+            <span>since Last week</span>
           </p>
         </div>
         <div className={`${styles.trackingRate} ${darkMode ? styles.trackingRateDark : ''}`}>
@@ -89,7 +90,10 @@ function DropOffTracking() {
             </span>
           </p>
           <p className={styles.trackingRateValue}>
-            +5% <span>since Last week</span>
+            <span className={styles.trackingRateValueNegative}>
+              <b>-5%</b>
+            </span>{' '}
+            <span>since Last week</span>
           </p>
         </div>
       </div>
diff --git a/src/components/CommunityPortal/Reports/Participation/Participation.module.css b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
index d250be26a1..71c43cab43 100644
--- a/src/components/CommunityPortal/Reports/Participation/Participation.module.css
+++ b/src/components/CommunityPortal/Reports/Participation/Participation.module.css
@@ -272,7 +272,6 @@
   border-radius: 10px;
   width: 48%;
   padding: 10px;
-  color: #ffffff;
 }
 
 .trackingRateDark .trackingRateSubheading span,
@@ -282,9 +281,17 @@
 
 .trackingRateValue {
   font-size: 0.9rem;
-  color: #f44336;
   display: inline-block;
 }
+.trackingRate .trackingRateValue span.trackingRateValuePositive,
+.trackingRateDark .trackingRateValue span.trackingRateValuePositive {
+  color: #f44336 !important;
+}
+
+.trackingRate .trackingRateValue span.trackingRateValueNegative,
+.trackingRateDark .trackingRateValue span.trackingRateValueNegative {
+  color: #008000 !important;
+}
 
 /* Tables */
 .trackingListContainer {