From 81996d07d2bed920569ba23c62ccda5d94a3cc06 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:10:48 -0500
Subject: [PATCH 1/3] fix: changed card display to square instead of rectangle

---
 .../CommunityPortal/CPDashboard.jsx           |  2 +-
 .../CommunityPortal/CPDashboard.module.css    | 49 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.jsx b/src/components/CommunityPortal/CPDashboard.jsx
index 8baf7053c4..5605370fa4 100644
--- a/src/components/CommunityPortal/CPDashboard.jsx
+++ b/src/components/CommunityPortal/CPDashboard.jsx
@@ -11,7 +11,7 @@ const FixedRatioImage = ({ src, alt, fallback }) => (
   <div
     style={{
       width: '100%',
-      aspectRatio: '4 / 3',
+      height: '100%',
       overflow: 'hidden',
       background: '#f2f2f2',
     }}
diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index d2db76875f..87e851a840 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -210,7 +210,11 @@
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 1 / 1; 
+  background: #fff;
 }
 
 .eventCardCol {
@@ -222,28 +226,55 @@
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
+.eventCardImgContainer {
+  width: 100%;
+  height: 40%; 
+  flex-shrink: 0;
+}
+
 .eventCardImgContainer img {
   width: 100%;
-  height: auto;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+.eventCard :global(.card-body) {
+  flex-grow: 1;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; 
+  scrollbar-width: thin; 
+  gap: 4px;
+}
+
+.eventCard :global(.card-body)::-webkit-scrollbar {
+  width: 4px;
+}
+.eventCard :global(.card-body)::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 10px;
 }
 
 .eventTitle {
-  text-align: center;
-  color: #2c3e50;
-  margin: 10px 0;
-  font-weight: bold;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 8px;
+  color: #1b3c55;
+  text-align: left; 
 }
 
 .eventDate,
 .eventLocation,
 .eventOrganizer {
-  font-size: 1rem;
+  font-size: 0.85rem;
   color: #555;
   display: flex;
   align-items: center;
   gap: 8px;
-  margin: 8px 0;
+  margin: 4px 0;
 }
 
 .paginationContainer {

From a236b386e84860a7d785b21623f484b143835883 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Fri, 8 May 2026 17:12:46 -0700
Subject: [PATCH 2/3] fix: fixed sonar qube condition

---
 .../CommunityPortal/CPDashboard.module.css          | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index deb913a26b..31e9c1d914 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -506,24 +506,16 @@
   margin-bottom: 1.5rem;
 }
 
-.eventCardImgContainer img {
-  width: 100%;
-  height: auto;
-}
-
 .eventCard {
   width: 100%;
   height: 100%;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 15px rgb(0 0 0 / 10%);
   transition: transform 0.3s ease;
-  display: flex;
-  flex-direction: column;
-  aspect-ratio: 1 / 1; 
+  aspect-ratio: 1 / 1;
   background: #fff;
 }
 
@@ -562,6 +554,7 @@
 .eventCard :global(.card-body)::-webkit-scrollbar {
   width: 4px;
 }
+
 .eventCard :global(.card-body)::-webkit-scrollbar-thumb {
   background: #ccc;
   border-radius: 10px;

From e1bfe5bf4e52d26b1f8bf8e2435a71361102ec94 Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Sat, 20 Jun 2026 16:58:22 -0700
Subject: [PATCH 3/3] fix: sonar qube issue and search icon

---
 .../CommunityPortal/CPDashboard.module.css    | 106 ++++++++----------
 1 file changed, 49 insertions(+), 57 deletions(-)

diff --git a/src/components/CommunityPortal/CPDashboard.module.css b/src/components/CommunityPortal/CPDashboard.module.css
index 431ac9ca2b..2d5159a683 100644
--- a/src/components/CommunityPortal/CPDashboard.module.css
+++ b/src/components/CommunityPortal/CPDashboard.module.css
@@ -1,5 +1,5 @@
 :global(body) {
-  font-family: 'Poppins', sans-serif;
+  font-family: Poppins, sans-serif;
   background: #fff;
   margin: 0;
   padding: 0;
@@ -11,9 +11,9 @@
 .dashboard-container {
   padding: 40px 10px;
   margin: 0 auto;
-  background: #ffffff;
+  background: #fff;
   border-radius: 16px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 20px rgb(0 0 0 /10%);
   font-size: 16px;
   line-height: 1.6;
   letter-spacing: 0.2px;
@@ -22,7 +22,7 @@
 
 .dashboard-container-dark {
   background: #1b2a41;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 6px 20px rgb(0 0 0 /30%);
 }
 
 /* ======================================
@@ -34,14 +34,14 @@
   align-items: center;
   margin-bottom: 30px;
   padding: 16px 24px;
-  background: linear-gradient(120deg, #ffffff, #f8f9fa);
+  background: linear-gradient(120deg, #fff, #f8f9fa);
   border-radius: 12px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 10px rgb(0 0 0 /10%);
 }
 
 .dashboard-header-dark {
   background: linear-gradient(120deg, #2b3e59, #22304a);
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 10px rgb(0 0 0 /30%);
 }
 
 .dashboard-header h1 {
@@ -52,7 +52,7 @@
 }
 
 .dashboard-title-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 /* ======================================
@@ -64,8 +64,8 @@
   align-items: center;
   border-radius: 999px;
   overflow: hidden;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-  background: #ffffff;
+  box-shadow: 0 0 4px rgb(0 0 0 /10%);
+  background: #fff;
 }
 
 .dashboard-search-input {
@@ -74,14 +74,14 @@
   border: 2px solid #1b3c55;
   min-width: 260px;
   outline: none;
-  background: #ffffff;
+  background: #fff;
   color: #2c3e50;
 }
 
 .dashboard-search-input-dark {
   border-color: #4a5a77;
   background: #3a506b;
-  color: #ffffff;
+  color: #fff;
 }
 
 .dashboard-search-input-dark::placeholder {
@@ -90,13 +90,13 @@
 
 .dashboard-search-input:focus {
   border-color: #34495e;
-  box-shadow: 0 0 8px rgba(52, 73, 94, 0.3);
+  box-shadow: 0 0 8px rgb(52 73 94 /30%);
   outline: none;
 }
 
 .dashboard-search-input-dark:focus {
   border-color: #e8a71c;
-  box-shadow: 0 0 8px rgba(232, 167, 28, 0.3);
+  box-shadow: 0 0 8px rgb(232 167 28 /30%);
 }
 
 .dashboard-clear-btn {
@@ -116,7 +116,7 @@
 }
 
 .dashboard-clear-btn-dark {
-  color: #ffffff;
+  color: #fff;
 }
 
 .dashboard-search-icon-btn {
@@ -139,7 +139,7 @@
 }
 
 .dashboard-search-icon-btn-dark {
-  color: #ffffff;
+  color: #fff;
 }
 
 /* Hide browser's built-in clear icon for search inputs */
@@ -147,8 +147,8 @@
 .dashboard-search-input::-webkit-search-decoration,
 .dashboard-search-input::-webkit-search-results-button,
 .dashboard-search-input::-webkit-search-results-decoration {
-  -webkit-appearance: none;
   appearance: none;
+  display: none;
 }
 
 /* ======================================
@@ -180,28 +180,28 @@
 .filter-section {
   width: 100%;
   padding: 24px;
-  background: #ffffff;
+  background: #fff;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgb(0 0 0 /10%);
   overflow: visible;
   box-sizing: border-box;
 }
 
 .filter-section-dark {
   background: #2b3e59;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 12px rgb(0 0 0 /30%);
 }
 
 .filter-section h4 {
   font-size: 1.5rem;
   color: #2c3e50;
   font-weight: 600;
-  margin: 0 0 24px 0;
+  margin: 0 0 24px;
   padding: 0;
 }
 
 .filter-section-title-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .filter-section-divider {
@@ -221,16 +221,16 @@
   font-size: 1rem;
   font-weight: 500;
   color: #2c3e50;
-  margin: 0 0 8px 0;
+  margin: 0 0 8px;
   display: block;
   width: 100%;
 }
 
 .filter-label-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
-.filter-item input:not([type="checkbox"]):not([type="radio"]),
+.filter-item input:not([type="checkbox"], [type="radio"]),
 .filter-item select {
   padding: 10px 14px;
   margin: 0;
@@ -240,15 +240,15 @@
   font-size: 1rem;
   transition: all 0.3s ease;
   border: 1px solid #ddd;
-  background: #ffffff;
+  background: #fff;
   color: #2c3e50;
   box-sizing: border-box;
 }
 
-.filter-item input:not([type="checkbox"]):not([type="radio"]):focus,
+.filter-item input:not([type="checkbox"], [type="radio"]):focus,
 .filter-item select:focus {
   border-color: #2c3e50;
-  box-shadow: 0 0 5px rgba(44, 62, 80, 0.4);
+  box-shadow: 0 0 5px rgb(44 62 80 /40%);
   outline: none;
 }
 
@@ -256,18 +256,18 @@
 .date-filter-dark {
   border-color: #4a5a77 !important;
   background: #3a506b !important;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .filter-select-dark:focus,
 .date-filter-dark:focus {
   border-color: #e8a71c !important;
-  box-shadow: 0 0 5px rgba(232, 167, 28, 0.4) !important;
+  box-shadow: 0 0 5px rgb(232 167 28 /40%) !important;
 }
 
 .filter-select-dark option {
   background: #3a506b !important;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 /* Global dark mode styles for reactstrap Input components */
@@ -276,7 +276,7 @@
 :global(.date-filter-dark.form-control) {
   border-color: #4a5a77 !important;
   background-color: #3a506b !important;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 :global(.filter-select-dark.form-control:focus),
@@ -284,8 +284,8 @@
 :global(.date-filter-dark.form-control:focus) {
   border-color: #e8a71c !important;
   background-color: #3a506b !important;
-  color: #ffffff !important;
-  box-shadow: 0 0 5px rgba(232, 167, 28, 0.4) !important;
+  color: #fff !important;
+  box-shadow: 0 0 5px rgb(232 167 28 /40%) !important;
 }
 
 /* Radio and Checkbox Styling */
@@ -325,7 +325,6 @@
   flex-shrink: 0;
   position: relative;
   appearance: auto;
-  -webkit-appearance: auto;
   box-sizing: border-box;
 }
 
@@ -370,10 +369,7 @@
 /* Override any reactstrap default styles that might clip content */
 :global(.radio-label .form-check-input),
 :global(.checkbox-label .form-check-input) {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+  margin: 0 !important;
   position: static !important;
 }
 
@@ -387,7 +383,7 @@
 }
 
 .filter-option-text-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .date-filter {
@@ -402,13 +398,13 @@
 .section-title {
   font-size: 2.2rem;
   color: #2c3e50;
-  margin: 0 0 24px 0;
+  margin: 0 0 24px;
   font-weight: bold;
   text-align: center;
 }
 
 .section-title-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 /* ======================================
@@ -424,19 +420,19 @@
   flex-direction: column;
   width: 100%;
   aspect-ratio: 1 / 1;
-  background: #ffffff;
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  box-shadow: 0 6px 15px rgb(0 0 0 /10%);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .event-card-dark {
   background: #2b3e59;
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 6px 15px rgb(0 0 0 /30%);
 }
 
 .event-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 20px rgb(0 0 0 /20%);
 }
 
 .event-card-col {
@@ -478,7 +474,7 @@
 }
 
 .event-card-dark:hover {
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 8px 20px rgb(0 0 0 /50%);
 }
 
 .event-card-body-dark {
@@ -495,7 +491,7 @@
 }
 
 .event-title-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .event-date,
@@ -513,10 +509,6 @@
   color: #d1d5db !important;
 }
 
-.event-text-dark {
-  color: #d1d5db !important;
-}
-
 .event-icon {
   flex-shrink: 0;
 }
@@ -561,7 +553,7 @@
 
 .dashboard-actions button {
   background-color: #2c3e50;
-  color: #ffffff;
+  color: #fff;
   border: none;
   padding: 12px 25px;
   font-size: 1rem;
@@ -573,14 +565,14 @@
 
 .dashboard-actions button:hover {
   background-color: #34495e;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 12px rgb(0 0 0 /20%);
 }
 
 /* ======================================
    LOADING & ERROR STATES
    ====================================== */
 .loading-text-dark {
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .error-text {
@@ -597,9 +589,9 @@
 /* ======================================
    RESPONSIVE
    ====================================== */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .dashboard-main {
-    padding: 24px 0 0 0;
+    padding: 24px 0 0;
   }
 
   .filter-section {