Merge pull request #4776 from OneCommunityGlobal/Akshith-add-event-modal-icons

Akshith - Event Details Popup Add Icons in Community Calendar

Author: one-community

src/components/CommunityPortal/Calendar/CommunityCalendar.jsx

@@ -6,6 +6,17 @@ import axios from 'axios';
 import { ENDPOINTS } from '../../../utils/URL';
 import CalendarActivitySection from './CalendarActivitySection';
 import styles from './CommunityCalendar.module.css';
+import {
+  FaCalendarAlt,
+  FaClock,
+  FaMapMarkerAlt,
+  FaTag,
+  FaAlignLeft,
+  FaVideo,
+  FaUsers,
+  FaGlassCheers,
+} from 'react-icons/fa';
+import { GrWorkshop } from 'react-icons/gr';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClock, faLocationDot, faTag, faCircleCheck } from '@fortawesome/free-solid-svg-icons';
 
@@ -455,6 +466,21 @@ export default function CommunityCalendar() {
     [darkMode],
   );
 
+  const getTypeIcon = type => {
+    switch (type) {
+      case 'Workshop':
+        return <GrWorkshop />;
+      case 'Webinar':
+        return <FaVideo />;
+      case 'Meeting':
+        return <FaUsers />;
+      case 'Social Gathering':
+        return <FaGlassCheers />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className={calendarClasses.container}>
       {/* Inline styles to ensure selected date number is visible in dark mode - force dark background */}
@@ -741,26 +767,31 @@ export default function CommunityCalendar() {
               </div>
 
               <div className={styles.eventDetailsGrid}>
-                <div className={styles.detailItem}>
-                  <span>Type:</span>
-                  <span>{selectedEvent.type}</span>
-                </div>
-                <div className={styles.detailItem}>
-                  <span>Location:</span>
-                  <span>{selectedEvent.location}</span>
-                </div>
-                <div className={styles.detailItem}>
-                  <span>Date:</span>
-                  <span>{selectedEvent.date.toLocaleDateString()}</span>
-                </div>
-                <div className={styles.detailItem}>
-                  <span>Time:</span>
-                  <span>{selectedEvent.time}</span>
-                </div>
+                {[
+                  [FaTag, 'Type', selectedEvent.type],
+                  [FaMapMarkerAlt, 'Location', selectedEvent.location],
+                  [FaCalendarAlt, 'Date', selectedEvent.date.toLocaleDateString()],
+                  [FaClock, 'Time', selectedEvent.time],
+                ].map(([Icon, label, value]) => (
+                  <div key={label} className={styles.detailItem}>
+                    <span className={styles.detailLabel}>
+                      <Icon className={styles.detailIcon} />
+                      {label}:
+                    </span>
+
+                    <span>
+                      {label === 'Type' ? getTypeIcon(selectedEvent.type) : null} {value}
+                    </span>
+                  </div>
+                ))}
               </div>
 
               <div className={styles.eventDescription}>
-                <span>Description:</span>
+                <span className={styles.detailLabel}>
+                  <FaAlignLeft className={styles.detailIcon} />
+                  Description:
+                </span>
+
                 <p>{selectedEvent.description}</p>
               </div>
             </div>

src/components/CommunityPortal/Calendar/CommunityCalendar.module.css

@@ -2,7 +2,8 @@
 .calendarContainer {
   display: flex;
   flex-direction: row;
-  min-width: 100%;
+  width: 100%;
+  min-width: 0;
   align-items: stretch;
   gap: 20px;
 }
@@ -22,6 +23,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .calendarActivitySectionDarkMode,
@@ -68,8 +70,6 @@
   font-size: 1.2rem;
   border: 2px solid #ddd;
   border-radius: 8px;
-
-  /* overflow: hidden; */
   background-color: #fff;
   padding: 2rem;
 }
@@ -158,21 +158,13 @@
   margin-bottom: 0 !important;
 }
 
-.reactCalendar :global(.react-calendar__tile) {
-  display: grid;
-  height: 100px;
-  border: 1px solid #dee2e6 !important;
-  box-sizing: border-box;
-  transition: background 0.3s, border-color 0.3s ease;
-  overflow: visible !important;
-  position: relative;
-  padding: 4px;
-  color: #1a202c;
-}
-
+.reactCalendar :global(.react-calendar__tile),
 .reactCalendarDarkMode :global(.react-calendar__tile) {
-  background: transparent;
-  color: #fff;
+  height: 110px !important;
+  max-height: 110px !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 .reactCalendar :global(.react-calendar__tile):hover {
@@ -1374,33 +1366,57 @@
   display: block;
 }
 
+.detailIcon {
+  margin-right: 8px;
+  vertical-align: middle;
+  color: #718096;
+  font-size: 1rem;
+}
+
+.eventModalDark .detailIcon {
+  color: #cbd5e0;
+}
+
+.weekGridRoot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
 /* Week Grid Styles */
-.weekGridContainer {
+.weekGridRoot .weekGridContainer {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   height: 700px;
+  max-width: 100%;
   overflow: hidden;
   margin-bottom: 20px;
 }
 
-.weekGridBody {
+.weekGridRoot .weekGridBody {
   flex: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
   background: #fff;
+  min-width: 0;
 }
 
 @media (width <= 1024px) {
-  .calendarContainer{
+  .calendarContainer {
     flex-direction: column;
   }
 
   .reactCalendar {
     padding: 1rem;
   }
 
+  .weekGridRoot .weekGridContainer {
+    height: auto;
+    min-height: 500px;
+  }
 }
 
 .dateLabel {
@@ -1409,11 +1425,12 @@
   color: #1e293b;
 }
 
-.hourRow {
+.weekGridRoot .hourRow {
   display: grid;
-  grid-template-columns: 80px repeat(7, 1fr);
+  grid-template-columns: 80px repeat(7, minmax(0, 1fr));
   min-height: 80px;
   border-bottom: 1px solid #f1f5f9;
+  width: 100%;
 }
 
 .timeLabel {
@@ -1426,26 +1443,40 @@
   border-right: 1px solid #e2e8f0;
 }
 
-.gridCell {
+.weekGridRoot .gridCell {
+  min-width: 0;              /* CRITICAL */
+  max-width: 100%;          /* CRITICAL */
+  overflow: hidden;         /* prevents bleed */
   border-left: 1px solid #f1f5f9;
   position: relative;
   padding: 4px;
-  transition: background 0.2s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 }
 
 .gridCell:hover {
   background-color: #f8fafc;
 }
 
 .gridEvent {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;          /* CRITICAL */
+  box-sizing: border-box;
   background: #dcfce7;
   border-left: 4px solid #22c55e;
   border-radius: 6px;
   padding: 6px;
   font-size: 0.75rem;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
-  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.gridEvent * {
+  min-width: 0;
 }
 
 .gridEventTitle {
@@ -1514,9 +1545,9 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;        /* CRITICAL */
   overflow: hidden;
 }
-
 .eventIcon {
   font-size: 0.75rem;
   flex-shrink: 0;
@@ -1525,6 +1556,8 @@
 }
 
 .eventTitleText {
+  flex: 1;
+  min-width: 0;        /* CRITICAL */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1536,3 +1569,4 @@
   gap: 4px;
   font-weight: 600;
 }
+